javascript - 如何禁用/隐藏基于 IList 值的局部 View ？

Question

我想根据两个不同 IList 中的值禁用或隐藏 PartialView。这两个列表都存储在两个 session 变量中，_UserRoleList 和 _PartialRoleList。

_UserRoleList 的列表内容属于 User 类型，其中包含以下属性:

• 用户名
• Angular 色ID
• Angular 色描述
• SID

_PartialRoleList 的列表内容属于 PartialRole 类型，它包含以下属性:

• 部分名称
• Angular 色ID
• 访问级别ID
• 访问级别描述

案例 1 - 禁用部分 View 内的所有输入控件:

如果 RoleID of 3 在两个 session 列表中都能找到。

案例 2 - 在分部 View 中将所有输入控件设置为只读:

指定 PartialView(id 为“frmClientDetails”)上的所有输入控件(文本框、列表框、复选框、下拉列表)都应将其只读属性设置为 true，如果 在两个 session 列表中都找到了 2 的 RoleID。

问题:检索这两个列表然后使用 jQuery 会更好吗 .each遍历并搜索 RoleID 字段是否相等？另一种选择是使用 Razor 吗？如果可以提供伪代码，那将是一个很大的帮助。

Controller 片段:

public ViewResult Index()   /* Master View, starting point of application */
{
    int userID;
    IList<User> userRoleList;
    IList<PartialRole> partialRoleList;
    WindowsIdentity identity = null;

    identity = WindowsIdentity.GetCurrent();

    userRoleList = _homeService.GetUserDetails(identity.User.ToString());

    userID = userRoleList.First().ID;

    partialRoleList = _homeService.GetPartialDetails(userID);

    if (Session["_UserRoleList"] == null)
    {
        HttpContext.Session.Contents.Add("_UserRoleList", userRoleList);
    }

    if (Session["_PartialRoleList"] == null)
    {
        HttpContext.Session.Contents.Add("_PartialRoleList", partialRoleList);
    }

    return View();
}

原始 View - ClientDetails.cshtml:

@using InvoiceManagement.Models
@model InvoiceClient

@{
InvoiceCreditNoteViewModel viewModel = new InvoiceCreditNoteViewModel();
viewModel.Client = Model;

ViewBag.Title = "Client Details";

 List<User> userRoleList = Session["_UserRoleList"] != null ? (List<User>)Session["_UserRoleList"] : null;
 List<PartialRole> partialRoleList = Session["_PartialRoleList"] != null ? (List<PartialRole>)Session["_PartialRoleList"] : null;
}

@section scripts{
<script type="text/javascript">
    $(document).ready(function () {
        $('input[type=radio][name=optionInvoiceCreditNote]').change(function () {
            if (this.value == 'invoice') {
                $("#InvoiceGrid").show();
                $("#CreditNoteGrid").hide();
            }
            else if (this.value == 'creditNote') {
                $("#InvoiceGrid").hide();
                $("#CreditNoteGrid").show();
            }
        });

        $('#showActive').click(function (e) {
            if($(this).prop('checked') === true){
                var url = '@Url.Action("FilterActiveOnlyAgreements")';

                $.get(url, { invoiceClientID: '@Model.ID' }, function (result) {
                    $('#agreementGrid').html(result);
                });
            }
            else {
                var url = '@Url.Action("FilterAllAgreements")';

                $.get(url, { invoiceClientID: '@Model.ID' }, function (result) {
                    $('#agreementGrid').html(result);
                });
            }
        });
    });
</script>
}

@Html.Partial("ClientDetailsFormPartial", viewModel.Client)

@if (viewModel.Client.ID > 0)
{
    @Html.Partial("ClientDetailsAgreementPartial")
    @Html.Partial("InvoiceCreditNoteContainerPartial", viewModel)
}

部分 View - ClientDetailsFormPartial:

@using InvoiceManagement.Models
@model InvoiceClient

@using (@Html.BeginForm("ClientDetails", "Client", FormMethod.Post, new { @id = "frmClientDetails" }))
{
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-2">
                <h2>Client Details</h2>
            </div>
            <div class="col-xs-2" style="min-height: 70px;">
                <a href="/client/SearchForClient" class="btn btn-default" style="position: absolute; bottom: 15px">Search New Client</a>
            </div>
            <div class="form-group col-xs-2" style="min-height: 70px;">
                <div class="input-group" style="top: 21px">
                    <span class="input-group-addon" id="client-ID">Client ID</span>
                    @Html.TextBox("ID", Model.ID, new { @class = "form-control", @readonly = "readonly" })
                </div>
                <div class="has-error">
                    @Html.ValidationMessageFor(m => m.ID, String.Empty, new { @class = "help-block" })
                </div>
            </div>
            <div class="form-group col-xs-3" style="min-height: 70px;">
                <div class="input-group" style="top: 21px">
                    <span class="input-group-addon" id="accounting-ID">Accounting ID</span>
                    @if (Model.AID == null && Model.ID == 0)
                    {
                        @Html.TextBoxFor(m => m.AID, new { @class = "form-control" }) }
                    else
                    {
                        @Html.TextBoxFor(m => m.AID, new { @class = "form-control", @readonly = "readonly" }) }
                </div>
            </div>
            <div style="padding-top: 22px;">
                <div class="has-error">
                    @Html.ValidationMessageFor(m => m.AID, String.Empty, new { @class = "help-block" })
                </div>
            </div>
        </div>
        <div class="row">
            <div class="form-group col-xs-7">
                <div class="input-group">
                    <span class="input-group-addon" id="client-name">Client Name</span>
                    @Html.TextBoxFor(m => m.InvoiceClientName, new { @class = "form-control", @name = "InvoiceClientName" })
                </div>
                <div class="has-error">
                    @Html.ValidationMessageFor(m => m.InvoiceClientName, String.Empty, new { @class = "help-block" })
                </div>
            </div>
        </div>
        <div class="row">
            <div class="form-group col-xs-3">
                <div class="input-group">
                    <span class="input-group-addon" id="default-tax-code-1">Default Tax Code 1</span>
                    @Html.DropDownListFor(m => m.DefaultTaxCodeID1, (IEnumerable<SelectListItem>)ViewBag.PopulateDefaultTaxCode1, new { @class = "form-control", @id = "default-tax-code1-ID", @name = "defaultTaxCodeID1" })
                </div>
            </div>
            <div class="form-group col-xs-3 col-xs-offset-1">
                <div class="input-group">
                    <span class="input-group-addon" id="default-tax-code-2">Default Tax Code 2</span>
                    @Html.DropDownListFor(m => m.DefaultTaxCodeID2, (IEnumerable<SelectListItem>)ViewBag.PopulateDefaultTaxCode2, new { @class = "form-control", @id = "default-tax-code2-ID", @name = "defaultTaxCodeID2" })
                </div>
            </div>
        </div>
        <div class="row">
            <div class="form-group col-xs-3">
                <div class="input-group">
                    <span class="input-group-addon" id="status">Status</span>
                    @Html.DropDownListFor(m => m.StatusID, (IEnumerable<SelectListItem>)ViewBag.PopulateStatus, new { @class = "form-control", @id = "status-ID", @name = "statusID" })
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-2 col-xs-offset-7">
                @if (Model == null || Model.ID == 0)
                {
                    <button type="submit" class="btn btn-default">Add New Client</button>
                }
                else
                {
                    <button type="submit" class="btn btn-default">Update Existing Client</button>
                }
            </div>
        </div>
    </div>
}

Answer 1

由于 disabled 控件不会回发，因此生成所有额外的 html 毫无意义，并且由于无法编辑 readonly 控件，再次生成所有这些似乎毫无意义额外的 html，然后在您提交表单时将其全部原样发送回服务器。

更好的方法，性能明智的是有 2 个部分 View (例如)_ClientDetails.cshtml 和 _ReadOnlyClientDetails.cshtml。第一个将包含您的表单及其可编辑控件和提交按钮，第二个将仅包含您的属性的文本值，例如

@Html.DisplayNameFor(m => m.InvoiceClientName)
@Html.DisplayFor(m => m.InvoiceClientName)

然后在生成主视图的 Controller 方法中，设置 View 模型属性(或 ViewBag 属性)以指示要显示的部分，例如

ViewBag.IsReadonly = true; // or omit depending on your logic

在主视图中

@if(ViewBag.IsReadonly)
{
    @Html.Partial("_ReadOnlyClientDetails", viewModel.Client)
}
else
{
    @Html.Partial("_ClientDetails", viewModel.Client)
}

旁注:除了 ViewBag.Title = "Client Details"; 之外，您首先 @{ ... } 属于 Controller 方法，而不属于 View 。并且执行类似 viewModel.Client = Model; 的操作完全没有意义。您的 View 应该是 @model InvoiceCreditNoteViewModel 并且由于您没有将模型传递给 View ，因此 viewModel.Client = Model; 无论如何都没有意义，因为它总是 空。

它也不清楚你为什么使用 Session。你 Controller 中的代码应该是这样的

IList<User> userRoleList = _homeService.GetUserDetails(identity.User.ToString());
int userID = userRoleList.First().ID;
IList<PartialRole> partialRoleList = _homeService.GetPartialDetails(userID)
List<int> values = new List<int>(){ 2, 3 };
if (userRoleList.Any(x => values.Contains(x.RoleID)) && partialRoleList.Any(x => values.Contains(x.RoleID)))
{
    ViewBag.IsReadonly = true;
}