语义 UI 下拉菜单不会动态选择菜单项

Question

我需要使用语义下拉菜单根据所选国家/地区显示州名。所以，我在后台使用单独的 asp: DropDownList for country 和 state 从数据库中获取数据。在 Page_Load() 上，我将后端代码中的菜单项构造为 HTML 字符串，以供语义下拉菜单加载和显示菜单项。每次我改变国家时它都很好。但是每次重新加载整个页面感觉都不好。

现在，我正在尝试仅刷新状态下拉列表（语义下拉列表）而不重新加载页面。 因此，我将 asp: dropdownlist 控件放置在 asp: 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() 中尝试过这种初始化，但没有奏效。 我搜索了文章并尝试了建议的选项，例如再次初始化下拉列表，(.ui.dropdown).dropdown("refresh") 等。没有解决问题。

谁能给我一些解决这个问题的想法？

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>