MVC 对话框验证

Question

您好，如果以这种方式选择，我正在尝试验证一个下拉菜单：

$('#dialog').dialog({
            autoOpen: false,
            width: 400,
            resizable: false,
            title: 'Add building',
            modal: true,
            open: function(event, ui) {

                $(this).load("@Url.Action("AddView",new {@ViewBag.from})");
            },
            buttons: {
                "Add": function () {
                    $("#LogOnForm").submit();
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });

查看

@model View.ViewModel.AddBuildingViewModel


@{Html.EnableClientValidation();}

@using (Html.BeginForm("AddBuilding", "HolidaysEvents", FormMethod.Post, new { id = "LogOnForm" }))
{
    @Html.HiddenFor(x => x.ReqestFrom, new { @Value = @ViewBag.from })
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Building</legend>

        <table>
            <tr>
                <td>
                    <div class="editor-label">
                        @Html.LabelFor(model => model.Building.Name)
                    </div>

                </td>
                <td>
                    <div class="editor-field">
                        @Html.TextBoxFor(model => model.Building.Name)
                        @Html.ValidationMessageFor(model => model.Building.Name)
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    Country
                </td>

                <td>
                    <div class="editor-label">
                        @Html.DropDownListFor(model => model.Building.CountryId, new SelectList(Model.Countries, "Id", "Name"), "Choose Country... ", new { style = "height:35px"})
                        @Html.ValidationMessageFor(model => model.Building.CountryId)
                    </div>
                </td>

            </tr>

        </table>

        <p>
            <input type="submit" value="Log On" style="display:none;" />
        </p>
    </fieldset>
}

型号

public class BuildingViewModel
    {
        public int Id { get; set; }
        public string Name { get; set; }

        [Required(ErrorMessage = "Required.")]
        public int CountryId { get; set; }
    }

代码

[HttpPost]
        public ActionResult AddBuilding(AddBuildingViewModel buildingModel)
        {
            if (!ModelState.IsValid)
            {
                var modelError = new AddBuildingViewModel();
                modelError.Countries = countryRepository.GetCountries().Select(x => new CountryViewModel { Id = x.Id, Name = x.Name }).ToList();
                return PartialView("AddView", modelError);
            }


            var model = new HolidaysEventsViewModel();
            buildingRepository.AddBuilding(buildingModel.Building.Name, buildingModel.Building.CountryId, WebSecurity.CurrentUserId);


            model.Buildings = buildingRepository.GetBuildings(WebSecurity.CurrentUserId).Select(x => new BuildingViewModel { Id = x.Id, Name = x.Name }).ToList();
            model.Countries = countryRepository.GetCountries().Select(x => new CountryViewModel {Id = x.Id, Name = x.Name}).ToList();
            ViewBag.from = buildingModel.ReqestFrom;
            return View("Index", model);
        }

问题是当用户没有选择任何东西并且验证工作时对话框消失并且它只是带有验证消息的纯 html 页面，我怎样才能预防它并保持弹出窗口？

Answer 1

如果您想保持模式对话框打开，您需要使用 AJAX。您需要将其转换为 AJAX POST 提交，而不是 $("#LogOnForm").submit()，并使用其回调将对话框的表单替换为您的部分视图结果。

以下是该做什么的概要：

首先，您需要修改对话框以接受部分。

<div id="dialog">
    <div id="content">
       <!-- partial view inserted here -->
    </div>
</div>

现在将局部视图表单插入对话框中。

open: function(event, ui) {
    $("#content").load("@Url.Action("AddView",new {@ViewBag.from})");
}

AJAX 发布，因此您不会离开此页面。

"Add": function() {
    $.ajax({
        url: "/HolidayEvents/AddBuilding",
        type: "POST",
        data: $("#LogOnForm").serialize()
    })
    .done(function(partialResult) {
        // validation error OR success
        $("#content").html(partialResult);
    });
}

您可能还需要防止表单提交的默认行为，因为您通过 AJAX 处理提交。

$("#LogOnForm").on("submit", function(e) {
    e.preventDefault();
});

您的操作将部分视图返回到回调中的partialResult。

[HttpPost]
public ActionResult AddBuilding(AddBuildingViewModel buildingModel)
{
    if (!ModelState.IsValid)
    {
        ...
        return PartialView("AddView", modelError);
    }

    ...
    return PartialView("SuccessView", model);
}

由于我们使用了 AJAX，浏览器导航到“索引”将不会发生，因此将对话框内容替换为成功视图。成功视图需要一个验证按钮，以便用户可以关闭对话框或导航到新页面。