求.net Ajax无刷新dropdownlist两级或三级联动代码,数据是从数据库绑定。
我在做联动无刷新,但是一直没有好的代码,我想点country,然后出现city,然后点city,就跳转到city页面,同时,还有一个dropdownlist用来绑定酒店,一跳转到city页面,下面的dropdownlist马上绑定city下的所有酒店。
能不能做到点country,出现city的时候,页面不刷新,只有点击city的时候,跳转city页面才刷新,同时传city的ID,然后下一个dropdownlist获取city的ID ,同时绑定出所有的酒店。
听起来有点绕口,大家给点建议,或者有好的代码,发给我,学习啊,谢谢,
[解决办法]
3级联动无刷新是吧
可以用JS。。
3级联动 无刷新的例子好多。
JS 省市联动
这个也可以
[解决办法]
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:DropDownList ID="ddlLB" runat="server" Width="15%" AutoPostBack="True" OnSelectedIndexChanged="ddlLB_SelectedIndexChanged">
</asp:DropDownList>
<asp:DropDownList ID="ddlChild" runat="server" Width="20%">
</asp:DropDownList>
</ContentTemplate>
</asp:UpdatePanel>
</div>
protected void ddlLB_SelectedIndexChanged(object sender, EventArgs e)
{
if(this.ddlLB.SelectedValue!=null)
{
BindChild(this.ddlLB.SelectedValue);
}
}
[解决办法]
利用ajax控件CascadingDropDown + webservice
前台代码:
<ajaxToolkit:CascadingDropDown ID="CascadingDropDown1" runat="server" TargetControlID="provinceDr"
ServicePath="GetDLDetailInfo.asmx" ServiceMethod="GetProvince" Category="province"
PromptValue="0" ParentControlID="" LoadingText="加载省份.." PromptText="请选择省份">
</ajaxToolkit:CascadingDropDown>
<ajaxToolkit:CascadingDropDown ID="CascadingDropDown2" runat="server" TargetControlID="cityDr"
ServicePath="GetDLDetailInfo.asmx" ServiceMethod="GetCityByProvince" Category="city"
ParentControlID="provinceDr" LoadingText="加载城市.." PromptText="请选择城市">
</ajaxToolkit:CascadingDropDown>
<ajaxToolkit:CascadingDropDown ID="CascadingDropDown3" runat="server" TargetControlID="areaDr"
ServicePath="GetDLDetailInfo.asmx" ServiceMethod="GetAreaByCity" Category="area"
ParentControlID="cityDr" LoadingText="加载地区.." PromptText="请选择地区">
</ajaxToolkit:CascadingDropDown>
webservice中对应方法:
using System;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Data;
using System.Collections.Generic;
using System.Collections.Specialized;
using DataAccess;
using AjaxControlToolkit;
using BLL;
/// <summary>
/// GetDLDetailInfo 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class GetDLDetailInfo : System.Web.Services.WebService
{
private DataTable _myTable;
private province _myProvinceOper = new province();
private List<CascadingDropDownNameValue> _values;
public GetDLDetailInfo()
{
//如果使用设计的组件,请取消注释以下行
//InitializeComponent();
}
[WebMethod]
public CascadingDropDownNameValue[] GetProvince(string knownCategoryValues, string category)
{
_myTable = _myProvinceOper.SelectAllProvince();
_values = new List<CascadingDropDownNameValue>();
foreach (DataRow _r in _myTable.Rows)
{
_values.Add(new CascadingDropDownNameValue(_r["province"].ToString(), _r["provinceID"].ToString()));
}
return _values.ToArray();
}
[WebMethod]
public CascadingDropDownNameValue[] GetCityByProvince(string knownCategoryValues, string category)
{
StringDictionary kv = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);
int _provinceID;
if (!kv.ContainsKey("province")
[解决办法]
!Int32.TryParse(kv["province"], out _provinceID))
{
return null;
}
_myTable = _myProvinceOper.SelectAllCity(_provinceID);
_values = new List<CascadingDropDownNameValue>();
foreach (DataRow _r in _myTable.Rows)
{
_values.Add(new CascadingDropDownNameValue(_r["city"].ToString(), _r["cityID"].ToString()));
}
return _values.ToArray();
}
[WebMethod]
public CascadingDropDownNameValue[] GetAreaByCity(string knownCategoryValues, string category)
{
StringDictionary kv = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);
int _cityID;
if (!kv.ContainsKey("city")
[解决办法]
!Int32.TryParse(kv["city"], out _cityID))
{
return null;
}
_myTable = _myProvinceOper.SelectAllArea(_cityID);
_values = new List<CascadingDropDownNameValue>();
foreach (DataRow _r in _myTable.Rows)
{
_values.Add(new CascadingDropDownNameValue(_r["area"].ToString(), _r["areaID"].ToString()));
}
return _values.ToArray();
}
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
namespace WebUI.Append
{
public class Append
{
public override string ToString()
{
StringBuilder html = new StringBuilder();
#region --省市区联动
html.Append("<script type='text/javascript'>");
html.Append("function getprovince(id)\n");
html.Append("{\n");
html.Append("$(".province").html("<option>加载中...</option>");\n");
html.Append("$(".city").html("<option value='0'>选择城市</option>");\n");
html.Append("$.ajax({\n");
html.Append("type:"get",\n");
html.Append("url:"/page/Base/ajax/GetProvince.ashx",\n");
html.Append("data:encodeURI("id="+id),\n");
html.Append("dataType:"html",\n");
html.Append("success:function(data){\n");
html.Append("$(".province").html(data);\n");
html.Append("},\n");
html.Append("error:function(data){\n");
html.Append("alert(data);\n");
html.Append("}\n");
html.Append("});\n");
html.Append("}\n");
html.Append("\n");
html.Append("function getCity(id)\n");
html.Append("{\n");
html.Append("//清空城市和区县列表\n");
html.Append("$(".city").html("<option>加载中...</option>");\n");
html.Append("$(".district").html("<option value='0'>选择区县</option>");\n");
html.Append("$.ajax({\n");
html.Append("type:"get",\n");
html.Append("url:"/page/Base/ajax/Getcity.ashx",\n");
html.Append("data:"id="+id,\n");
html.Append("dataType:"html",\n");
html.Append("success:function(data){\n");
html.Append("$(".city").html(data);\n");
html.Append("},\n");
html.Append("error:function(data){\n");
html.Append("alert(data);\n");
html.Append("}\n");
html.Append("});\n");
html.Append("}\n");
html.Append("\n");
html.Append("function getDistrict(id)\n");
html.Append("{\n");
html.Append("$(".district").html("<option>加载中...</option>");\n");
html.Append("$.ajax({\n");
html.Append("type:"get",\n");
html.Append("url:"/page/Base/ajax/GetDistrict.ashx",\n");
html.Append("data:"id="+id,\n");
html.Append("dataType:"html",\n");
html.Append("success:function(data){\n");
html.Append("$(".district").html(data);\n");
html.Append("},\n");
html.Append("error:function(data){\n");
html.Append("alert(data);\n");
html.Append("}\n");
html.Append("});\n");
html.Append("}\n");
html.Append("</script>");
html.Append("<table style='width:150px;'>");
List<Model.Area> areas = new BLL.Area().GetAllList();
html.Append("<tr>");
html.Append("<td>");
//html.Append("大区");
html.Append("<select name='area' class='area' onchange='getprovince($(this).val())'>");
html.Append("<option value='0'>选择大区</option >");
foreach (Model.Area row in areas)
{
html.Append("<option value='" + row.AreaID + "'>" + row.AreaName + "</option>");
}
html.Append("</select>");
html.Append("</td>");
html.Append("<td>");
html.Append("<select name='province' class='province' onchange='getCity($(this).val())'>");
html.Append("<option value='0'>选择省份</option >");
html.Append("</select>");
html.Append("</td>");
html.Append("<td>");
//html.Append("城市");
html.Append("<select name='city' class='city' onchange='getDistrict($(this).val())'>");
html.Append("<option value='0'>选择城市</option>");
html.Append("</select>");
html.Append("</td>");
html.Append("<td>");
//html.Append("区县");
html.Append("<select name='district' class='district'>");
html.Append("<option value='0'>选择区县</option>");
html.Append("</select>");
html.Append("</td>");
html.Append("</tr>");
html.Append("</table>");
return html.ToString();
#endregion
}
}
}
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class GetProvince : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/html";
string id = context.Request.QueryString["id"];
if (id == null) return;
List<Model.Province> provinces = new BLL.Province().GetList("", "AreaID='" + id + "'", "");
context.Response.Write("<option value='0'>选择省份</option>");
foreach (Model.Province province in provinces)
{
context.Response.Write("<option value='" + province.ProvinceID + "'>");
context.Response.Write(province.ProvinceName);
context.Response.Write("</option>");
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
<td>
<%=new WebUI.Append.Append().ToString()%>
</td>
[解决办法]
在省份的页面把这2个放在updatepannel里
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True"
onselectedindexchanged="DropDownList1_SelectedIndexChanged">
</asp:DropDownList>
<asp:DropDownList ID="DropDownList2" runat="server"
onselectedindexchanged="DropDownList2_SelectedIndexChanged">
</asp:DropDownList>
省份页面的load事件
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
this.DropDownList1.Items.Add(new ListItem("安徽", "1"));
this.DropDownList1.Items.Add(new ListItem("浙江", "2"));
this.DropDownList1.Items.Add(new ListItem("江苏", "3"));
//1,2,3 代表的是你数据库里的省份的ID
}
}
省份页面的2个DropDownList事件
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
string value = this.DropDownList1.SelectedItem.Value.ToString();
this.DropDownList2.Items.Clear();
this.DropDownList2.Items.Add(new ListItem(value, value));
//第二个value 是城市的ID
}
protected void DropDownList2_SelectedIndexChanged(object sender, EventArgs e)
{
string ctID = this.DropDownList2.SelectedItem.Value.ToString();
Response.Redirect("city.aspx?id=" + ctID);
//然后在city.aspx页面放一个DropDownList3, 在city页面首次加载的时候写如下代码,绑定DropDownList3
//Resquest.QueryString["id"] 得到id,然后在根据id查询 再绑定就可以了
//this.DropDownList3.DataSource=dt(查询的结果);
//this.DropDownList3.DataTextField="显示的字段";
//this.DropDownList3.DataValueField="ID";
//this.DropDownList3.DataBind();
}
城市那个页面你自己做下吧 不知道能不能帮到你