具有相同选择标签助手的两个局部视图不起作用

Question

我在View 中有一个Bootstrap Tabs menu。选项卡 1 和选项卡 2 的面板有两个局部视图 pv1 和 pv2，每个视图都有一个 Select tag helper。正如我们所知，标签助手的asp-for 属性创建了一个与上面文章中解释的值相同的 id 和 name 属性。现在，当我单击选项卡 1 时，pv1 将使用选择标签助手呈现。而且，当我单击 tab2 时，pv2 会使用选择标签助手呈现。两个标签助手都是相同的（年份列表），但是分别在 tab1 和 tab2 中为不同的目的选择了年份。 问题：无论在 pv1 select tag helper 中选择什么年份，​​pv2 中的数据都会根据该年份进行过滤，而不是根据用户在 pv2 select tag helper 上选择的年份进行过滤。 问题：为什么？我该如何解决这个问题？如何测试：当我点击 pv2 中的 GO 按钮时，下面的 Ajax 代码总是会弹出警报，其中包含在 pv2 的选择标签帮助程序中选择的年份。

请注意 真实场景有两个以上的选项卡，每个选项卡面板中的局部视图都有相同的选择标签助手和相同的GO 按钮。我正在使用 JQuery 的 Event Delegation 来简化我的代码，而不是为每个 GO 按钮编写单独的 Ajax 调用。此外，在我的ViewModel（传递给视图）中，我只想使用一个属性作为年份列表和选定年份。

视图模型：

public int entityid {get; set;}
 ...
public SelectList lstYears {get; set;}
public int SelectedYear {get; set;}
...

查看：

<ul id="myTabstripID" class="nav nav-tabs">
  <li id="AddprojTab"><a data-toggle="tab" href="#menu1">Menu 1</a></li>
  <li id="UpdPorjTab"><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
   <div id="menuAP" class="tab-pane in active">
       <div class="AddTabContenData"></div>
   </div>
   <div id="menuUP" class="tab-pane in active">
       <div class="UpdTabContenData"></div>
   </div>
</div>

部分视图1：

    ...some html here
 Select Order Year: <select asp-for="SelectedYear" asp-items="@Model.lstYears"></select><button type="button" class="btnGO btn btn-default">GO</button>
    ...some html here to display data based on year selected in pv1

局部视图2：

    ...some html here
Select Delivery Year: <select asp-for="SelectedYear" asp-items="@Model.lstYears"></select><button type="button" class="btnGO btn btn-default">GO</button>
    ...some html here to display data based on year selected in pv2

Ajax 代码：

$(document).ready(function () {

    $('.tab-content').on('click', '.btnGO', function (event) {
        var btnVal = $(this).val();
        var selectedYearVal = $('#SelectedYear').val();
        alert(selectedYearVal);
        $.ajax({
            ...
            ...
        });
    });
});

Answer 1

您有重复的id 属性（您的两个<select> 元素都有id="SelectedYear"）这是无效的html 并且在您的脚本中

var selectedYearVal = $('#SelectedYear').val();

只会返回带有id="SelectedYear" 的第一个元素的值。

理想情况下，您应该使用具有不同属性名称的视图模型（asp-for 根据属性名称生成 id 属性）但如果这不切实际，您可以在 html 中指定属性，例如

<select asp-for="SelectedYear" id="someValue" ... >

但是，由于您在每个部分中都有一个 <button class="btnGO" ... > 元素，因此您应该删除 id 属性并改用类名，然后使用相对选择器。你的部分应该有一个容器元素，比如说

<div class="container">
    <select asp-for="SelectedYear" asp-items="@Model.lstYears" class="year" id=""></select>
    <button type="button" class="btnGO btn btn-default">GO</button>
    ....
</div>

并修改脚本以获取下拉列表中相对于按钮的选定选项

$(document).ready(function () {
    $('.tab-content').on('click', '.btnGO', function (event) {
        // var btnVal = $(this).val(); 
        var container = $(this).closest('.container');
        var selectedYearVal = container.find('.year').val();
        $.ajax({
            ...
        });
    });
});

还要注意var btnVal = $(this).val(); 没有意义，因为<button> 没有value 属性