jquery - jQuery 对话框中的元素未绑定(bind)到 Post 上的 ViewModel

Question

我有两个 View (创建/编辑)，它们使用 EditorTemplate 来获取/POST 用户输入。 EditorTemplate 有一个 jQuery 对话框来捕获一些附加信息。

当我提交表单时，对话框内的元素不会发布。因此，它也搞乱了验证。验证会触发并更改元素的 css 类，但编辑后不会更改回来。

当我将元素从对话框中拉出时，这些值将绑定(bind)到 ViewModel 并且验证按预期进行。

我之前将对话框中的值(使用不同的名称)复制到一些隐藏字段以绑定(bind)到 ViewModel - 这可以工作，但会验证隐藏字段而不是具有实际值的字段。

如何将元素绑定(bind)到 ViewModel 并仍然使用 jQuery 对话框？

代码示例

@* The Create View *@

@using(Html.BeginForm())
        {
            @Html.ValidationSummary(false, "Please fix these errors:");
            @Html.EditorForModel("JobRecord", Model);
            <div id="button">
                <p>
                    @Html.Button("Create", new Dictionary<string, object>() { { "id", "create" }, { "type", "submit" } })
                    @Html.Button("Cancel", new Dictionary<string, object>() { { "id", "cancel" }, { "type", "button" } })
                </p>
            </div>
        }

@* The Edit Template *@


@model GyroviewOpsManager.UI.Models.JobRecordViewModel

@{
    Html.Assets().Styles.Add("/Content/jobrecord.css");
    Html.Assets().Styles.Add("/Content/themes/base/jquery.ui.all.css");
    Html.Assets().Scripts.Add("/Scripts/jobrecord.js");
    Html.Assets().Scripts.Add("/Scripts/jquery-ui-1.8.22.min.js");
}

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>


    <table id="jobinfo-table">
        <tr>
            <td>
                <a id="opener" href="#">Job Number...</a>
            </td>
            <td>
                @Html.TextBoxFor(model => model.JobNo)
            </td>
            ...
        </tr>
    </table>


@* The div for the jQuery dialog *@ 
<div id="dialog" title="Job Number Editor">
     <p>* All fields are required</p>
<table id="jobnumedit-table">
    <tr>
        <td>Job Number:</td>
        <td>@Html.TextBoxFor(model => model.JobNo, new { id = "jobNo", @readonly = "readonly" })</td>
    </tr>
    <tr>
        <td>Location:</td>
        <td>@Html.DropDownListFor(model => model.Location, new SelectList(Model.Locations, "LocnID", "Name", ViewBag.UserLocation), "-- Select --", new{id="Location"})</td>
    </tr>
    <tr>
        @{
            var jobNoDate = Model.JobNoDate;
            if (Model.JobNoDate == null)
            {
                jobNoDate = DateTime.Today;
            }
        }
        <td>Date:</td>
        <td>@Html.TextBoxFor(model => model.JobNoDate, new{id="JobNoDate"})</td>    
    </tr>
    ...
</table>
</div>

<script type="text/javascript">
// Dialog script
$("#dialog").dialog({
    autoOpen: false,
    height: 450,
    width: 450,
    modal: true,
    buttons: {
        "Ok": function () {
            ...
            $(this).dialog("close");
        },
        "Cancel": function () {
            $(this).dialog("close");
        }
    }
});

$("#opener").click(function () {
    ...
    return false;
});
</script>

Answer 1

我从 SO 的另一个问题中找到了这个问题的答案。

In case someone else comes across this, the jQuery-UI dialog does not append to the form, it appends just before , so the elements to validate are outside the section

上面答案的问题标题不太明显，所以这里是链接:jQuery UI Dialog validation without using <form> tags

答案包含一个示例。