如何看待模型绑定工作？ +递过动态控件与视图模型的最好方法？ [英] How does View Model Binding work? + Best way of handing dynamic controls with view models?

问题描述

我使用asp.net MVC 3和思维来处理这种情况的最好办法是什么。

I am using asp.net mvc 3 and thinking what the best way to handle this scenario is.

说我有一个创建的奖励结构形式。在这种情况下，它们可以奖励多层次

Say I have a form that creates a reward structure. In this case their can be many levels of rewards

例如

$100 to $500 - get .05% back
$501 to $1000 - get 0.6% back
$1001 to $1001 - get 0.7% back
and so forth.

现在这些层在我创建的形式输入。有可能是一个收获层或有可能是5层或50层。我只是不知道。

Now these tiers are entered in the form I am creating. There could be one reward tier or there could be 5 tiers or 50 tiers. I just don't know.

选项1

请人为的限制，比如5层。如果他们只需要一层以及他们还是要通过向导的形式（通过jQuery的）我创建并跳到下一个4级屏幕（会有相当多的领域，他们将不得不填写，所以我决定把它向导所以它不是压倒​​一切的一次）。

Make an artificial limitation of say 5 tiers. If they only need one tier well they still have to go through the wizard form(through jquery) I am creating and skip the next 4 tier screens (there will be quite a few fields they will have to fill out so I decided to make it a wizard so it is not so overwhelming at once).

    public class MasterVm
    {
        public IList<TiersVm> Tiers { get; set; }

        public MasterVm()
        {
            Tiers = new List<TiersVm>();
        }
    }

@for (int i = 0; i < Model.Tiers.Count; i++)
{
    @Html.LabelFor(x => x.Tiers[i].StartOfRange, "Start Of Range")
    @Html.TextBoxFor(x => x.Tiers[i].StartOfRange)

    @Html.LabelFor(x => x.Tiers[i].EndOfRange, "End Of Range")
    @Html.TextBoxFor(x => x.Tiers[i].EndOfRange)

    // more fields here

}

在我的控制器中我会做5占位符，所以循环会去约5倍。

In my controller I would make 5 placeholders so the for loop would go 5 times around.

选项2

请形式有产生另一层按钮。他们点击它，另一层将作出。这样，如果他们只有一个他们只看到过一次，如果他们有100没关系。

Make the form have a generate another tier button. They click on it and another tier would be made. This way if they only have one they only see it once and if they have 100 it does not matter.

我想使用jQuery克隆来实现这个，但我真的不知道该视图模型是如何结合的作品。是否看的id？或名称？

I was thinking of using jquery clone to achieve this but I don't know really how the view model binding works. Does it look at id's? or the name?

当我选择我的一个所有控件看起来像这样

When I do option one all my controls look like this

<input id="Tiers_0__StartOfRange" type="text" value="0" name="Tiers[0].StartOfRange">

它们都具有唯一的ID（什么是好的）和唯一的名称。我不能确定，如果在克隆code我应该删除ID和姓名。或者，我需要有code在那里生成的ID和名称，看起来像上面？

They all have unique id's(what is good) and unique names. I am unsure if in the clone code I should remove the id's and the names. Or do I need to have code in there to generate id's and names that look like above?

我将使用jquery.serializeArray（被提交这一切阿贾克斯），并在控制器中我会与视图模型的参数是应该绑定了。

I will be submitting this all by ajax by using jquery.serializeArray() and in the controller I will have a parameter with the View Model is should bind too.

推荐答案

我不喜欢开箱收集索引模式MVC3的使用。在我们的应用中，我们使用史蒂夫·桑德森的BeginCollectionItem HTML帮助。它覆盖缺省行为，并使用GUID的整数，而不是指数的多个项目。

I don't like the out of the box collection indexing pattern MVC3 uses. In our application, we use Steve Sanderson's BeginCollectionItem HTML helper. It overrides the default behavior and uses GUID's instead of integers to index the multiple items.

我会建议你做选项＃2，但不要在服务器上克隆/集合项工厂的东西，只返回HTML使用Ajax的看法。史蒂夫的助手用于默认的模型绑定，因此，当您发布的形式，你最终会从表单输入约束层模型的集合。

I would suggest you do option #2, but do the cloning / collection item factory stuff on the server, and just return the HTML to the view using ajax. Steve's helper works with the default model binder, so when you post your form, you will end up with a collection of tier models bound from the form inputs.

对于单层样品局部视图：

Sample partial view for a single tier:

@model TiersVm
<div class="tier-item">
@using(Html.BeginCollectionItem("Tiers"))
{
    Html.LabelFor(x => x.StartOfRange, "Start Of Range")
    Html.TextBoxFor(x => x.StartOfRange)

    Html.LabelFor(x => x.EndOfRange, "End Of Range")
    Html.TextBoxFor(x => x.EndOfRange)

    // more fields here
}
</div>

您将不得不返回上面的部分，当用户单击添加层按钮的操作方法。

You would have an action method that returns the above partial when a user clicks "Add a tier" button.

public PartialViewResult GenerateTier()
{
    return PartialView(new TiersVm());
}

该BeginCollectionItem助手会使你所有的输入姓名和身份证的，使他们可以反弹到您发布模型：

The BeginCollectionItem helper would render out all of your input names and id's so that they could be rebound to the model you are POSTing in:

@model MasterVm
... using BeginForm ....

<div class="tier-container"> @* clicking new tier button appends items here *@
@foreach (var tier in Model.Tiers)
{
   Html.Action("GenerateTier", "ControllerName")
}
</div>

然后奇迹发生与默认模型联

Then magic happens with the default model binder

[HttpPost]
public ActionResult ReceiveInput(MasterVm masterVm)
{
    // masterVm.Tiers has been populated by the default model binder
}

这篇关于如何看待模型绑定工作？ +递过动态控件与视图模型的最好方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！