2016-01-07 170 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數字,但這也需要一些其他的黑客。