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。而不是$("#LogOnForm").submit()，您需要将此转换为AJAX POST提交，并使用其回调将部分视图结果替换为对话框的表单。

以下是该做什么的概述：

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

<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，因此不会发生浏览器导航到“索引”，因此请使用成功视图替换对话框内容。成功视图需要一个验证按钮，以便用户可以关闭对话框或导航到新页面..

MVC对话框验证

1 个答案: