SemanticUI-Dropdown-Menü nimmt Menüoptionen nicht dynamisch an

Question

Ich habe die Anforderung, Statusnamen basierend auf dem ausgewählten Land mithilfe des semantischen Dropdown-Menüs anzuzeigen. Also, ich benutze separate asp: DropDownList für Land und Staat im Hintergrund, um die Daten aus der Datenbank zu holen. Auf Page_Load() konstruiere ich die Menüelemente im Backend-Code als HTML-Zeichenfolge für das semantische Dropdown-Menü, um die Menüelemente zu laden und anzuzeigen. Es funktioniert jedes Mal gut, wenn ich das Land ändere. Aber jedes Mal wird die gesamte Seite neu geladen, was sich nicht gut anfühlt.

Jetzt versuche ich nur die Status Dropdown (Semantic Dropdown) zu aktualisieren, ohne die Seite neu zu laden. Daher habe ich die asp: dropdownlist -Steuerelemente in ein asp: UpdatePanel platziert, um das partielle Rendering der Seite durchzuführen. Aber wenn ich das Land ändere, wählt das Status-Dropdown nicht die aktualisierten Werte aus, die im UpdatePanel geladen werden. Während des Debugging konnte ich die Statuswerte im asp-Dropdown und die HTML-Zeichenfolge im Backend aktualisiert sehen.

<asp:UpdatePanel ID="UpdatePanel6" runat="server"> 
    <ContentTemplate> 
     <!-- Country Dropdown and sql data source--> 
     <asp:SqlDataSource ID="SqlDataSourceCountry" runat="server" ConnectionString="<%$ ConnectionStrings:.......%>" 
      SelectCommand="......." SelectCommandType="StoredProcedure"></asp:SqlDataSource> 
     <asp:DropDownList ID="DropDownListCountry" runat="server" AutoPostBack="True" DataSourceID="......" 
      DataTextField="CountryName" DataValueField="CountryCode" Style="display: none"> 
     </asp:DropDownList> 

     <!-- State Dropdown and sql data source--> 
     <asp:SqlDataSource ID="SqlDataSourceState" runat="server" ConnectionString="<%$ ConnectionStrings:..... %>" 
      SelectCommand=".........." SelectCommandType="StoredProcedure"> 
      <SelectParameters> 
       <asp:ControlParameter ControlID="......" Name="EnterCountryCode" PropertyName="......." Type="String" /> 
      </SelectParameters> 
     </asp:SqlDataSource> 
     <asp:DropDownList ID="DropDownListState" runat="server" AutoPostBack="True" 
      DataSourceID="......" DataTextField="....." DataValueField="......" Style="display: none"> 
     </asp:DropDownList> 
    </ContentTemplate> 
</asp:UpdatePanel> 

<div id="dvIDCountryCodeDropdownClone" class="ui selection dropdown dvDropDownCountry"> 
    <input type="hidden" name="countryDropdown"> 
    <i class="dropdown icon"></i> 
    <%=strClsCountryNameHTML%> 
</div> 
<div id="dvIDStateCodeDropdownClone" class="ui selection dropdown dvStateCityDropDown"> 
    <input type="hidden" name="stateDropdown"> 
    <i class="dropdown icon"></i> 
    <%=strClsStateNameHTML%> 
</div> 

Hier ist das Skript auf den Dropdown-

<script type="text/javascript"> 
$('#dvIDCountryCodeDropdownClone').dropdown(); 
    $('#dvIDStateCodeDropdownClone').dropdown(); 
</script> 

Ich habe versucht, diese Initialisierung in pageload() als auch zu initialisieren, aber es hat nicht funktioniert. Ich suchte die Artikel und versuchte die vorgeschlagenen Optionen wie die Initialisierung des Dropdown-Menüs noch einmal, (.ui.dropdown) .dropdown ("refresh") usw. Nichts löste das Problem.

Kann jemand mir einige Ideen geben, um dieses Problem zu lösen?

Answer 1

UpdatePanel führt einen AJAX aus und aktualisiert nur die Komponenten und Elemente, die darin enthalten sind und eine ID und runat="server" haben.

so etwas tun:

ASPX

<asp:UpdatePanel ID="UpdatePanel6" runat="server"> 
    <ContentTemplate> 

     // SqlDataSources and DropDownLists 

     <div id="dvIDCountryCodeDropdownClone" class="ui selection dropdown dvDropDownCountry"> 
      <input type="hidden" name="countryDropdown"> 
      <i class="dropdown icon"></i> 
      <div id="countryDropdown" class="menu" runat="server" > 
      </div> 
     </div> 
     <div id="dvIDStateCodeDropdownClone" class="ui selection dropdown dvStateCityDropDown"> 
      <input type="hidden" name="stateDropdown"> 
      <i class="dropdown icon"></i> 
      <div id="stateDropdown" class="menu" runat="server" > 
      </div> 
     </div> 

    </ContentTemplate> 
</asp:UpdatePanel> 

Vergessen Sie nicht, ein id="UniqueId" und runat="server" einzustellen.

Sie können die "OnSelected" oder "OnDataBinding" Ereignisse von SqlDataSource beobachten und so etwas tun:

private void FeedCountryDropDown(IEnumerable<Country> countries) 
{ 
    if (countries == null || !countries.Any()) 
     return; 

    var sb = new StringBuilder(); 
    foreach(var c in countries) 
    { 
     sb.Append("<div class=\"item\" data-value=\"") 
      .Append(c.Id.ToString()) 
      .Append("\">") 
      .Append(c.Name) 
      .Append("</div>"); 
    } 
    countryDropdown.InnerHtml = sb.ToString(); 
} 

private void FeedStatesDropDown(IEnumerable<State> states) 
{ 
    if (states == null || !states.Any()) 
     return; 

    var sb = new StringBuilder(); 
    foreach (var s in states) 
    { 
     sb.Append("<div class=\"item\" data-value=\"") 
      .Append(s.Id.ToString()) 
      .Append("\">") 
      .Append(s.Name) 
      .Append("</div>"); 
    } 
    stateDropdown.InnerHtml = sb.ToString(); 
} 

Dropdownliste Refresh Nach Ajax Operation

<script> 
    var prm = Sys.WebForms.PageRequestManager.getInstance(); 
    $('#dvIDCountryCodeDropdownClone').dropdown(); 
    $('#dvIDStateCodeDropdownClone').dropdown(); 

    prm.add_endRequest(function() { 
     $('#dvIDCountryCodeDropdownClone').dropdown('refresh'); 
     $('#dvIDStateCodeDropdownClone').dropdown('refresh'); 
    }); 
</script>