Question

我有一对多的课程SubsidiaryClient和Client，如下图所示 enter image description here

我正在使用MVC 5进行开发，并在Create SubsidiaryClient页面中获取ClientID，单击按钮浏览以查找客户端（使用模式表单）。

选择客户端后，我使用javascript在@Html.HiddenField(model => model.ClientID)中设置clientID，填写其余字段并提交。

在提交之前，我打印出ClientID，值为1.然后在提交表单后，ClientID未正确绑定。值仍为0，为什么？如何正确绑定ClientID？

Create.cshtml（查看）

@model Sales.ViewModels.SubsidiaryClientViewModel

@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Subsidiary Client</h4>
        <hr />
        @Html.ValidationSummary(true)

        <div class="form-group">
            @Html.LabelFor(model => model.ClientID, new { @class = "control-label col-md-3" })
            <div class="col-md-9">
                <div class="form-inline">
                    @Html.HiddenFor(model => model.ClientID)
                    @Html.EditorFor(model => model.Client.Name, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly" } })
                    <button class="btn btn-primary" id="btnLookupClient" data-toggle="modal" data-target="#clientModal">...</button>
                </div>
                @Html.ValidationMessageFor(model => model.Client.Name)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Name, new { @class = "control-label col-md-3" })
            <div class="col-md-9">
                @Html.EditorFor(model => model.Name)
                @Html.ValidationMessageFor(model => model.Name)
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-3 col-md-9">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

@section Scripts {
    <script>
        function setClient(clientID, name) {
            document.getElementById("ClientID").value = clientID;
            document.getElementById("Client_Name").value = name;
            $("#clientModal").modal("hide");
        }
    </script>
}

SubsidiaryClientViewModel.cs

public class SubsidiaryClientViewModel
{
    public int SubsidiaryClientID { get; set; }

    [Required]
    [Display(Name = "Client")]
    public int ClientID { get; set; }

    [Required]
    [StringLength(20)]
    [Display(Name = "Subsidiary Client No")]
    public string SubsidiaryClientNo { get; set; }

    [Required]
    [StringLength(50)]
    [Display(Name = "Subsidiary Client Name")]
    public string Name { get; set; }

    public ClientViewModel Client { get; set; }
}

生成的HTML：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Create</title>
    <link href="/Content/bootstrap.css" rel="stylesheet"/>
    <link href="/Content/site.css" rel="stylesheet"/>
    <script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<div class="container body-content">
    <h2>Create</h2>

    <!-- Client Modal -->
    <div class="modal fade" id="clientModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="myModalLabel">Lookup Client</h4>
                </div>
                <div class="modal-body" id="lookup-client-container">
                    ...
                </div>
            </div>
        </div>
    </div>

<form action="/SubsidiaryClient/Create" method="post"><input name="__RequestVerificationToken" type="hidden" value="7GIpLUIuv1DuqCtbq7KNAyTCg9IwwzxF8qZw6c8MZI-ZjpuAiavJBnjVEwABajZG9VgxODl3SfUi47voRM4vauo_uRMqL4ouxpIhXNNT-KAxqhvQIXpNDBBeEonOjrkr0" />    <div class="form-horizontal">
        <h4>Subsidiary Client</h4>
        <hr />


        <div class="form-group">
            <label class="control-label col-md-3" for="OfficeID">Office</label>
            <div class="col-md-9">
                <select class="form-control" data-val="true" data-val-number="The field Office must be a number." data-val-required="The Office field is required." id="OfficeID" name="OfficeID"><option value="">-- Please Select --</option>
<option value="1">Office 1</option>
<option value="3">Office 3</option>
<option value="2">Office 2</option>
</select>
                <span class="field-validation-valid" data-valmsg-for="OfficeID" data-valmsg-replace="true"></span>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-md-3" for="ClientID">Client</label>
            <div class="col-md-9">
                <div class="form-inline">
                    <input data-val="true" data-val-number="The field Client must be a number." data-val-required="The Client field is required." id="ClientID" name="ClientID" type="hidden" value="0" />
                    <input class="form-control text-box single-line" data-val="true" data-val-length="The field Name must be a string with a maximum length of 50." data-val-length-max="50" data-val-required="The Name field is required." id="Client_Name" name="Client.Name" readonly="readonly" type="text" value="" />
                    <button class="btn btn-primary" id="btnLookupClient" data-toggle="modal" data-target="#clientModal">...</button>
                </div>
                <span class="field-validation-valid" data-valmsg-for="Client.Name" data-valmsg-replace="true"></span>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-md-3" for="SubsidiaryClientNo">Subsidiary Client No</label>
            <div class="col-md-9">
                <div class="form-inline">
                    <input class="form-control text-box single-line" data-val="true" data-val-length="The field Subsidiary Client No must be a string with a maximum length of 20." data-val-length-max="20" data-val-required="The Subsidiary Client No field is required." id="SubsidiaryClientNo" name="SubsidiaryClientNo" readonly="readonly" type="text" value="" />
                    <button class="btn btn-primary" id="btnLookupSubsidiaryClient" data-toggle="modal" data-target="#subsidiaryClientModal">...</button>
                </div>
                <span class="field-validation-valid" data-valmsg-for="SubsidiaryClientNo" data-valmsg-replace="true"></span>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-md-3" for="Name">Subsidiary Client Name</label>
            <div class="col-md-9">
                <input class="form-control text-box single-line" data-val="true" data-val-length="The field Subsidiary Client Name must be a string with a maximum length of 50." data-val-length-max="50" data-val-required="The Subsidiary Client Name field is required." id="Name" name="Name" readonly="readonly" type="text" value="" />
                <span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-3 col-md-9">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
</form>

<div>
    <a href="/SubsidiaryClient">Back to List</a>
</div>
    </div>

    <script src="/Scripts/jquery-1.10.2.js"></script>
    <script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
    <script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="/Scripts/bootstrap-hover-dropdown.js"></script>
    <script>
        $(document).ready(function () {
            $("#ClientID").prop("disabled", true);

             //  -- end of #OfficeID change handler ---

            $("#btnLookupClient").click(function (e) {
                e.preventDefault();
                if ($("select[name='OfficeID'] option:selected").index() <= 0) {
                    alert("Please select office");
                    $("#OfficeID").focus();
                    $("#clientModal").one("show.bs.modal", function (e) {
                        return e.preventDefault()
                    });
                }
                var url = '/Client/Search?officeID=' + $("#OfficeID").val();
                $.get(url)
                    .done(function (data) {
                        $("#lookup-client-container").html(data);
                        $("#clientModal").modal(show = true, backdrop = true);
                    });
            });
        });

        function setClient(clientID, name) {
            document.getElementById("ClientID").value = clientID;
            document.getElementById("Client_Name").value = name;
            $("#clientModal").modal("hide");
        }

        function setSubsidiaryClient(subsidiaryClientNo, name) {
            document.getElementById("SubsidiaryClientNo").value = subsidiaryClientNo;
            document.getElementById("Name").value = name;
            $("#subsidiaryClientModal").modal("hide");
        }
    </script>

<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Internet Explorer","requestId":"3afa98d46b7d4e6683875cd03344fa12"}
</script>
<script type="text/javascript" src="http://localhost:52603/eaec46bd244a4d89804bf84d4e75d253/browserLink" async="async"></script>
<!-- End Browser Link -->

</body>
</html>

Answer 1

因为你有

$("#ClientID").prop("disabled", true);

代码中的某处。

如果将输入设置为“禁用”，则模型不会绑定该值。

提交表单后，将值设置为Html.Hidden字段不绑定到模型

1 个答案: