动态添加模型行到表

时间:2011-06-24 13:14:31

标签: javascript asp.net-mvc

我现在已经阅读了很多文章,从Phil Haacks的“模型绑定到列表”到Steve Sanderson的“编辑可变长度列表”,现在试图解决我的问题 - 但是我不能真正得到它的工作

我有两个模型 - 订单和文章。订单有很多文章。订单视图包含文章表。

目前,我正在使用我的订单视图模型中的EditorFor(model => model.Articles)创建第一个表行。

它识别文章是一个列表并返回正确的列表项。到现在为止还挺好。

现在我想要一个链接,将一篇文章添加到表行,但是使用一个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可以吗?有没有办法模拟一个列表,以便它会保持编号?

2 个答案:

答案 0 :(得分:2)

是的,您可以使用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) });
});

这会在每个输入的名称中查找索引,例如文章[2]。标注并用新索引替换它。你可能会在你的ajax调用成功时做类似的事情。

希望有所帮助 本

答案 1 :(得分:0)

我认为你错过了Steve创建的扩展

如果你看一下这篇文章就像这样使用:

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