首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > asp.net >

求.net Ajax无刷新dropdownlist两级或三级联动代码,数据是从数据库绑定。该如何解决

2013-01-04 
求.net Ajax无刷新dropdownlist两级或三级联动代码,数据是从数据库绑定。我在做联动无刷新,但是一直没有好

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


[解决办法]
给你一个我自己用的吧,调用就直接在ASPX页面New就OK了。
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
        }
    }
}


[解决办法]
我的方法是写在Header里的,下面是获取省的,市区的一样。
[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>

[解决办法]
在后台比较好书写。
11楼可以直接采用
[解决办法]
使用updatepanel 就可实现不刷新的效果,
[解决办法]
可以用asp.net ajax的updatepanel,挺容易实现的。
有时间还是看下js。


[解决办法]
在省份的页面把这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();
    }

城市那个页面你自己做下吧 不知道能不能帮到你

热点排行