Два частичных вида с тем же помощником тега select не работают

Question

У меня есть Bootstrap Tabs menu в View. Панели для вкладок 1 и tab2 имеют два частичных вида pv1 и pv2, каждый из которых имеет Select tag helper. Как известно, атрибут атрибута тега создает атрибут id и name с тем же значением, что и в приведенной выше статье. Теперь, когда я нажимаю на вкладку 1, pv1 визуализируется с помощью специального помощника тега. И, когда я нажимаю на tab2, pv2 визуализируется с помощью помощника select tag. Оба помощника тега одинаковы (список лет), но годы выбраны для разных целей в tab1 и tab2 соответственно. Задача: Какой бы год не выбран в pv1 select tag helper, данные в pv2 отфильтрованы на основе этого года, а не фильтрации на год, который пользователь выбирает на pv2 select tag helper. Вопрос: Почему? и как я могу решить проблему? Как проверить: когда я нажимаю кнопку GO в pv2, код Ajax ниже всегда выдает предупреждение с годом, выбранным в помощнике тега pv2.

Обращаем Ваше внимание, что Реальный сценарий имеет более двух вкладок, а частичный вид на каждой панели вкладок имеет тот же помощник тега select и ту же кнопку GO. Я использую JQuery's Event Delegation, чтобы упростить мой код и не писать отдельный вызов Ajax для каждой кнопки GO. Более того, в моем ViewModel - который передается в представление - я хочу использовать только одно свойство для летнего списка и выбранного года.

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> 

и изменить сценарий, чтобы получить выбранный вариант в DROPDOWNLIST относительно кнопки

$(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