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

时间:2014-09-30 12:18:03

标签: javascript asp.net asp.net-mvc asp.net-mvc-4 razor

型号:

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

oContent对象具有以下属性: ID 文字

观点:(剃刀)

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

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

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

  1. 手动编写html标记。我不喜欢它,因为可能在一天之内渲染的结构会发生变化而我的代码也不会发生变化。 (比如这里:http://www.techiesweb.net/asp-net-mvc3-dynamically-added-form-fields-model-binding/

  2. 从服务器获取结构。我不喜欢这个因为..好吧我总是不想使用服务器,除非我必须这样做。 (比如这里:How to add items to MVC model in javascript?

  3. 我正在寻找更好,更智能的解决方案。

1 个答案:

答案 0 :(得分:0)

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

逻辑是:

  1. 从剃须刀引擎中获取html

    @Html.TextAreaFor(m => Model.Agrees[i].Text).ToHtmlString()
    
  2. 比用属性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;
    }
    
  3. 结果如下:

    <textarea class="form-control" cols="20" id="Perfix_$__Text" name="Agrees[$].Text" rows="2"></textarea>
    
    1. 然后,在javascript中,当用户点击&#34;添加项目&#34;按钮,你可以得到&#34;模板&#34;和索引并替换&#39; $&#39;与索引。
  4. 所以,我不需要调用服务器,如果帮助器的结构会改变,我的代码仍然有效。

    它在工作。