Question

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

请注意真实场景有两个以上的标签，每个标签面板中的局部视图都有相同的选择标记帮助器和相同的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>

部分View1：

    ...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

部分View2：

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

具有相同选择标记帮助程序的两个部分视图无效

1 个答案: