具有模型列表的模型的MVC客户端验证 [英] MVC client side validation for a Model that has a list of models

问题描述

我有一个具有其他型号列表的型号.然后在我看来，我的表格可以为我的主模型填写几个字段.但是我希望这种形式还能够添加其他类型的X模型并全部连接起来，我想知道如何正确地做到这一点.

I have this model that has a list of another model. Then in my view, I have my form that fills a couple of fields for my main Model. But I want this form to also be able to add X models of the other type and to be all wired up and I'm wondering how to properly do this.

这是我的两个模型:

public class MyMainModel
{

    public int MyMainId { get; set; }

    [Required(ErrorMessage = "Groovy name required")]
    [Display(Name = "MyMainModel's groovy name:")]
    public string Name { get; set; }

    public List<MySubModel> MySubModels { get; set; }

}

public class MySubModel
{

    public int MySubId { get; set; }

    [Required(ErrorMessage = "Cool name required")]
    [Display(Name = "MySubModel's cool name:")]
    public string Name { get; set; }

}

当我点击控制器的创建"视图时，我将执行以下操作:

When I hit my controller for my "create" view, I go through this action:

public ActionResult SomePageAboutCreating()
{
    // [...] Some other stuff
    return View(new MyMainModel());
}

现在，这将发送到我的强类型视图:

Now this sends to my strongly typed view:

@model myFunProject.WebModels.MyMainModel

<div>
    <form id="my-create-form" onsubmit="CreateMyMainModel(this); return false;">
        @Html.AntiForgeryToken()
        @Html.ValidationSummary()

        <div class="result" style="background-color: silver;">This is the operation result box</div>
        <img class="loading" src="/Images/ajax-loader.gif" alt="Loading..." width="16" height="16" style="display: none;" />

        <section>
            @Html.LabelFor(m => m.Name)
            @Html.TextBoxFor(m => m.Name)
            @Html.ValidationMessageFor(m => m.Name)
        </section>

        <!-- Here begins the fields for my list of "MySubModel" -->
        @Html.EditorFor(x => x.MySubModels)

        <!-- Here I'm thinking about a javascript that will add the previous fields X times so that the user can create "MyMainModel" as well as x times "MySubModel"... -->

        <input type="submit" class="btn-send" id="my-create-form-submit" value="Send" />
    </form>
</div>

所以我认为我必须在这里使用EditorTemplates ...因此，我在/Views/EditorTemplates/MySubModels.cshtml中进行了设置(以"MyMainModel"的属性命名)，然后在其中编写表单时，我很困惑...

So I think I have to use the EditorTemplates here... So I setup in my /Views/EditorTemplates/MySubModels.cshtml (Named against my "MyMainModel"'s property) and then when I write my form in there, I'm confused...

@model myFunProject.WebModels.MyMainModel

@*<section>
    @Html.LabelFor(m => m.Name)
    @Html.TextBoxFor(m => m.Name)
    @Html.ValidationMessageFor(m => m.Name)
</section>*@

因此，在这里我不确定要在此处放置什么...我希望我的Name属性成为"MySubModel"之一.当用户看到此表单时，例如，他将经历以下情况:

So here I'm not sure what to put in here... I want my Name property there to be the one of "MySubModel". And as the user sees this form, say for example he'll go through this scenario:

1. 输入"MyMainModel"的名称.
2. 转到另一个名称框，并填写"MySubModel"的第一个实例的名称.
3. 然后，他将单击一个特殊的按钮，该按钮将操纵dom追加另一个MySubModel.Name字段.
4. 他将使用第二个"MySubModel"名称编写.
5. 他会点击提交".

我放入的ajax调用可以进行连接，但是我必须为编辑器模板编写的代码让我感到困惑，然后我还想知道我将如何处理创建一个新字段(例如，第二个"MySubModel" ...).

The ajax call I put in there I'm ok doing the wiring up, but my confusion comes with the code I have to write for the editor template and then I'm kind of also wondering about how I'm going to create a new field (for that second "MySubModel" for example...).

任何帮助将不胜感激，我浏览了许多有关与此主题相关的文章，但尚未发现这种情况.谢谢！

Any help would be appreciated, I've gone through many articles about subjects close to this, but have not found this case yet. Thanks!

我将添加提交表单时由我的ajax调用的操作(一个过于简化的版本).

I'll add the action (an overly simplified version hehe) that is called by my ajax when the form is submitted.

public ActionResult CreateMyMainModel(MyMainModel myMainModel) {

    // [...] Do stuff like save to database...
    // var aGroovyNAme = myMainModel.Name;

    foreach(var mySubModel in myMainModel.MySubModels) {
        // Here I would have the sub models available to manipulate...
        // var aCoolName = mySubModel.Name;
    }
    return Content("ok");

}

推荐答案

我已经浏览了很多有关与此主题相关的文章，但是还没有发现这种情况.

I've gone through many articles about subjects close to this, but have not found this case yet.

我真的建议您阅读 编辑可变长度列表 文章，说明了一种很好的方法来处理这种情况.他提出了一个自定义的 Html.BeginCollectionItem 帮助器，该帮助器可用于为输入字段名称生成非顺序索引(引导)，从而允许轻松地动态删除元素而不会留下漏洞在索引中.当用户决定添加另一个项目时，将对控制器操作进行AJAX调用，该操作仅返回一个空模板(部分).

I would really recommend you reading the editing a variable length list article from Steven Sanderson which illustrates a very nice approach to handle this scenario. He presents a custom Html.BeginCollectionItem helper which could be used to generate non-sequential indexes (guids) for the input field names and thus allowing for easily removing elements dynamically without leaving holes in the indexes. When the user decides to add another item, an AJAX call is made to a controller action which simply returns an empty template (partial).

您也可以仅在客户端使用纯JavaScript来执行此操作.史蒂文·桑德森(Steven Sanderson)在这篇类似的文章 .

You could also do this purely on the client side with javascript only. Steven Sanderson illustrated this approach using knockoutjs in this similar article.

就动态编辑ASP.NET MVC中的可变长度项目列表而言，这两篇文章实际上是最好的方法.阅读它们确实有助于更好地理解ASP.NET MVC中的模型绑定中的一些核心概念.

Those two articles are really the best approach in terms of dynamically editing a variable length list of items in ASP.NET MVC. Reading them will really be helpful for better understanding some core concepts in model binding in ASP.NET MVC.

这篇关于具有模型列表的模型的MVC客户端验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！