使用相同的選擇標籤助手不工作的兩個部分視圖

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的select tag助手中選擇年份。

請注意真正的方案有兩個以上選項卡，並在每個標籤面板局部視圖具有相同的選擇標記輔助和同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(); 

只會返回第一個元素的值t與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屬性