ブーストを選択したメニュー項目は、ポストバック後にリセットされます

Question

私はasp.net Webアプリケーション内でタブ付きメニューを作成するためにboostrapを使用しています。

私はいくつかのリピーターを使用してメニュー項目とタブ付きページの内容を設定しています。 DBから値が設定された2つのタブ付き項目のみがあります。私が苦労している問題は、ポストバックの後、選択されたメニューが最初のメニュー項目に戻るということです。最初は、条件付きスタイルを使って最初のタブを表示します。

これはタブ付きメニューです：私はコースのリストで2番目のメニュー項目を選択することができます

<asp:Repeater runat="server" ID="rptCategories"> 
    <HeaderTemplate> 
     <ul class="nav nav-pills "> 
    </HeaderTemplate> 
    <FooterTemplate> 
     </ul> 
    </FooterTemplate> 
    <ItemTemplate> 
     <li class="<%# Container.ItemIndex == 0 ? "nav active" : "nav" %>"> 
      <a href='#<%# Eval("Abbrev")%>' data-toggle="tab"> 
       <h3><%# Eval("CourseCategory")%></h3> 
      </a> 
     </li> 
    </ItemTemplate> 
</asp:Repeater> 

<!-- Tab panes --> 

<div class="tab-content"> 
    <asp:Repeater runat="server" ID="rptCategoryList" OnItemDataBound="rptCategoryList_ItemDataBound"> 
     <ItemTemplate> 
      <div class="<%# Container.ItemIndex == 0 ? "tab-pane fade in active" : "tab-pane fade" %>" id='<%# Eval("Abbrev")%>'> 
       <div class="container" style="margin-top: 25px;"> 
        <h2 style="color: #0F4194;" class="text-center"><%# Eval("CourseCategory")%></h2> 
        <div class="row"> 
         <asp:Repeater runat="server" ID="rptCourses" OnItemDataBound="rptCourses_ItemDataBound" OnItemCommand="rptCourses_ItemCommand"> 
          <ItemTemplate> 
           <div class="col-md-4"> 
            <div class="bronze panel panel-default "> 
             <div class="bronze panel-body"> 
              <h4 class="text-center"><asp:Label runat="server" id="lblCourseName" Text='<%# Eval("CourseName")%>' /></h4> 
              <p class="text-justify"> 
               <%# Eval("CourseDesc")%> 
              </p> 
             </div> 
             <asp:LinkButton ID="lbViewVideo" runat="server" 
               CausesValidation="False"  
               CommandName="AddCourse" 
               CommandArgument='<%# Eval("AUCourseID") %>' 
               data-URL = '<%#Eval("CourseURL")%>' 
               data-CourseID = '<%#Eval("AUCourseID")%>' 
               data-CourseName = '<%#Eval("CourseName")%>'> 
               <i class="glyphicon glyphicon-film"></i> View the Tutorial 
              </asp:LinkButton> 
             </div> 
            </div> 
           </div> 
          </ItemTemplate> 
         </asp:Repeater> 
        </div> 
      </div> 
     </ItemTemplate> 
    </asp:Repeater> 
</div> 

。ビデオを見るためにリンクボタンをクリックすると（つまり、ポストバック）、最初のメニューが選択されます。メニュースタイルはContainer.ItemIndexが0かどうかに基づいているため（スタイルは「nav」または「nav active」）、それを回避する方法がわからないためです。

Answer 1

私は、私が選択したメニュー（私の場合には、カテゴリーを選択）のトラックを保持隠しフィールドを追加する必要がありましたソリューションhere

を見つけました。次に、隠しフィールドの値を取得するためにjQueryを使用しました。空の場合はデフォルト/最初のメニューを選択し、そうでない場合はその値を使用してメニューを選択します。また、同じスクリプト内で、メニュー項目にonclickイベントを関連付けます。

コードビハインドでは、hiddenのコードセットがrequest.Formからフェッチされます。コードビハインドで

<asp:HiddenField ID="hfSelCat" runat="server" /> 

<div class="container"> 
    <div id="divCategories"> 
     <asp:Repeater runat="server" ID="rptCategories"> 
      <HeaderTemplate> 
       <ul class="nav nav-pills "> 
      </HeaderTemplate> 
      <FooterTemplate> 
       </ul> 
      </FooterTemplate> 
      <ItemTemplate> 
       <li> 
        <a href='#<%# Eval("Abbrev")%>' data-toggle="tab" aria-controls='<%# Eval("Abbrev")%>' > 
         <h3><%# Eval("CourseCategory")%></h3> 
        </a> 
       </li> 
      </ItemTemplate> 
     </asp:Repeater> 
    </div> 

    <!-- Tab panes --> 
    <div class="tab-content"> 
    ... 
    </div> 
</div> 
<script type="text/javascript"> 
    $(function() { 
     var tabName = $("[id*=hfSelCat]").val() != "" ? $("[id*=hfSelCat]").val() : "DelOps"; 
     $('#divCategories a[href="#' + tabName + '"]').tab('show'); 

     $("#divCategories a").click(function() { 
      $("[id*=hfSelCat]").val($(this).attr("href").replace("#", "")); 
     }); 
    }); 
</script> 

：

protected void Page_Load(object sender, EventArgs e) 
{ 
    if (!Page.IsPostBack) 
    { 
     ... 
     hfSelCat.Value = Request.Form[hfSelCat.UniqueID]; 
    } 
}