允许使用添加项目来模拟asp.net mvc4

The model:

该模型：

public class oPage
{
    public int PageId { get; set; }
    public List<oContent> Contents { get; set; }
}

The oContent object have properties: Id and Text.

oContent对象具有属性：Id和Text。

The view: (Razor)

观点:(剃刀）

@for (int i = 0; i <= Model.Agrees.Count; i++)
{
   @Html.TextAreaFor(m => Model.Agrees[i].Text)
}

I want to let to user to add another content from the client.

我想让用户从客户端添加其他内容。

I found some solutions that I don't like:

我发现了一些我不喜欢的解决方案：

Write the html markup manually. I don't like it because maybe in one day the rendering's structure will change and my code will not word. (Like here: http://www.techiesweb.net/asp-net-mvc3-dynamically-added-form-fields-model-binding/)

手动编写html标记。我不喜欢它，因为可能在一天之内渲染的结构会发生变化而我的代码也不会发生变化。（比如这里：http：//www.techiesweb.net/asp-net-mvc3-dynamically-added-form-fields-model-binding/）
Get the structure from the server. I don't like this because.. well I'm always prefer not use the server unless I have to. (Like here: How to add items to MVC model in javascript?)

从服务器获取结构。我不喜欢这个因为..好吧我总是不想使用服务器，除非我必须这样做。（比如这里：如何在javascript中向MVC模型添加项目？）

I'm looking for a better and smarter solution.

我正在寻找更好，更智能的解决方案。

1 个解决方案

#1

The solution a little beat complex but I think that it cover all my points.

解决方案有点复杂，但我认为它涵盖了我的所有观点。

The logic is:

逻辑是：

Get the html from the razor engine

从剃须刀引擎获取html
```
@Html.TextAreaFor(m => Model.Agrees[i].Text).ToHtmlString()
```

Than replace the index number with the attributes name and id (It makes more sense than relying on all attribute value)

比用属性name和id替换索引号（比依赖所有属性值更有意义）

public static string CreateHelperTemplate(string PlaceholderPerfix, MvcHtmlString mvcHtmlString)
{
    string Result = "";
    XElement TempNode = XDocument.Parse(mvcHtmlString.ToHtmlString()).Root;

    XAttribute AttrId = TempNode.Attribute("id");
    AttrId.Value = AttrId.Value.Replace("0", PlaceholderPerfix);

    XAttribute AttrName = TempNode.Attribute("name");
    AttrName.Value = AttrName.Value.Replace("0", PlaceholderPerfix);

    // Clear the content if exist
    TempNode.SetValue(string.Empty);

    Result = TempNode.ToString();

    return Result;
}

The result it something like this:

结果是这样的：
```
<textarea class="form-control" cols="20" id="Perfix_$__Text" name="Agrees[$].Text" rows="2"></textarea>
```
1. Then, in javascript, when the user click on "Add item" button you can get the "template" and the index and replace the '$' with the index.
2. 然后，在javascript中，当用户单击“添加项目”按钮时，您可以获得“模板”和索引，并将“$”替换为索引。

So, I not need to call the server and if the structure of the helper will change my code will still work.

所以，我不需要调用服务器，如果帮助器的结构将改变我的代码仍然可以工作。

It's working.

它的工作原理。

#1