关闭

另类无刷新、联动下拉列表框(二级+XMLHttpRequest)

1317人阅读 评论(0) 收藏 举报

二级的联动下拉列表,从思路上讲,大致分下列几步:

一:触发第一个下拉列表的onchange事件。

二:异步调用处理页后,会返回处理请求后的信息(服务器端用Response.Write方法写入要返回的字符串,客户端用responseText属性接收字符串。

三:用得到的字符串处理后更新第二个下拉列表框

主要代码如下:

一:建立读取XML的类,这里也可以是数据库的查询

public class ReadXmlCS
 {
  public const string k = "|";
  public const string s = ",";
  public ReadXmlCS()
  {
   //
   // TODO: 在此处添加构造函数逻辑
   //
  }

  public static string QueryXml(string filename,string querystr)// @"//Pro_class/@id"
  {
   System.Text.StringBuilder sb = new System.Text.StringBuilder();
   System.Xml.XPath.XPathDocument myXPathDocument = new System.Xml.XPath.XPathDocument(filename);
   System.Xml.XPath.XPathNavigator myXPathNavigator = myXPathDocument.CreateNavigator();
   try
   {
    System.Xml.XPath.XPathNodeIterator myXPathNodeIterator = myXPathNavigator.Select(querystr);
    while(myXPathNodeIterator.MoveNext())
    {
     sb.Append(myXPathNodeIterator.Current.Value.ToString() +",");//把属性值添加到字符串末尾,添加分组字符“,”
     System.Xml.XPath.XPathNavigator myXPathNavigator2 = myXPathNodeIterator.Current.Clone();//克隆当前接点
//     while(myXPathNavigator2.MoveToNextAttribute())//移动指针到下一个属性
//     {
//      sb.Append(myXPathNavigator2.Value.ToString()+"|");//把属性值添加到字符串末尾,添加分组字符“|”
//     }
     myXPathNavigator2.MoveToNextAttribute();
     sb.Append(myXPathNavigator2.Value.ToString()+"|");
     
    }
    return sb.ToString();
   }
   catch{return null;}
  }

  public static void QueryXml(string filename,string querystr,System.Web.UI.WebControls.DropDownList dd)// @"//Pro_class/@id"
  {
   System.Xml.XPath.XPathDocument myXPathDocument = new System.Xml.XPath.XPathDocument(filename);
   System.Xml.XPath.XPathNavigator myXPathNavigator = myXPathDocument.CreateNavigator();
   try
   {
    System.Xml.XPath.XPathNodeIterator myXPathNodeIterator = myXPathNavigator.Select(querystr);
    while(myXPathNodeIterator.MoveNext())
    {
     System.Web.UI.WebControls.ListItem li = new System.Web.UI.WebControls.ListItem();
     li.Value = myXPathNodeIterator.Current.Value.ToString() ;//把属性值(id)添加到ListItem的“值”属性
     System.Xml.XPath.XPathNavigator myXPathNavigator2 = myXPathNodeIterator.Current.Clone();//克隆当前接点
//     while(myXPathNavigator2.MoveToNextAttribute())//移动指针到下一个属性
//     {
//      li.Text = myXPathNavigator2.Value.ToString();//把属性值(title)添加到ListItem的“文本”属性
//     }
     myXPathNavigator2.MoveToNextAttribute();
     li.Text = myXPathNavigator2.Value.ToString();
     dd.Items.Add(li);
    }
    
   }
   catch{}
  }

}

其中关键的步骤加了注释,其它的大家可以到MSDN上去查找。

 

二。实现 (WebForm8.aspx.cs页面):

  protected System.Web.UI.WebControls.DropDownList DropDownList2;
  protected System.Web.UI.WebControls.DropDownList Dropdownlist1;

  private void Page_Load(object sender, System.EventArgs e)
  {
   // 在此处放置用户代码以初始化页面
   string str = this.Request.QueryString["querychild"];
   if((str != null) && (str == "yes"))
   {
    string querystr = "//Pro_class[" + this.Request["parentid"] + "]/Pro_class_small/@id";
    string show = zlp.str.ReadXmlCS.QueryXml(@"D:/Inetpub/wwwroot/zlp/XmlData/ProductMenu.xml",querystr);
    this.Response.Write(show);
    this.Response.End();
   }

   if(!this.IsPostBack)
   {
    this.BindDropDownList();//加载页面时,填充第一个下拉列表框
   }
  }

  protected void BindDropDownList()
  {
   this.Dropdownlist1.Attributes.Add("onchange","javascript:XmlPost(this);"); //服务器端添加属性
   zlp.str.ReadXmlCS.QueryXml(@"D:/Inetpub/wwwroot/zlp/XmlData/ProductMenu.xml",@"//Pro_class/@id",this.Dropdownlist1);
  }

 

三:JS脚本(WebForm8.aspx页面)

不知道为什么,这里的JS脚本添加不进来,大家可以在事例下载中得到源码。

文章的结尾:

大家也可以把它添加到用户控件中或者是封装成自定义控件。

要是大家有更好的方法和建议,恳请通知我,欢迎指正,谢谢!

QQ:126083810

zlp8383178@163.com

事例演示:

http://j.thec.cn/zlp8383178/exmDropDownList/webform1.aspx

事例下载

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:34489次
    • 积分:524
    • 等级:
    • 排名:千里之外
    • 原创:13篇
    • 转载:8篇
    • 译文:0篇
    • 评论:9条
    最新评论