Asp.net mvc 4 唯一的脚本标记不工作

我正在主视图上创建局部视图列表。局部视图使用级联下拉列表。级联下拉列表在第一行上运行良好，但是当我添加第二行并更改第一行下拉列表上的值时，第二行中的两个下拉列表也会更改，而不是我刚刚更新的行中的一个。 我研究了一下，知道这是因为我的脚本对它们使用了相同的标签，而不是唯一的。 我开始使用Html.BeginCollectionItem在下拉列表中获取唯一的名称，并修改脚本以获取隐藏字段的值，并将其绑定到正确的下拉列表，但它不起作用

你知道我的脚本中怎么能有唯一的ID吗

这是我的部分观点：

@model BudgetPortalMVC4.Models.NewBudgetModel
@using (Html.BeginCollectionItem(""))
{
    <script type="text/jscript">
        $(function () {
            var value = document.getElementsByName(".index")[0].value;
            $(document).on('change', "#["+value+"].SelectedCategory", function () {
                $("#["+value+"].SelectedSubCategory").empty();
                $.getJSON('@Url.Action("GetSubCategories")', { id: $(this).val() }, function (data) {
                    if (!data) {
                        return;
                    }
                    $("#["+value+"].SelectedSubCategory").append($('<option></option>').val('0').text('Select Item'));
                    $.each(data, function (index, item) {
                        $("#["+value+"].SelectedSubCategory").append($('<option></option>').val(item.Value).text(item.Text));
                    })
                });
            });
        });
    </script>
    <table>
       <tr>
            <td>
                <div>
                    @Html.LabelFor(m => m.SelectedCategory)
                    @Html.DropDownListFor(m => m.SelectedCategory, Model.CategoriesList, "Please select", new { @class = "SelectedCategory" })
                    @Html.ValidationMessageFor(m => m.SelectedCategory)
                </div>
            </td>
            <td>
                <div>
                    @Html.LabelFor(m => m.SelectedSubCategory)
                    @Html.DropDownListFor(m => m.SelectedSubCategory,    Model.SubCategoriesList, "Please select", new { @class = "SelectedSubCategory" })
                    @Html.ValidationMessageFor(m => m.SelectedSubCategory)
                </div>
            </td>
        </tr>
    </table>
}

这是渲染时生成的代码的一部分：

<input type="hidden" name=".index" autocomplete="off" value="b6fadec7-eb7d-4ce2-a06c-79ef0597b8da" />

<table>
    <tr>
        <td>
            <div>
                <label for="">SelectedCategory</label>
                <select class="SelectedCategory" data-val="true" data-val-number="The field SelectedCategory must be a number." name=[b6fadec7-eb7d-4ce2-a06c-79ef0597b8da].SelectedCategory"><option value="">Please select</option>
                    <option value="1">Groceries</option>
                    <option value="2">Travel</option>
                </select>
                <span class="field-validation-valid" data-valmsg-for="[b6fadec7-eb7d-4ce2-a06c-79ef0597b8da].SelectedCategory" data-valmsg replace="true"></span>

这是我的脚本在尝试使标记唯一时抛出的错误：

错误：语法错误，无法识别的表达式：[4eebf546-988d-44a0-aa4e-296c46273d54]。已选择类别 抛出新错误语法错误，无法识别的表达式：+msg

---

脚本不应该是局部的。将脚本移动到主视图或布局，并在jQuery选择器中使用元素类名称

你应该是偏袒的

@using (Html.BeginCollectionItem(""))
{
    <div class="item">
        <label>
            <span>@Html.DisplayNameFor(m => m.SelectedCategory)</span>
            @Html.DropDownListFor(m => m.SelectedCategory, Model.CategoriesList, "Please select", new { @class = "SelectedCategory" })
            @Html.ValidationMessageFor(m => m.SelectedCategory)
        </label>
        <label>
            <span>@Html.DisplayNameFor(m => m.SelectedSubCategory)</span>
            @Html.DropDownListFor(m => m.SelectedSubCategory, Model.SubCategoriesList, "Please select", new { @class = "SelectedSubCategory" })
             @Html.ValidationMessageFor(m => m.SelectedSubCategory)
        </label>
    </div>
}

---

注意：当页面第一次呈现时，您还可以使用文档中存在的最接近的祖先替换$document，例如，可能是$'form'

。首先，从部分中删除脚本并将其放在主视图中脚本永远不应该在部分中。然后给您元素类名称，这样您就可以按类名而不是ID进行选择。如果查看生成的html，您将看到没有ID为[]的元素.SelectedCategory-它们将是id=\uuuuuuu SelectedCategory，除非在您的情况下，表单控件上没有id属性，因为您的模型是一个集合，而不是一个包含一个集合属性的对象。谢谢您的回复。我对代码进行了更改，得到了以下响应[{Value:1，Text:vegets}，{Value:2，Text:icecream}，{Value:3，Text:Meat}]。但是，它不会在第二个下拉列表中更新。有什么想法吗？那你就没有听我的回答。调试脚本并检查值，例如console.logsubCategory.length；回来我还注意到您的代码在子类别中缺少一个>。我试图将$document更改为$form，但没有成功。也许我只是需要一些文档。你把元素添加到局部视图了吗？如果您不使用我给您的代码，那么您就不能期望它工作：还要注意的是，您不会得到任何新项目的客户端验证。建议您再次阅读我在上一个问题中提供给您的链接-您需要重新解析验证器。

var url = '@Url.Action("GetSubCategories", "Budget")'; // Do not hard code your url's
$(document).on('change', '.SelectedCategory', function() {
    var subCategory = $(this).closest('.item').find('.SelectedSubCategory');
    subCategory.empty();
    $.getJSON(url, { id: $(this).val() }, function (data) {
        if (!data) {
            return;
        }
        subCategory.append($('<option></option>').val('').text('Please select')); // Do not give the option a value!
        $.each(data, function (index, item) {
            subCategory.append($('<option></option>').val(item.Value).text(item.Text));
        });
    });
});