模态和表单验证答案

【问题标题】：Modals and form validation模态和表单验证
【发布时间】：2016-12-16 00:28:49
【问题描述】：

我有一个页面，其中有大约 4 种不同的表单嵌套在它们自己的模式弹出窗口中。

在此之前，我每张表格只做过一页。

当我提交给控制器并且我的 modelState 无效时会发生什么，它会返回到我的局部视图。

如何让@validationFor 消息显示在我的模式中，就像在我的单个表单页面上一样？页面基本上不会改变，但如果改变了，它会返回模态仍然处于打开状态的页面。

这是否需要我使用某种 Ajax 调用来代替？这里有什么例子吗？我很确定这可能是一个重复的线程，但是我找不到自己的任何资源。

【问题讨论】：

标签： asp.net asp.net-mvc

【解决方案1】：

是的，这需要一些 javascript 来完成这项工作。

创建局部视图来保存表单。

@using (Html.BeginForm("CreateHighSchoolType", "HighSchool", FormMethod.Post, new { id = "CreateHighSchoolTypeForm" }))
{
    @Html.ValidationSummary(true)
    <fieldset>
        <legend></legend>
        <div class="editor-label">
            @Html.LabelFor(model => model.Name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        </div>
        <p>
            <input type="submit" value="Create" id="CreateHighSchoolTypeButton" />
        </p>
    </fieldset>
}

创建一个控制器方法来处理局部视图

public ActionResult CreateHighSchoolTypePartial()
{
    return PartialView();
}

[HttpPost]
public ActionResult CreateHighSchoolTypePartial(LookupEditModel viewModel)
{
    if (!ModelState.IsValid)
    {
        return PartialView(viewModel);
    }

    var hsType = (from t in _highSchoolTypeRepository.FindAll()
                  where t.Name == viewModel.Name
                  select t).FirstOrDefault();

    if (hsType != null)
    {
        ModelState.AddModelError("Name", String.Format("This high school type already exists.", viewModel.Name));
        return PartialView(viewModel);
    }

    _highSchoolTypeRepository.Save(new HighSchoolType
    {
        Name = viewModel.Name
    });

    return PartialView();
}

用一些 jquery 连接所有东西

对话框打开

    $("#AddHighSchoolTypeDialog").dialog({
        position: 'center',
        autoOpen: false,
        modal: true,
        resizable: false,
        draggable: false,
        title: "Add a new high school type",
        open: function (event, ui) {
            //Load the CreateAlbumPartial action which will return 
            // the partial view _CreateAlbumPartial
            $(this).load("/HighSchoolType/CreateHighSchoolTypePartial", function () {
                $("form#CreateHighSchoolTypeForm input:first").focus(); 
            });
        },
        focus: function (event, ui) {

        },
        close: function (event, ui) {
            $.ajax({
                url: "/HighSchoolType/GetAllHighSchoolTypes",
                type: "GET",
                success: function (data) {
                    $("#HighSchoolTypeId option").remove();
                    $.each(data, function (key, value) {
                        $('#HighSchoolTypeId')
                                    .append($("<option></option>")
                                    .attr("value", key)
                                    .text(value));
                    });
                }
            });
            //$("#AddHighSchoolTypeDialog").remove();
        },
        width: 600
    });

和帖子

    $("#CreateHighSchoolTypeButton").live('click', function () {
        $.ajax({
            url: "/HighSchoolType/CreateHighSchoolTypePartial",
            type: "POST",
            data: $("#CreateHighSchoolTypeForm").serialize(),
            error: function (data) {
                var errorMessage = $.parseJSON(data.responseText);
            },
            success: function (data) {
                if (data) {
                    $('#AddHighSchoolTypeDialog').html(data);
                }
                else {
                    $('#AddHighSchoolTypeDialog').html('no data');
                }
            }
        });

        return false;
    });

请注意，如果成功，您需要将模态的 html 替换为 post 调用返回的内容。

【讨论】：

【解决方案2】：

据我了解，您正在做的是尝试在一个页面中包含多个表单。你可以试试这样的 -

     @using (Html.BeginForm("Login", "Member", FormMethod.Post, new {})) {

        @Html.LabelFor(m => m.LoginUsername)
        @Html.TextBoxFor(m => m.LoginUsername)

        @Html.LabelFor(m => m.LoginPassword)
        @Html.TextBoxFor(m => m.LoginPassword)

        <input type='Submit' value='Login' />

    }

    @using (Html.BeginForm("Register", "Member", FormMethod.Post, new {})) {

        @Html.LabelFor(m => m.RegisterFirstName)
        @Html.TextBoxFor(m => m.RegisterFirstName)

        @Html.LabelFor(m => m.RegisterLastName)
        @Html.TextBoxFor(m => m.RegisterLastName)

        @Html.LabelFor(m => m.RegisterUsername)
        @Html.TextBoxFor(m => m.RegisterUsername)

        @Html.LabelFor(m => m.RegisterPassword)
        @Html.TextBoxFor(m => m.RegisterPassword)

        <input type='Submit' value='Register' />
}

在单个页面内。

您可以在此链接上查看答案 - asp.net MVC 4 multiple post via different forms

【讨论】：

【解决方案3】：

不显眼的验证仅适用于页面加载时存在的表单。如果您在模态中动态加载页面，则需要在加载后对其进行注册

$.validator.unobtrusive.parse("#formid")

或者您可以在加载时隐藏视图并在需要时显示

【讨论】：