级联下拉列表,无需在 asp.net 中重新加载页面
本文关键字:新加载 加载 下拉列表 net asp 级联 | 更新日期: 2023-09-27 18:36:45
嗨,我正在开发一个 asp.net Web 应用程序,因为我正在创建一个注册表。在注册表单页面上,我有三个下拉列表,分别命名为国家、州、城市。因此,当用户选择任何国家/地区时,该国家/地区的州将显示在州下拉列表中,当用户从州下拉列表中选择州时,他可以在下拉列表中看到城市列表。
我已经实现了该功能,但是当用户在下拉列表中选择值时,会发生回发。就我而言,我不想在用户选择国家/地区或州时重新加载页面,因此我尝试使用 ajax 工具包实现相同的功能。但是我无法使用 ajax 实现相同的功能。
简而言之,我的问题是:从 asp.net 的下拉列表中选择国家,州和城市,而无需重新加载页面。
在这里,我为您提供aspx部分。
请帮助我。
国家/地区下拉菜单
<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>
状态下拉列表
<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>
你设法弄得一团糟,解释出了什么问题......但我会尽力提供帮助。首先,第一个 DDL 应该这样定义:
<asp:DropDownList ID="Contries" runat="server" AutoPostBack="true" OnSelectedIndexChanged="Contries_SelectedIndexChanged">
<asp:ListItem Text="country1" />
<asp:ListItem Text="country2" />
</asp:DropDownList>
第二代 :
<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中为真,这应该进行异步回发,
尝试逐个删除 DDL,仅从 2 开始,然后继续前进。
首先创建一个 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 Web 服务中的 FetchStates 网络方法,以根据国家/地区 ID 获取州,城市也是如此,将州 ID 传递给 FetchCities 网络方法以获取城市。
希望对您有所帮助。