首页 新闻 搜索 专区 学院

如何在aspx页面实现无刷新省市联动的用户控件

0
悬赏园豆:10 [待解决问题]

写了一个省市联动的Web用户控件

代码如下:

 1 <%@ Control Language="C#" AutoEventWireup="true" CodeFile="WUCCity.ascx.cs" Inherits="WUCCity" %>
 2 
 3 
 4 <script src="Common.js" type="text/javascript"></script>
 5 <script  type="text/javascript" >
 6     //创建异步对象
 7     var xhr = false;
 8     window.onload = function () {
 9 
10         xhr = createXhr(); //创建异步对象
11         loadPros(); //加载省下拉框数据
12         document.getElementById("selP").onchange = selectePro; //为省下拉框指定 onchange事件
13 
14     }
15 
16     //根据省ID获得市下拉框数据
17     function selectePro() {
18         //获得省ID
19         var proId = document.getElementById("selP").value;
20         xhr.open("get", "WUCCity.ashx?type=c&pid=" + proId, true);
21         xhr.setRequestHeader("If-Modified-Since", "0");
22         xhr.onreadystatechange = function () {
23             if (xhr.readyState == 4) {
24                 if (xhr.status == 200) {
25                     var res = xhr.responseText;
26                     //将返回的json数组字符串 转成 js 数组对象
27                     var jsonArr = eval(res);
28                     var selCity = document.getElementById("selC");
29                     //alert("jsonArr=" + jsonArr[0].AName);
30                     selCity.options.length = 0;
31                     for (var i = 0; i < jsonArr.length; i++) {
32                         selCity.options[i] = new Option(jsonArr[i].AName, jsonArr[i].AID);
33                     }
34                 }
35             }
36         }
37         xhr.send(null);
38     }
39     //加载省数据
40     function loadPros() {
41 
42         xhr.open("get", "WUCCity.ashx?type=p", true);
43         xhr.setRequestHeader("If-Modified-Since", "0");
44         xhr.onreadystatechange = function () {
45             if (xhr.readyState == 4) {
46                 if (xhr.status == 200) {
47                     var res = xhr.responseText;
48                     //将返回的json数组字符串 转成 js 数组对象
49                     var jsonArr = eval(res);
50                     var selPro = document.getElementById("selP");
51                     //alert("jsonArr=" + jsonArr[0].AName);
52                     for (var i = 0; i < jsonArr.length; i++) {
53                         selPro.options[i] = new Option(jsonArr[i].AName, jsonArr[i].AID);
54                     }
55                 }
56             }
57         }
58         xhr.send(null);
59     }
60 
61 
62 </script>
63 
64 <span id="WUCCity">
65    省:<select id ="selP" style="width: 92px">
66     </select>
67     市:<select id="selC" style="width: 93px">
68     </select>
69  </span>
View Code

省市数据是用一般处理程序从数据库中取得的

一般处理程序的代码如下:

 1 <%@ WebHandler Language="C#" Class="WUCCity" %>
 2 
 3 using System;
 4 using System.Web;
 5 
 6 /// <summary>
 7 /// 输出省和市
 8 /// </summary>
 9 public class WUCCity : IHttpHandler {
10     BLL.AreaBLL bll = new BLL.AreaBLL();
11    
12     public void ProcessRequest (HttpContext context) {
13         context.Response.ContentType = "text/plain";
14         System.Text.StringBuilder sbHtml = new System.Text.StringBuilder();
15     string strType=context.Request.QueryString["type"];
16     if (strType=="p")//1.获取省数据,返回json数组格式字符串
17     {
18         
19         //查询数据库,获得 省集合
20             System.Collections.Generic.List<MODEL.Area> list = bll.GetProList();
21             sbHtml.Append("[");
22             foreach (MODEL.Area model in list)
23             {
24                 sbHtml.Append("{AID:" + model.AID + ",AName:'" + model.AName + "'},");
25             }
26             sbHtml.Remove(sbHtml.Length-1,1).Append("]");
27         
28         }
29         else if (strType=="c")//2.根据省ID获得市数据,返回json数组格式 字符串
30         
31         {
32             string proId=context.Request.QueryString["pid"];
33              //获得市数据
34             System.Collections.Generic.List<MODEL.Area> list = bll.GetCityList(proId);
35             sbHtml.Append("[");
36             foreach (MODEL.Area model in list)
37             {
38                 sbHtml.Append("{AID:" + model.AID + ",AName:'" + model.AName + "'},");
39             }
40             sbHtml.Remove(sbHtml.Length - 1, 1).Append("]"); 
41         }
42         
43          //最后输出 json格式数组字符串 到浏览器
44         context.Response.Write(sbHtml.ToString());
45     }
46         
47     
48  
49     public bool IsReusable {
50         get {
51             return false;
52         }
53     }
54 
55 }
View Code

请问我该如何将这个用户控件在aspx页面上实现功能,谢谢

小小一书童的主页 小小一书童 | 初学一级 | 园豆:140
提问于:2014-03-06 11:14
< >
分享
所有回答(4)
0

Asp.net控件不会做,我只会用前台JS实现``,

实现方法总归来收有2个方向,1.把所有数据都加载到本地,2.把省份数据加载到本来,再根据用户的选择加载市级数据

1的好处是用户选择省市的时候速度块,但是打开页面会很慢,2.就是相反的``而且2方法会发出多次请求,对服务器来说是个负担.

吴瑞祥 | 园豆:28937 (高人七级) | 2014-03-06 11:23
0

你不已经做成用户控件了吗,现在直接在aspx上用已写好的用户控件不就行了吗?

关于怎么使用用户控件在网上找找吧!

junjieok | 园豆:779 (小虾三级) | 2014-03-06 11:31
0

是在aspx页面使用用户控件的问题么?你在aspx页面的设计

wolfy | 园豆:2636 (老鸟四级) | 2014-03-06 13:18
0

这个东西,互联网一堆一堆的

lucika.zh | 园豆:59 (初学一级) | 2014-04-04 14:24
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册