Question

public PersonViewModel()
    {
        Children = new List<ChildViewModel>();
    }

    [Required(ErrorMessage = "Required!")]
    public string FName { get; set; }

    [Required(ErrorMessage = "Required!")]
    public string LName { get; set; }

    public List<ChildViewModel> Children{ get; set; }
 }

    public class ChildViewModel
 {
    [Required(ErrorMessage = "Required!")]
    public string FName { get; set; }

    [Required(ErrorMessage = "Required!")]
    public int Age { get; set; }
 }

我的控制器

    public ActionResult Index()
    {
        return View();
    }
    [HttpPost]
    public ActionResult Index(PersonViewModel person)
    {
        if (!ModelState.IsValid)
        {
            return View(person);
        }
        return View();
    }
    public ActionResult AddChildBox(PersonViewModel person,int id)
    {
        ViewBag.Counter = id;
        return PartialView("View");
    }
 }

我通过ajax调用部分视图来为子项创建字段

    <script type="text/javascript">
    var num = 0;
    $("#AddChildBtn").click(function () {

        $.ajax({
            type: 'GET',
            url: '@Url.Content("~/Home/AddChildBox/")',
            data: {
                Id: num

            },
            dataType: 'html',
            success: function (result) {
                $('#Fields').append(result);
                num = num + 1;
            }
        });
    });
 </script>

在视图中显示具有此代码的孩子

 @if (Model != null )
 {
    for (int i = 0; Model.Child.Count>i;i++ )
    {
        @Html.Action("AddChildBox", "Home", new { id = i })
    }
 }

和我的部分观点

@model WebApplication4.Models.PersonViewModel

@{
    int i = ViewBag.Counter;
}
<div class="form-group">
    @Html.LabelFor(model => model.Child[i].FName, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.Child[i].FName, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.Child[i].FName, "", new { @class = "text-danger" })
    </div>
</div>
<div class="form-group">
    @Html.LabelFor(model => model.Child[i].Age, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.Child[i].Age, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.Child[i].Age, "", new { @class = "text-danger" })
    </div>
</div>

这样可行，但是当从AddChildBox操作方法参数中删除人员时，部分视图字段的验证消息不起作用。我不会在我的行动中使用它，那么为什么我需要它呢？我很困惑，谁可以向我解释这段代码中发生了什么？

Answer 1

您的实施存在许多问题。您无法获得动态添加内容验证的原因是在首次呈现视图时解析验证器并且不知道新内容。使用

添加新内容后，需要重新解析验证程序

$('form').data('validator', null);
$.validator.unobtrusive.parse($('form'));

您的部分视图不会提供真正的双向模型绑定，我建议您使用BeginCollectionItem帮助器为每个项目（refer this article for an example）渲染部分视图。帮助器用Guid替换从零开始的索引器，并为匹配的Index值提供额外的隐藏输入，允许非连续索引集合成功绑定（即允许您动态删除视图）。

this answer中显示了纯客户端替代方案。

使用ajax调用部分View时的验证？

1 个答案: