Set Value to Html.HiddenField not Bind to Model After Submit The Form

Question

I have class SubsidiaryClient and Client which relate one-to-many, as seen in picture below enter image description here

I'm developing using MVC 5, and in Create SubsidiaryClient page, to get ClientID, click the button browse to look up the client (using modal form).

After select the client, I'm using javascript to set the clientID in the @Html.HiddenField(model => model.ClientID), fill the rest field and submit.

Before submit I print out the ClientID and the value is 1. Then after submit the form, ClientID is not bind correctly. The value is still 0, why? How to bind ClientID correctly?

Create.cshtml (View)

@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; }
}

Generated 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>

Are you checking the value of `ClientID` or `Client.ClientID`? Why would you not just select the client using a dropdownlist that is bound to ClientID? — , Sep 25 '14 at 03:47
@StephenMuecke I used dropdownlist before changed to this way and it works, but after changed it doesn't work — Willy, Sep 25 '14 at 03:59
Your script sets `$("#ClientID").prop("disabled", true);`. Disabled controls do NOT post back! — , Sep 25 '14 at 04:07
@StephenMuecke Thanks for pointing out, you're right. Case solved. — Willy, Sep 25 '14 at 04:25
This might help answer your question : http://stackoverflow.com/questions/4710447/asp-net-mvc-html-hiddenfor-with-wrong-value/4710911#4710911 — Jason Evans, Sep 25 '14 at 07:36

score 1 · Accepted Answer · edited Sep 25 '14 at 13:32

1

Its because you have

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

somewhere in your code.

If you set input as "disabled" the model will not bind the value.

edited Sep 25 '14 at 13:32

Kris

2,100
5
31
50

answered Sep 25 '14 at 13:13

listeeeek

46
6

Set Value to Html.HiddenField not Bind to Model After Submit The Form

1 Answers1