MVC 多种形式和不显眼的验证答案

【问题标题】：MVC Multiple Forms and Unobtrusive ValidationMVC 多种形式和不显眼的验证
【发布时间】：2015-04-21 12:50:06
【问题描述】：

我认为这是不可能的，因为我无法让它工作，尽管我几乎阅读了我能找到的所有资源。我有一个表单，实际上是一个局部视图，其中包含三个单独的表单：

 <div  id="divTypePage" style="display:none" class="admin">
@using (Html.BeginForm("Type", "Inventory", FormMethod.Post, new { id = "typeForm" }))
{
    <h4>Item Type Maintenance</h4>
    <table class="table_body">
        <tr>
            <td>
                <b style="color:red">*</b>Find Item Type or Enter New Code:
            </td>
            <td>
                <input id="types" style="text-transform:uppercase" class="typeModel" />
                    @Html.HiddenFor(x=>x.ItemTypeModel.ItemTypeCode, new {@id = "txtTypeCode"})
            </td>
        </tr>
        <tr>
            <td>
                <b style="color:red">*</b>@Html.DisplayNameFor(x=>x.ItemTypeModel.ItemTypeDescription)
            </td>
            <td>
                @Html.TextBoxFor(x => x.ItemTypeModel.ItemTypeDescription, new { @id = "txtDesc", style="text-transform:uppercase", @class="typeModel" })
                @Html.ValidationMessageFor(x=>x.ItemTypeModel.ItemTypeDescription)
            </td>
        </tr>
        <tr>
            <td>
                @Html.DisplayNameFor(x=>x.ItemTypeModel.ItemTypePriority)
            </td>
            <td>
                @Html.TextBoxFor(x => x.ItemTypeModel.ItemTypePriority, new { @id = "txtPrior", @maxLength = "1", style = "width: 50px", @class="typeModel" })
                @Html.ValidationMessageFor(x=>x.ItemTypeModel.ItemTypePriority)
            </td>
        </tr>
    </table>
}
  </div>
      <div id="divRolePage" style="display:none" class="admin">
@using (Html.BeginForm("Role", "Inventory", FormMethod.Post, new { @id = "roleForm" }))
{
    <h4>Role Maintenance</h4>
    <table class="table_body">
        <tr>
            <td>
                <b style="color:red">*</b>Find Role or Enter New:
            </td>
            <td>
                <input id="roles" class="roleModel" style="text-transform:uppercase" />
                @Html.HiddenFor(x=>x.RoleModel.Role, new { @id = "txtRole"})
            </td>
        </tr>
        <tr>
            <td>
                <b style="color:red">*</b>@Html.DisplayNameFor(x=>x.RoleModel.Description)
            </td>
            <td>
                @Html.TextBoxFor(x=>x.RoleModel.Description, new { @id = "txtRoleDesc", style = "text-transform:uppercase", @class = "roleModel"})
            </td>
        </tr>
        <tr>
            <td>
                @Html.DisplayNameFor(x=>x.RoleModel.Admin)
            </td>
            <td>
                @Html.CheckBoxFor(x=>x.RoleModel.Admin, new { @id = "chkAdmin"})
            </td>
        </tr>
        <tr>
            <td>
                @Html.DisplayNameFor(x=>x.RoleModel.Trans)
            </td>
            <td>
                @Html.CheckBoxFor(x=>x.RoleModel.Trans, new { @id = "chkTrans"})
            </td>
        </tr>
        <tr>
            <td>
                @Html.DisplayNameFor(x=>x.RoleModel.Reports)
            </td>
            <td>
                @Html.CheckBoxFor(x=>x.RoleModel.Reports, new { @id = "chkReports"})
            </td>
        </tr>
    </table>
    }
   </div>

我通过一个对话框打开每一个，我不会显示。但它是这样的：

 function OpenAdminPage(page) {
    var type = page;
    switch (page) {
        case "type":
            $("#divTypePage").dialog("open");
            ParseForm("#typeForm");
            break;
        case "user":
            ClearValues();
            $("#divUserPage").dialog("open");
            ParseForm("#userForm");
            break;
        case "role":
            ClearValues();
            $("#divRolePage").dialog("open");
            ParseForm("#roleForm");
            break;
    }
    return false;
}

功能是这样的：

 function ParseForm(selector) {
var form = $(selector)
    .removeData("Validator")
    .removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse(form);
}

但是，只有一个表单会显示错误，其他两个给我这个：

0x800a03f6 - JavaScript runtime error: Invalid character

这在 jquery-1.11.2 中的 jQuery.parseJSON 函数中。我只是做错了还是不可能这样做？

【问题讨论】：

你能把表格再分解一下，看看它是否还会发生吗？您是否尝试将它们从部分视图中移出以进行故障排除？把它们放在自己的局部视图中？
如果您使用body 作为选择器会怎样（仅用于调试目的）。那么它会找到并绑定到其他形式吗？ unobtrusive.parse() 将查找具有data-val=true 属性的表单元素，这些是否存在于所有元素上？
你能按类解析吗？如果我为每组输入设置一个类，这会起作用吗？
@Mackan - 实际上，当我在页面上查看源代码时，我看不到 DIV 中的任何元素，即三种形式，尽管如此，属性。这些 DIV 是 display:none。
如果您一次打开一个对话框（或全部打开），您可以在开发控制台/检查器中查看它们。

标签： javascript jquery asp.net-mvc-4 unobtrusive-validation

【解决方案1】：

在您为 roleForm 发布的示例中，我看不到任何可见的 MVC 验证代码。有点薄的假设，但我基于以下几点：

当输入字段附加了任何客户端验证规则时，它将接收 data-val="true" 属性以触发不显眼的客户端验证。

数据注释和验证消息将创建“缺失”属性（好吧，假设此时缺失）。我相信你知道这些是如何工作的，因为你有一个表单验证工作，但供参考：

在模型中：

public class MyModel {
    [Required(ErrorMessage = "What is my name?")]
    public string MyName { get; set; }
}

在视图中：

@Html.TextBoxFor(x => x.MyName)
@Html.ValidationMessageFor(x => x.MyName)

为什么这会引发 javascript 错误有点不清楚。但我希望以上内容能够解决它。

编辑 - A good reference (mainly for MVC3, but it applies)

【讨论】：

是的，那是在我放入所需的 atts 之前。无论如何，它仍然不起作用，我得到了同样的 JS 错误。它快把我逼疯了！所以我删除了 JS 检查 - if (!$("#roleForm").valid()) - 并且刚刚捕获了控制器中的错误。痛苦，但必须完成。

【解决方案2】：

使用 JSON.parse(data) 。它以正确的方式序列化。和一个进一步的澄清。如果您在 iis 中托管您的应用程序。请执行以下操作：

打开 IIS 并查看您的 MIME 类型。检查您是否有一个名为 .json 的文件。如果没有，只需添加一个名为 .json 的文件并将其设置为 application/json。

【讨论】：