如何使 HTML 辅助方法触发eveytime 部分视图呈现答案

【问题标题】：How to make HTML helper method fire eveytime partial view is rendered如何使 HTML 辅助方法触发eveytime 部分视图呈现
【发布时间】：2016-01-02 05:33:14
【问题描述】：

我有一个视图（用于创建食谱），我动态地向其中添加了一个局部视图（代表产品）。配方中可以添加多种产品。使用 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 的解决方案？

【问题讨论】：

标签： javascript jquery asp.net-mvc asp.net-mvc-4 razor

【解决方案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);
        });
    });
});

【讨论】：

【解决方案2】：

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

【讨论】：