2

ユーザー入力の GET/POST に EditorTemplate を使用する 2 つのビュー (作成/編集) があります。EditorTemplate には、いくつかの追加情報を取得するための jQuery ダイアログがあります。

フォームを送信すると、ダイアログ内の要素が投稿されません。その結果、検証もめちゃくちゃになります。検証が開始され、要素の css クラスが変更されますが、編集後に元に戻ることはありません。

ダイアログから要素を引き出すと、値が ViewModel にバインドされ、検証が期待どおりに機能します。

以前、ダイアログの値を (別の名前を使用して) いくつかの非表示フィールドにコピーして、ViewModel にバインドしていました。これは機能しますが、非表示フィールドを検証し、実際の値を持つフィールドは検証しません。

要素を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>
4

1 に答える 1

2

SOに関する別の質問から、この質問に対する答えを見つけました。

他の誰かがこれに遭遇した場合、jQuery-UIダイアログはフォームに追加されず、直前に追加されるため、検証する要素はセクションの外にあります

上記の回答の質問タイトルはそれほど明白ではないため、次のリンクがあります：<form>タグを使用しないjQueryUIダイアログの検証

答えにはサンプルが含まれています。

于 2012-08-22T12:57:05.427 に答える