2016-01-07 143 views
2

我有一个EditorTemplate的小项目。 我显示了一些最初在List<T>中的项目,但我希望能够在用户按下按钮时添加项目 。ASP.Net MVC添加动态EditorFor元素

通常我添加的项目,以查看这样

@for (int i = 0; i < Model.Models.Count; i++) 
{ 
    @Html.EditorFor(model => model.Models[i], "_AddArticleFullQuantity"); 
} 

当我想要添加项目动态我试图 创建一个使用AJAX调用服务器

<button id="addButton" type="button" class="btn btn-default btn-block" onclick="m_GUIRequests.AddArtikelToDiv()">add Article</button> 

GUIRequests.prototype.AddArtikelToDiv = function() 
{ 
    this.Request.CallAjax("/NewItemDelivery/GetPartialView_AddArticleFullQuantity", "", GUIRequests.AddToView); 
} 

GUIRequests.AddToView = function (html) { 
    $("#addedItems").append(html); 
} 

的一个按钮按钮打一个阿贾克斯电话给我的控制器,它将执行以下操作:

public ActionResult GetPartialView_AddArticleFullQuantity() 
{ 
    WrongItemsReceivedModel model = new WrongItemsReceivedModel(); 
    ModelContainer<WrongItemsReceivedModel> container = (ModelContainer<WrongItemsReceivedModel>)TempData["ModelContainer"]; 
    container.Add(model); 

    return PartialView("~/views/Shared/EditorTemplates/_AddArticleFullQuantity.cshtml", container.Models[0]); 
} 

而在最后,我得到了我预期它会告诉我,我的模板,但最初从列表中显示的项目编号

所以通常我有相同的元素:

<input class="form-control col-md-6 text-box single-line" data-val="true" data-val-required="MESSAGE" id="Models_0__ModelNumberID" name="Models[0].ModelNumberID" onchange="m_GUIRequests.SetWrongItemsReceivedValues()" type="text" value=""> 

但我得到这个:

<input class="form-control col-md-6 text-box single-line" data-val="true" data-val-required="MESSAGE" id="ModelNumberID" name="ModelNumberID" onchange="m_GUIRequests.SetWrongItemsReceivedValues()" type="text" value=""> 

我认为它是因为我用EditorFor“command”添加了一个,但另一个添加为PartialView。 有什么办法可以添加一个EditorFor元素,以便我的逻辑不会中断?

回答

2

为了编辑ASP.NET MVC中的可变长度列表,我建议阅读following article。它提供了一个非常干净的方法来实现这一点。在服务器上,您不需要任何TempData来保持持久性,并且它还说明了一个很好的小助手的用法,它允许您生成正确的输入字段名称。

就您的问题而言,您正确地认为输入错误的原因是因为当您直接从控制器操作返回部分视图时,它不再具有编辑器模板的父上下文。有一些方法可以规避这种情况,但这很不方便,我宁愿推荐文章中介绍的方法。

+0

这篇文章很好,但没有源代码,我无法使用Html.BeginCollectionItem() – Bongo

+0

尝试在开始处下载“演示项目”链接。它应该包括你需要的一切。 –

+0

是的,我想到了;)但我收到所有的查杀错误404 – Bongo

0

正常情况下,我会去找steven sanderson的博客文章,因为Darrin提到它已经成为行业标准之一。是的局部视图是你的场景中的一个痛苦。

在您的场景中,你会想保留编辑模板逻辑和链接我会去,并生成同名的动态添加的元素为editor for requries如下

这是我的代码只是给你的例子。

$("#addItemdynamically").click(function() { 
    $.ajax({ 
     url: '@Url.Action("GetNewGuid", "NewWebForms")', 
     cache: false, 
     success: function (newguid) { 
      id = newguid; 
      var html = '<tr class="editorRow">' + 
       '<td><input type="radio" id="Selected" name="Selected" value=' + id + ' /></td>' + 
       '<td><input type="hidden" name=\OptionsList.Index value=' + id + ' /></td>' + 
       '<td><input type="text" name=\OptionsList[' + id + '].Text /></td>' + 
       '<td><input type="hidden" name=\OptionsList[' + id + '].guid value=' + id + ' /></td>' + 
       '<td> <a href="#" class="deleteRow">delete</a></td>' + 
       '</tr>' 

       $("#editorRows tbody").append(html); 
       $("form").removeData("validator"); 
       $("form").removeData("unobtrusiveValidation"); 
       $.validator.unobtrusive.parse("form"); 
     } 
    });  
    return false; 
}); 

基本上我的新的GUID是越来越新生成从服务器端GUID和追加到,可以通过按添加新项按钮产生的行。

如果你喜欢在这里,你可以生成int数字,但这也需要一些其他的黑客。