Question

我有一个视图（用于创建配方），我动态添加部分视图（代表产品）。配方中可以添加几种产品。使用jQuery在按钮单击时添加部分视图，这样可以正常工作：

    $('.loadPartial').on('click', function (evt) {
    evt.preventDefault();
    evt.stopPropagation();

    var $productsDiv = $('#productsDiv'),
        url = $(this).data('url');

    $.get(url, function (data) {
        $productsDiv.append(data);
    });
});

部分视图有一个组合。使用Html辅助扩展方法'GetIndexedName'动态生成此组合的名称，该方法将唯一索引添加到指定名称。如果我单击按钮两次它应该呈现两个部分视图，在第一次单击组合名称后应该是“ProductsCombo0”，在第二个“ProductsCombo1”之后

@Html.DropDownList( 
    @Html.GetIndexedName("ProductsCombo"), 
    null, 
    htmlAttributes: new { @class = "form-control col-md-3" }
)

问题是方法@ Html.GetIndexedName仅在第一个按钮单击后触发（在调试器中选中）。下一次单击仅渲染部分视图，但请使用该方法生成名称。所有组合都有名称“ProductsCombo0”，“ProductsCombo0”

你知道如何在每次呈现部分视图时触发它吗？

如果不能以这种方式完成，你可以向我推荐一些其他解决方案来生成独特的ID吗？

Answer 1

因为每次你为一个新行进行ajax调用时，这是一个完全独立的http调用，而且这个调用没有任何信息，无论你是否正在调用第一行或第八行 。您需要存储此值（您要调用的哪一行），并在构建下拉列表名称时使用该值。

因此，首先更新您的操作方法以接受行索引值。

public ActionResult AddRow(int id)
{
    var vm = new AddItemVm {RowIndex = id};
    vm.Items = new List<SelectListItem>()
    {
        new SelectListItem {Value = "1", Text = "IPhone"}
    };
    return PartialView("_NewItem", vm);
}

我正在使用小视图模型在我的操作方法和局部视图之间传递数据，看起来像，

public class AddItemVm
{
    public int RowIndex { set; get; }
    public List<SelectListItem> Items { set; get; }
}

在我们的视图模型中强类型的局部视图中，我们将读取Model.RowIndex属性并使用它来构建下拉列表名称/ id。

@model YourNamespaceHere.AddItemVm
<div>
    @Html.DropDownList("ProductsCombo"+Model.RowIndex, Model.Items)
</div>

现在我们需要确保每次要添加新行时都向AddRow方法发送唯一的行索引值。每次用户尝试添加新行并使用该值时，您都可以保留一个javascript变量并增加它的值。

$(function () {

    var rowIndex = 0;
    $('.loadPartial').on('click', function (evt) {
        evt.preventDefault();
        evt.stopPropagation();
        rowIndex++;
        var $productsDiv = $('#productsDiv'),
            url = $(this).data('url') + '/' + rowIndex;

        $.get(url, function (data) {
            $productsDiv.append(data);
        });
    });
});

Answer 2

我终于找到了问题的解决方案。来自AJAX调用的数据被缓存，这就是函数只被调用一次的原因。我所要做的就是禁用它。所以我将jQuery'get'mehtod更改为'post'（我现在知道的内容）没有缓存。

如何制作HTML辅助方法fire eveytime partial view

2 个答案: