2

いくつかのフィールドを含む MVC 4 のフォームがあり、コンボの値に応じて、モーダル ダイアログ フォームを開いて、作成中の同じエンティティに影響を与える 3 つの追加フィールドにロードする必要があります。メインフォームで編集。このモーダル ダイアログでは、jQuery UI のものを使用しています。

ここで、モーダル ダイアログ内のフィールドを検証 (必須) して、後でメイン フォームから送信される入力値をユーザーが保持できるようにする必要があります。

私の問題は、モーダルフォーム内からこれらの3つのフィールドの検証を実行する方法です(ダイアログが閉じられるまでメインフォームを送信できないため)。

ヒントやアイデアはありますか？

よろしく、シーザー。

4

1 に答える 1

6

AJAX を使用してフォーム モーダルをサーバーに送信できます。もちろん、モーダル フォームには別のビュー モデルが関連付けられています。例を挙げましょう:

メイン ビュー モデル:

public class MyViewModel
{
    [DisplayName("select a value")]
    public string SelectedValue { get; set; }
    public IEnumerable<SelectListItem> Values { get; set; }
    public string SomeOtherProperty { get; set; }
}

モーダル ダイアログ ビュー モデル:

public class DialogViewModel
{
    [Required]
    public string Prop1 { get; set; }
    [Required]
    public string Prop2 { get; set; }
    [Required]
    public string Prop3 { get; set; }
}

次に、4 つのアクションを含むコントローラーを作成できます。

public class HomeController : Controller
{
    // Renders the main form
    public ActionResult Index()
    {
        var model = new MyViewModel
        {
            Values = new[]
            {
                new SelectListItem { Value = "1", Text = "item 1" },
                new SelectListItem { Value = "2", Text = "item 2" },
                new SelectListItem { Value = "3", Text = "item 3" },
            }
        };
        return View(model);
    }

    // Processes the submission of the main form
    [HttpPost]
    public ActionResult Index(MyViewModel model)
    {
        return Content(
            string.Format(
                "Thanks for filling out the form. You selected value: \"{0}\" and other property: \"{1}\"",
                model.SelectedValue,
                model.SomeOtherProperty
            )
        );
    }

    // Renders the partial view which will be shown in a modal
    public ActionResult Modal(string selectedValue)
    {
        var model = new DialogViewModel
        {
            Prop1 = selectedValue
        };
        return PartialView(model);
    }

    // Processes the submission of the modal
    [HttpPost]
    public ActionResult Modal(DialogViewModel model)
    {
        if (ModelState.IsValid)
        {
            // validation of the modal view model succeeded =>
            // we return a JSON result containing some precalculated value
            return Json(new
            {
                value = string.Format("{0} - {1} - {2}", model.Prop1, model.Prop2, model.Prop3)
            });
        }

        // Validation failed => we need to redisplay the modal form
        // and give the user the possibility to fix his errors
        return PartialView(model);
    }
}

~/Views/Home/Index.cshtml次に、メイン ビュー ( )を表示できます。

@model MyViewModel

@using (Html.BeginForm())
{
    <div>
        @Html.LabelFor(x => x.SelectedValue)
        @Html.DropDownListFor(x => x.SelectedValue, Model.Values, new { id = "ddl" })
    </div>
    <div>
        @Html.LabelFor(x => x.SomeOtherProperty)
        @Html.TextBoxFor(x => x.SomeOtherProperty, new { id = "otherProperty" })
        @Html.ActionLink(
            "click here to open a modal and help you fill the value",
            "Modal",
            "Home",
            null,
            new { id = "showModal" }
        )
    </div>
    <button type="submit">OK</button>
}

<div id="modal"></div>

およびモーダル フォームを含む部分ビュー ( ~/Views/Home/Modal.cshtml):

@model DialogViewModel

@using (Ajax.BeginForm(new AjaxOptions { OnSuccess = "handleModalSubmit" }))
{
    <div>
        @Html.LabelFor(x => x.Prop1)
        @Html.EditorFor(x => x.Prop1)
        @Html.ValidationMessageFor(x => x.Prop1)
    </div>
    <div>
        @Html.LabelFor(x => x.Prop2)
        @Html.EditorFor(x => x.Prop2)
        @Html.ValidationMessageFor(x => x.Prop2)
    </div>
    <div>
        @Html.LabelFor(x => x.Prop3)
        @Html.EditorFor(x => x.Prop3)
        @Html.ValidationMessageFor(x => x.Prop3)
    </div>
    <button type="submit">OK</button>
}

OK、あとは JavaScript を書いてすべてを有効にするだけです。最初に、必要なスクリプトがすべて含まれていることを確認することから始めます。

<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

そして、私たち自身を書いてください：

$(function () {
    $('#showModal').click(function () {
        $.ajax({
            url: this.href,
            type: 'GET',
            cache: false,
            data: { selectedValue: $('#ddl').val() },
            success: function (result) {
                $('#modal').html(result).dialog('open');
            }
        });
        return false;
    });

    $('#modal').dialog({
        autoOpen: false,
        modal: true
    });
});

function handleModalSubmit(result) {
    if (result.value) {
        // JSON returned => validation succeeded => 
        // close the modal and update some property on the main form
        $('#modal').dialog('close');
        $('#otherProperty').val(result.value);
    } else {
        // validation failed => refresh the modal to display the errors
        $('#modal').html(result);
    }
}
于 2012-12-14T07:11:49.397 に答える