SemanticUI 드롭 다운 메뉴가 메뉴 항목을 동적으로 선택하지 않습니다.

Question

의미 드롭 다운을 사용하여 선택한 국가를 기반으로 상태 이름을 표시해야합니다. 그래서, 나는 별도의 asp : DropDownList를 사용하여 국가와 주를 배경으로 데이터베이스에서 데이터를 가져옵니다. Page_Load()에서 백엔드 코드의 메뉴 항목을 의미 론적 드롭 다운의 HTML 문자열로 구성하여 메뉴 항목을로드하고 표시합니다. 나라를 바꿀 때마다 잘 작동합니다. 그러나 전체 페이지가 다시로드되어 매번 기분이 좋지 않습니다.

이제 페이지를 다시로드하지 않고 상태 드롭 다운 (시맨틱 드롭 다운) 만 새로 고치려고합니다. 따라서 asp : dropPart 컨트롤에 asp : dropdownlist 컨트롤을 배치하여 페이지의 부분 렌더링을 수행했습니다. 하지만 국가를 변경하면 상태 드롭 다운에서 UpdatePanel에로드 된 업데이트 된 값을 선택하지 않습니다. 디버깅하는 동안 ASP 드롭 다운에서 업데이트 된 상태 값과 백엔드에서 HTML 문자열을 볼 수있었습니다. 여기

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

드롭 다운

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

나는()뿐만 아니라 pageLoad이 초기화 시도를 초기화하는 스크립트이지만, 그것은 작동하지 않았다. 나는 articled를 검색하여 드롭 다운을 다시 초기화하는 (.ui.dropdown) .dropdown ("새로 고침") 등의 제안 된 옵션을 시도했습니다. 문제가 해결되지 않았습니다.

누구든지 나에게이 문제를 해결하기위한 아이디어를 줄 수 있습니까?

Answer 1

UpdatePanel은 ajax를 실행하고 ID가 runat="server" 인 구성 요소와 요소 만 업데이트합니다. 설정하는 것을 잊지 마세요

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> 

id="UniqueId" 및 runat="server" :

는 같은 작업을 수행합니다.

당신의 SqlDataSource의 "OnSelected"또는 "OnDataBinding"이벤트를 관찰하고 같은 것을 할 수

:

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(); 
} 

드롭 다운리스트 새로 고침 AJAX 작업

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

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