Question

好的，所以我有这个课程：

public class BackstoreInventoryUtility
{
    public BackstoreInventoryInfo Item { get; set; }

    public List<ItemListingUtility> ListItemUtility { get; set; }

    public BackstoreInventoryUtility()
    {
        Item = new BackstoreInventoryInfo();

        ListItemUtility = new List<ItemListingUtility>();
    }
}

这里是ListItemUtility班级：

public class ItemListingUtility
{
    public int Quantity { get; set; }

    public string Duration { get; set; }

    public List<string> AvailableDurations { get; set; }

    public ItemListingUtility()
    {
        AvailableDurations = new List<string>();
    }
}

在我正在构建的视图中，我根据用户当前正在浏览的BackstoreInventoryUtility项目显示1 BackstoreInventoryInfo。

ListItemUtility是一个类，允许用户继续执行某些操作，例如在设定时间内显示设定数量。

视图呈现如下：

@model MyApp.Utilities.BackstoreInventoryUtility

@using (Html.BeginForm())
{
    <div>
        @if (Model.Item.Quantity > 0)
        {
            <input type="submit" value="Display"/>    
        }

        @Html.HiddenFor(_item => _item.Item.BackstoreInventoryID)

        <div class="bigFontSize bold formStyle">
            <label class="center">Options will eventually be displayed here.</label>
            <div>
                <div class="float-left">Quantity Allocated:</div>
                <div class="float-right">@Html.DisplayFor(_item => _item.Item.Quantity)
                    @Html.HiddenFor(_item => _item.Item.Quantity)
                </div>
                <div class="clear"></div>
            </div>
        <div class="formStyle" id="itemUtilityZone">
            <label>Options</label>
            @for (int i = 0; i < Model.ListItemUtility.Count; i++)
            {
                <div>
                    <div class="float-left">
                        Quantity To Display:
                    </div>
                    <div class="float-right">
                        @Html.TextBoxFor(_item => _item.ListItemUtility[i].Quantity, new { @class = "positive-integer numberTextBox" })
                    </div>
                    <div class="clear"></div>
                </div>
            }
        </div>
        @if (Model.Item.Quantity > 0)
        {
            <input type="submit" value="Display"/>    
        }
    </div>
}

我希望我的用户动态地向视图添加新行，然后在提交视图时，将包含所有行。

到目前为止，我在开始，我正在尝试这个：

[HttpGet]
public ActionResult AddItemUtilityRow()
{
    return PartialView(new ItemListingUtility());
}

渲染的局部视图与表中使用的div相同。但我不知道如果我使用jQuery调用怎么能实现呢？我怎么能这样做？

编辑好的，所以我在jquery中尝试了一些可以实现我想要的东西：

<script type="text/javascript">
    $(document).ready(function() {
        $("#addUtility").click(function() {
            $.get("@Url.Action("AddItemUtilityRow")", {
            }, function(data) {
                $('#itemUtilityZone').append(data);
            });
        });
    });
</script>

所以，正如我所说，这只是部分工作，因为当用户提交时，只提交列表中的默认项目数。我怎样才能这样做，以便每次用户添加一行时，它会累加到模型中并在以后提交？

Answer 1

哇！这比我想象的要复杂得多，但是由于这个链接：http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/我能够让整个事情发挥作用！

我首先转移了在部分视图中创建的每一行，如下所示：

<div class="formStyle" id="itemUtilityZone">
    <label>Options</label>
    @foreach (var utilityRow in Model.ListItemUtility)
    {
        Html.RenderPartial("ItemUtilityRow", utilityRow);
    }
</div>

这样呈现：

@using HtmlHelpers.BeginCollectionItem
@model MyApp.Utilities.ItemListingUtility
@using (Html.BeginCollectionItem("listItems"))
{
    <div>
        <div class="float-left">
            Quantity To Display:
        </div>
        <div class="float-right">
            @Html.TextBoxFor(_item => _item.Quantity, new { @class = "positive-integer numberTextBox" })
        </div>
        <div class="clear"></div>
    </div>    
}

注意：对于Html.BeginCollectionItem Html Helper，我不得不搜索Steven Sanderson的Helper，他在上层链接中提到了这一点。你可以在这里找到它：

https://github.com/danludwig/BeginCollectionItem

接下来，我的javascript调用如下所示：

$(document).ready(function() {
    $("#addUtility").click(function () {
        $.ajax({
            url: '@Url.Action("AddItemUtilityRow")',
            cache: false,
            success: function(html) {
                $('#ItemUtilityZone').append(html);
            }
        });
    });
});

添加新行的控制器方法：

[HttpGet]
public ActionResult AddEbayUtilityRow()
{
    return PartialView("ItemUtilityRow", new ItemListingUtility());
}

行显示现在很好。问题是，如何在我的post方法中找回它？好吧，按照Steve Sanderson的博客，我理解listItems变量实际上是集合的名称，它将被发送回post方法。

所以通过将此参数添加到控制器post方法：

IEnumerable<EBayListingUtility> listItems

列表确实被发送回post方法，其计数就是它应该是的。乌拉！

Answer 2

我们通过以下两种方式之一来解决这个问题：

1。）客户端方法 - 您可以使用jquery / knockout将任何内容附加到表中。这对于简单的添加很好，但是否定了在视图中使用c＃。

2。）服务器端方法（并且通常使用） - 基本上，将您的viewmodel发布回手动添加列表项的操作;

[HttpGet]
public ActionResult AddItemUtilityRow()
{
    return PartialView(new ItemListingUtility());
}

[HttpPost]
public ActionResult AddItemUtilityRow(BackstoreInventoryUtility viewModel)
{
    viewModel.ListItemUtility.Add(new ItemListingUtility());

    return PartialView(viewModel);
}

我们有很多方法可以使用jquery发布＆＃39;一个不同的动作（简单地添加一个项目的动作）。我会考虑使用jquery的ajax调用来实现这一目标。

但前提是一样的：

将数据从您的页面发送到服务器
操纵数据
重复使用您创建的视图

动态地向我的视图添加新行

2 个答案: