c# - 动态向我的 View 添加新行

Question

好的，所以我有这个类(class):

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>();
    }
}

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

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

View 呈现如下:

@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>
}

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

到目前为止，我还处于起步阶段，我正在尝试这样做:

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

渲染的部分 View 与表中使用的 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/我能够让整个事情顺利进行!

我首先传输了在局部 View 中创建的每一行，如下所示:

<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);
            }
        });
    });
});

以及添加新行的 Controller 方法:

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

现在行显示得很好。问题是，如何在我的 post 方法中捕获它？好吧，根据 Steve Sanderson 的博客，我了解到 listItems 变量实际上是将发送回 post 方法的集合的名称。

因此，通过将此参数添加到 Controller post 方法中:

IEnumerable<EBayListingUtility> listItems

列表确实被发送回 post 方法，并且计数是它应该的值。万岁!