Question

我已经设置了一个小测试项目，希望能解释我的问题。我有一个父类，它的属性包含Child类型的所有子元素。在MVC视图中，我列出了表中的所有子项，并让表单回发我的子项并将它们自动映射到父属性，我将它们呈现为：

@Html.TextBox(string.Format("Children[{0}].ChildName", childIndex), child.ChildName)

在控制器中，我标记了属性ChildName是必需的。我遇到的问题是jquery unobtrusive validation不会发出任何数据验证属性。一切都在服务器上验证不错，但在客户端上验证不好（显然因为没有jquery验证的属性可以在这些输入上找到）。

请查看代码：

查看

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div>
        <form action="@Url.Action("Save")" method="post">
            @Html.TextBox("Name", (string)Model.Name)

            <table>
                <tr><td>Child name</td></tr>
                @{var childIndex = 0;}
                @foreach (var child in (List<GridValidationTest.Controllers.Child>)Model.Children)
                {
                    <tr><td>@Html.TextBox(string.Format("Children[{0}].ChildName", childIndex), child.ChildName)</td></tr>
                    childIndex++;
                }
            </table>

            <br /><button>Submit</button>
        </form>
    </div>
</body>
</html>

CONTROLLER

namespace GridValidationTest.Controllers
{
    public class Parent
    {
        [Required]
        public string Name { get; set; }
        public IList<Child> Children { get; set; }
    }

    public class Child
    {
        [Required]
        public string ChildName { get; set; }
    }

    public class MyController : Controller
    {
        //
        // GET: /My/

        public ActionResult Index()
        {
            var parent = new Parent { Name = "Parent name" };
            parent.Children = new List<Child>
            {
                new Child {ChildName = "First child"},
                new Child {ChildName = "Second child"}
            };
            return View("Index", parent);
        }

        public ActionResult Save(Parent parent)
        {
            return View("Index", parent);
        }

    }
}

属性上的客户端验证父类的名称可以正常工作。我应该如何让孩子们像我期望的那样让客户端验证工作？

Answer 1

您需要将视图中的字段绑定到模型。而不是使用：

@Html.TextBox(string.Format("Children[{0}].ChildName", childIndex), child.ChildName)

使用

@Html.TextBoxFor(model => model.Children[childIndex])
@Html.ValidationMessageFor(model => model.Children[childIndex])

还要确保在页面上包含正确的jquery javascript文件。类似的东西：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

还要确保在您的Web配置中启用了ClientValidationEnabled和UnobtrusiveJavaScriptEnabled，如下所示：

<appSettings>
    ....
    <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
    ....
</appSettings>

当有子网格时，jquery unobtrusive不会在客户端发出验证属性

1 个答案: