Question

我有一个包含迭代项的视图模型。我通过EditorFor（）方法将它们放在我的视图中。

查看：

@model Models.MyModel 

@using (Html.BeginForm(@Model.Action, @Model.Controller))
{
    <div class="section" id="Terms">
        @Html.EditorFor(m => m.Terms)
    </div>

    <input type="submit" value="Save" />
}

型号：

public class MyModel 
{
    public IEnumerable<Term> Terms  { get; set; }
}

EditorTemplates \ Term.cshtml：

@model Models.Term

@if (Model != null) 
{
    <fieldset>
        <legend>Term</legend>

        @Html.HiddenFor(model => model.TermID)

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

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

    </fieldset> 
}

我希望能够在视图中动态添加/删除列表中的项目，例如knockout.js上的这个示例，但是如何保留auto-id的MVC创建??：

http://knockoutjs.com/examples/cartEditor.html

以下是我对此的要求：

添加新条款
删除条款
验证添加的新术语视图

我已经阅读了有关SO的其他问题，但我还没有找到真正明确的答案。 knockout.js是可以接受的方式吗？是否有使用Knockout和MVC执行此操作的示例？

谢谢！

Answer 1

我发现Jarrett Meyer撰写了这篇文章Nested Collection Models in MVC3，他有一个不使用淘汰赛并最大化代码重用的解决方案。

这包括添加和删除方法。我将在这里概述添加方法。

模特

public class Person {
  public string FirstName { get; set; }
  public string LastName { get; set; }
  public IList<PhoneNumber> PhoneNumbers { get; set; }
  public IList<EmailAddress> EmailAddresses { get; set; }
  public IList<Address> Addresses { get; set; }
}

浏览

//New.cshtml:    
@using (Html.BeginForm("New", "Person", FormMethod.Post))
{
  @Html.EditorForModel()
  <p>
    <button type="submit">
      Create Person
    </button>
  </p>
}

//Person.cshtml:
@Html.AntiForgeryToken()
@Html.HiddenFor(x => x.Id)

<p>
  <label>First Name</label>
  @Html.TextBoxFor(x => x.FirstName)
</p>
<p>
  <label>Last Name</label>
  @Html.TextBoxFor(x => x.LastName)
</p>
<div id="phoneNumbers">
  @Html.EditorFor(x => x.PhoneNumbers)
</div>
<p>
  @Html.LinkToAddNestedForm("Add Phone Number", "#phoneNumbers", ".phoneNumber", "PhoneNumbers", typeof(PhoneNumber))
</p>

//PhoneNumber.cshtml:
<div class="phoneNumber">
  <p>
    <label>Telephone Number</label>
    @Html.TextBoxFor(x => x.Number)
  </p>
  <br/>
</div>

辅助

/// <param name="linkText">Text for Link</param>
/// <param name="containerElement">where this block will be inserted in the HTML using a jQuery append method</param>
/// <param name="counterElement">name of the class inserting, used for counting the number of items on the form</param>
/// <param name="collectionProperty">the prefix that needs to be added to the generated HTML elements</param>
/// <param name="nestedType">The type of the class you're inserting</param>
public static IHtmlString LinkToAddNestedForm<TModel>(this HtmlHelper<TModel> htmlHelper, string linkText,
    string containerElement, string counterElement, string collectionProperty, Type nestedType)
{
    var ticks = DateTime.UtcNow.Ticks;
    var nestedObject = Activator.CreateInstance(nestedType);
    var partial = htmlHelper.EditorFor(x => nestedObject).ToHtmlString().JsEncode();

    partial = partial.Replace("id=\\\"nestedObject", "id=\\\"" + collectionProperty + "_" + ticks + "_");
    partial = partial.Replace("name=\\\"nestedObject", "name=\\\"" + collectionProperty + "[" + ticks + "]");

    var js = string.Format("javascript:addNestedForm('{0}','{1}','{2}','{3}');return false;", containerElement,
        counterElement, ticks, partial);

    TagBuilder tb = new TagBuilder("a");
    tb.Attributes.Add("href", "#");
    tb.Attributes.Add("onclick", js);
    tb.InnerHtml = linkText;

    var tag = tb.ToString(TagRenderMode.Normal);
    return MvcHtmlString.Create(tag);
}

private static string JsEncode(this string s)
{
    if (string.IsNullOrEmpty(s)) return "";
    int i;
    int len = s.Length;

    StringBuilder sb = new StringBuilder(len + 4);
    string t;

    for (i = 0; i < len; i += 1)
    {
        char c = s[i];
        switch (c)
        {
            case '>':
            case '"':
            case '\\':
                sb.Append('\\');
                sb.Append(c);
                break;
            case '\b':
                sb.Append("\\b");
                break;
            case '\t':
                sb.Append("\\t");
                break;
            case '\n':
                //sb.Append("\\n");
                break;
            case '\f':
                sb.Append("\\f");
                break;
            case '\r':
                //sb.Append("\\r");
                break;
            default:
                if (c < ' ')
                {
                    //t = "000" + Integer.toHexString(c); 
                    string tmp = new string(c, 1);
                    t = "000" + int.Parse(tmp, System.Globalization.NumberStyles.HexNumber);
                    sb.Append("\\u" + t.Substring(t.Length - 4));
                }
                else
                {
                    sb.Append(c);
                }
                break;
        }
    }
    return sb.ToString();
}

的Javascript

//since the html helper can change the text of the item inserted but not the index,
//this replaces the 'ticks' with the correct naming for the collection of properties
function addNestedForm(container, counter, ticks, content) {
  var nextIndex = $(counter).length;
  var pattern = new RegExp(ticks, "gi");

  content = content.replace(pattern, nextIndex);
  $(container).append(content);
}

Answer 2

你想要淘汰MVC http://knockoutmvc.com/CartEditor

你不必为此使用淘汰赛，你真正需要的是带有验证的javascript和创建/删除动作，这些动作映射到MVC方面的静止控制器动作。你如何实现这一点取决于你。 Knockout让它变得简单。

Answer 3

您需要执行以下操作：

将模型发送到您的控制器并为术语呈现一个可编辑字段。
您要求用户提交此内容或点击添加以添加更多字词。
如果用户点击添加，您可以创建现有字段的副本并清空它们或其他任何内容，以便他们可以创建新字段。
当用户提交时，您将其发送回接受一系列术语并将其添加到数据库或不添加的操作。或者你可以使用上面例子中的ajax或者从this example你可以看到它发送给服务器的是json数组对象而不是带有命名元素的表单。
您可以在创建时处理它们，也可以在提交时处理它们。

取决于您的应用程序，因此淘汰赛只是帮助您在客户端进行第3步，从旧版本创建新版本。您也可以为此使用JQuery模板，并使用旧的浏览器支持对json2进行序列化。

您需要了解的是，一旦您在客户端，您已经将模型发送到此处，因此不必担心服务器端。无论你在客户端构建的是什么，都可以一次发送一个模型来saveTerm动作，它可以使用term id和其他信息重新生成json，或者你可以将saveTerm的集合作为json数组返回，它可以正常工作。

如果你想在postBack上发送数组而不是ajax，只需保持表单元素名称相同并重复术语输入字段并发送。 MVC会将它们映射到一个术语数组，就像使用json一样。

MVC4如何动态地将行项添加到EditorFor字段？

3 个答案: