Question

我有一个ASP.NET MVC4应用程序，我允许用户使用javascript模板在客户端上添加1到多个记录。它运行正常并使用正确的命名约定，模型绑定正确地将post数据转换为action方法的所需对象集合。

我的问题是，有没有办法对使用这种方法添加的记录使用内置的MVC验证。我已将数据注释属性添加到我的模型中，但由于我在客户端上为每条新记录生成html，因此我无法使用通常使该过程有效的html帮助程序。

显然，我可以自己添加客户端验证并让数据注释在服务器上验证，但我想知道是否有一种方法可以利用内置验证堆栈来实现这种类型的方法，所以我可以在服务器上维护我的所有验证逻辑。

Answer 1

例如： View有两种形式：form1和form2。

form1有两个部分。

第一部分：有两个文本框，一个创建按钮和一个保存按钮。

第二部分：有一个。

所以，当我们填写两个文本框并按下“创建”按钮时，如果没有通过验证，则显示错误消息。如果通过验证，则将值插入到form2中并将值插入。

[HttpPost] Action Create有一个参数List models。

当我们按下Save按钮时，会将form2的值带到控制器映射到List模型。

模型

public class HomeModel
{
    [Required]
    public string Name { get; set; }

    [Required]
    public string Number { get; set; }
}

控制器：

    [HttpPost]
    public ActionResult Create(List<HomeModel> models)
    {
        // TODO: Add insert logic here
    }

查看：

@model MvcApplication1.Models.HomeModel
@{
   ViewBag.Title = "Create";
 }

<h2>Create</h2>

@using (Html.BeginForm("Create", "Home", FormMethod.Post, new { id = "form1" }))
{
@Html.ValidationSummary(true)

<fieldset>
    <legend>HomeModel</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>

    <div class="editor-label">
        @Html.LabelFor(model => model.Number)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Number)
        @Html.ValidationMessageFor(model => model.Number)
    </div>

    <p>
        <input type="submit" value="Create" id="btnCreate" />
        <input type="button" value="Save" id="btnSave" />
    </p>
</fieldset>
<table id="tb"></table>
}

<div id="FormInfo" style="display: none;">
    <form action="/Home/Create" id="form2" method="post"></form>
</div>

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    <script type="text/javascript">
        $(function () {
            $("#form1").submit(function () {
                var ErrorLength = $(".field-validation-error").length;
                if (ErrorLength <= 0) {
                    var nameValue = $("#Name").val();
                    var numberValue = $("#Number").val();
                    InsertToForm2(nameValue, numberValue);
                    InsertToTable(nameValue, numberValue);
                }
                return false;
            });

            $("#btnSave").click(function () {
                $("#form2").submit();
            });
        });

        function InsertToForm2(nameValue, numberValue) {
            var inputCount = $("#form2 input").length / 2;
            var combineHTML = "<input type='text' name='models[" + inputCount + "].Name' value='" + nameValue + "' /> ";
            combineHTML += "<input type='text' name='models[" + inputCount + "].Number' value='" + numberValue + "'/> ";
            $("#form2").append(combineHTML);
        }

        function InsertToTable(nameValue, numberValue) {
            var combineHTML = "<tr><td>" + nameValue + "</td><td>" + numberValue + "</td></tr>";
            $("#tb").append(combineHTML);
        }
    </script>
}

Example Download

对在客户端上创建的记录使用内置验证

1 个答案: