具有相同 select 标签助手的两个分部视图无法正常工作

Question

我有一个 Bootstrap Tabs menu in a View. The panels for tab 1 and tab2 have two partial views pv1 and pv2 each of which has a Select tag helper。正如我们所知，标签助手的 asp-for 属性创建了一个 id 和 name 属性，其值与上述文章中解释的相同。现在，当我单击选项卡 1 时，pv1 将使用 select 标签助手呈现。而且，当我单击 tab2 时，pv2 会使用 select 标签助手呈现。两个标签助手是相同的（年份列表）但是年份在 tab1 和 tab2 中分别被 selected 用于不同的目的。问题：无论 select 在 pv1 select 标签助手中编辑什么年份，pv2 中的数据都是根据那一年过滤的，而不是根据那一年的用户过滤 selects on pv2 select 标签助手。问题：为什么？我该如何解决这个问题？如何测试：当我在 pv2 中单击 GO 按钮时，下面的 Ajax 代码总是弹出带有年份 selected 的警报，在 pv2 的 select 标签助手中。

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

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

只会 return 第一个元素 id="SelectedYear" 的值。

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

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

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

<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 属性

具有相同 select 标签助手的两个分部视图无法正常工作

Two Partial Views with the same select tag helper not working

c#

ajax

asp.net-mvc

asp.net-ajax

asp.net-core