级联下拉列表而无需在asp.net中重新加载页面

时间:2013-10-23 14:57:50

标签: c# javascript asp.net ajax ajaxcontroltoolkit

您好我正在开发一个asp.net Web应用程序,因为我正在创建一个注册表单。在注册表单页面上,我有三个名为国家,州,城市的下拉列表。 因此,当用户选择任何国家/地区时,该国家/地区的州将显示在州下拉列表中,当用户从州下拉列表中选择州时,他可以在下拉列表中查看城市列表。

我已实现了该功能,但当用户在下拉列表中选择值时,会发生回发。 在我的情况下,我不想在用户选择国家或州时重新加载页面,所以我尝试使用ajax工具包实现相同的功能。但是我无法使用ajax实现相同的功能。

所以简而言之我的问题是:从asp.net的dropdownlist中选择国家,州和城市而不重新加载页面。

我在这里给你aspx部分。

请帮帮我。

CountryDropDown

<asp:DropDownList ID="DropDownListCountry" runat="server" Enabled="false"  
        OnSelectedIndexChanged="DropDownListCountry_OnSelectedIndexChanged" 
        AutoPostBack ="false">
     <asp:ListItem>India</asp:ListItem>
     <asp:ListItem>Other</asp:ListItem>
</asp:DropDownList>

StateDropDown

<asp:UpdatePanel ID="UpdatePanel1" runat="server" >
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="DropDownListCountry" EventName="OnSelectedIndexChanged" />
    </Triggers>
    <ContentTemplate>
        <asp:DropDownList runat="server" ID="DropDownListState"  Enabled="false"
           OnSelectedIndexChanged="DropDownListState_OnSelectedIndexChanged">
        </asp:DropDownList>
    </ContentTemplate>
</asp:UpdatePanel>

2 个答案:

答案 0 :(得分:0)

哇你哇哇哇哇哇哇哇哇哇哇哇哇哇! 但我尽力尽力帮助。首先,应该像这样定义第一个DDL:

<asp:DropDownList ID="Contries" runat="server" AutoPostBack="true" OnSelectedIndexChanged="Contries_SelectedIndexChanged">
    <asp:ListItem Text="country1" />
    <asp:ListItem Text="country2" />
</asp:DropDownList>

第二次DDL:

   <asp:UpdatePanel runat="server" >
    <ContentTemplate> 
        <asp:DropDownList ID="States" runat="server" AutoPostBack="true">
    <asp:ListItem Text="state1" />
    <asp:ListItem Text="state2" />


</asp:DropDownList>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="Contries" EventName="OnSelectedIndexChanged" />
    </Triggers>
</asp:UpdatePanel>

等等,在DDL中自动回发必须为true,后面应该执行异步回发,

尝试逐个删除DDL,然后从2开始,然后继续前进。

答案 1 :(得分:0)

首先创建一个Web服务,以检索下拉列表中的数据

创建Web服务:CascadingDropdown.asmx 在您的CascadingDropdown.asmx.cs中编写代码以从数据库中检索国家,州和城市的数据,看看这是我的工作方式,您可以执行类似的操作,我已经使用实体框架从数据库中获取数据。

    [WebMethod]
    public CascadingDropDownNameValue[] FetchCountries()
    {
        GetLookupResponse countryLookupResponse = commonService.GetLookup("Country");
        List<CascadingDropDownNameValue> countries = new List<CascadingDropDownNameValue>();
        foreach (var dbCountry in countryLookupResponse.LookupItems)
        {
            string countryID = dbCountry.ID.ToString();
            string countryName = dbCountry.Description.ToString();
            countries.Add(new CascadingDropDownNameValue(countryName, countryID));
        }
        return countries.ToArray();
    }

    [WebMethod]
    public CascadingDropDownNameValue[] FetchStates(string knownCategoryValues)
    {
        int countryID;
        StringDictionary strCountries = AjaxControlToolkit.CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);
        countryID = Convert.ToInt32(strCountries["Country"]);
        GetLookupResponse stateLookupResponse = commonService.GetLookup("State");
        List<CascadingDropDownNameValue> states = new List<CascadingDropDownNameValue>();
        foreach (var dbState in stateLookupResponse.LookupItems.Where(id => id.DependencyID == countryID))
        {
            string stateID = dbState.ID.ToString();
            string stateName = dbState.Description.ToString();
            states.Add(new CascadingDropDownNameValue(stateName, stateID));
        }
        return states.ToArray();
    }

    [WebMethod]
    public CascadingDropDownNameValue[] FetchCities(string knownCategoryValues)
    {
        int stateID;
        StringDictionary strStates = AjaxControlToolkit.CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);
        stateID = Convert.ToInt32(strStates["State"]);
        GetLookupResponse cityLookupResponse = commonService.GetLookup("City");
        List<CascadingDropDownNameValue> cities = new List<CascadingDropDownNameValue>();
        foreach (var dbCity in cityLookupResponse.LookupItems.Where(id => id.DependencyID == stateID))
        {
            string cityID = dbCity.ID.ToString();
            string cityName = dbCity.Description.ToString();
            cities.Add(new CascadingDropDownNameValue(cityName, cityID));
        }
        return cities.ToArray();
    }

然后在aspx文件中,您需要在下面页面的顶部注册AjaxControlToolkit

,如果尚未安装AjaxControlToolkit,请从Nuget软件包中进行安装。     

然后输入您的下拉列表代码:

<label class="col-sm-3 col-form-label required">Country</label>
<div class="col-sm-9">
    <asp:DropDownList ID="ddlCountry" runat="server" CssClass="form-control"></asp:DropDownList>
    <ajax:CascadingDropDown ID="csdCountry" runat="server"
        Category="Country"
        TargetControlID="ddlCountry"
        LoadingText="Loading Countries..."
        ServiceMethod="FetchCountries"
        ServicePath="~/CascadingDropdown.asmx"></ajax:CascadingDropDown>
</div>

<label class="col-sm-3 col-form-label required">State</label>
<div class="col-sm-9">
    <asp:DropDownList ID="ddlState" runat="server" CssClass="form-control"></asp:DropDownList>
    <ajax:CascadingDropDown ID="csdState" runat="server"
        ParentControlID="ddlCountry"
        Category="State"
        TargetControlID="ddlState"
        LoadingText="Loading States..."
        ServiceMethod="FetchStates"
        ServicePath="~/CascadingDropdown.asmx"></ajax:CascadingDropDown>
</div>

<label class="col-sm-3 col-form-label required">City</label>
<div class="col-sm-9">
    <asp:DropDownList ID="ddlCity" runat="server" CssClass="form-control"></asp:DropDownList>
    <ajax:CascadingDropDown ID="csdCity" runat="server"
        ParentControlID="ddlState"
        Category="City"
        TargetControlID="ddlCity"
        LoadingText="Loading Cities..."
        ServiceMethod="FetchCities"
        ServicePath="~/CascadingDropdown.asmx"></ajax:CascadingDropDown>
</div>

我正在做的是,当我们选择国家/地区作物国家/地区下拉列表时,我将国家/地区ID传递到我们的CascadingDropdown.asmx.cs网络服务中的FetchStates网络方法中,以基于国家/地区ID获取国家/地区,城市,将州ID传递给FetchCities网络方法以获取城市。

希望有帮助。