MVC 对话框验证

本文关键字：验证 对话框 MVC | 更新日期: 2023-09-27 18:36:39

嗨，如果以这种方式选择，我正在尝试验证一个下拉列表： 

$('#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);
        }

问题是，当用户没有选择任何内容并且验证有效时，对话框消失并且它的 instaed 只是带有验证消息的纯 html 页面，我如何预览它并保持弹出窗口？

MVC 对话框验证

如果要

使模式对话框保持打开状态，则需要使用 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，因此浏览器不会导航到"索引"，因此请将对话框内容替换为成功视图。成功视图需要一个验证按钮，以便用户可以关闭对话框或导航到新页面。

相关文章：