動態添加模型行到表

Question

我現在已經閱讀了很多文章，從Phil Haacks的“模型綁定到列表”到Steve Sanderson的“編輯可變長度列表”，現在試圖解決我的問題 - 但是我真的不能讓它工作。

我有兩個模型 - 訂單和文章。 訂單有很多文章。 訂單視圖包含文章表。

目前，我正在使用我的訂單視圖模型中的EditorFor（model => model.Articles）創建第一個表行。

它識別出Article是一個列表並返回正確的列表項。 到現在為止還挺好。

現在我想要一個鏈接，將一篇文章添加到表行，但是使用一個AJAX請求到Controller，然后返回一個局部視圖（僅包含文章表行）。 我已經使用本教程了解它： http ： //blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/

但是，我的問題是我不知道如何繼續ASP.NET MVC“樣式”中的文章行序列，以便在提交時獲得認可。 （例如文章[1]。數字文章[2]。數量等）

這是我的代碼。 “添加文章”鏈接應添加文章並向/ orders / BlankArticleRow發送ajax請求

public ActionResult BlankArticleRow(int pos)
        {
            Article article = new Article()
            {
                Position = pos
            };

            return View(article);
        }

BlankArticleRow的局部視圖如下所示：

@model Bestellinterface.Models.Article

@{
    Layout = null;
}

@Html.EditorFor(model => model)

工作正常。 當我單擊“添加文章”鏈接時，行將被添加，但文本字段等的屬性不具有正確的格式。 我想要的是它繼續編號html元素，文章[0]。數字，文章[1]。數字，文章[2]。數字......

這是可以使用EditorFor嗎？ 有沒有辦法模擬列表，以便它將保持編號？

Answer 1

是的，你可以使用EditorFor ：

    @{ int i = 0; }
@foreach (var article in Model.Articles)
{
@Html.EditorFor(model => Model.Articles[i])
i++;
}

假設編輯器模板包含字段標題，描述，我們最終會得到文章[i]。標題，文章[i]。描述。

一個解決方案可能是返回包含訂單的所有文章的部分，這將確保您的索引正確。

或者，您可以使用javascript更新輸入的索引。

為了在從動態表中刪除項目時保持索引正確，我寫了以下內容：

//reset index values
$('#links-table tbody tr').each(function (index, value) {
    $(this).find('input[type=text]').prop('name', function (i, e) { return e.replace(/(\d+)/g, index) });
});

這將查找每個輸入名稱中的索引，例如Articles [2]。標題並用新索引替換它。 您可能會在ajax調用成功時執行類似的操作。

希望能幫助Ben

Answer 2

我想你錯過了Steve創建的擴展

如果你看一下這篇文章就像這樣使用：

<% using(Html.BeginCollectionItem("gifts")) { %>
    Item: <%= Html.TextBoxFor(x => x.Name) %> 
    Value: $<%= Html.TextBoxFor(x => x.Price, new { size = 4 }) %> 
<% }