前台JS(jquery ajax)调用后台方法实现无刷新级联菜单示例

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

前台用AJAX直接调用后台方法，老有人发帖提问，没事做个示例
CasMenu.aspx页面：

 
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CasMenu.aspx.cs" Inherits="_Default" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head id="Head1" runat="server"> 
<title>Porschev--前台JS(Jquery)调用后台方法 级联菜单</title> 
<script src="js/jquery-1.3.2-vsdoc.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function() { 
$("#selPro").change(function() { //省份下拉菜单的change事件 
var params = '{str:"' + $(this).val() + '"}'; //此处参数名要注意和后台方法参数名要一致 
$.ajax({ 
type: "POST", //提交方式 
url: "CasMenu.aspx/ShowCity", //提交的页面/方法名 
data: params, //参数（如果没有参数：null） 
dataType: "text", //类型 
contentType: "application/json; charset=utf-8", 
beforeSend: function(XMLHttpRequest) { 
$('#tipsDiv').text("正在查询..."); 
}, 
success: function(msg) { 
$('#tipsDiv').text("查询成功!"); 
$("#selCity option").each(function() { 
$(this).remove(); //移除原有项 
}); 
$("<option value='0'>===请选择===</option>").appendTo("#selCity"); //添加一个默认项 
$(eval("(" + msg + ")").d).appendTo("#selCity"); //将返回来的项添加到下拉菜单中 
}, 
error: function(xhr, msg, e) { 
alert("error"); 
} 
}); 
}); 
}); 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
Porschev--前台JS(Jquery)调用后台方法 级联菜单<br /> 
<br /> 
<select id="selPro" name="selPro"> 
<%=strPro %> 
</select>省(直辖市) 
<select id="selCity" name="selCity"> 
<option value="0">===请选择===</option> 
</select>（市） 
</div> 
<div id="tipsDiv"> 
</div> 
</form> 
</body> 
</html> 

CasMenu.aspx.cs

复制代码代码如下:

 
using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
using CasMenuModels; 
using CasMenuBLL; 
using System.Text; 
public partial class _Default : System.Web.UI.Page 
{ 
public static string strPro = string.Empty; //省份下拉项 
public static string strCity = string.Empty; //城市下拉项 
protected void Page_Load(object sender, EventArgs e) 
{ 
if (!IsPostBack) 
{ 
} 
ShowPro(); 
} 
#region##省份下拉列表框 
///<summary> 
/// 省份下拉列表框 
///</summary> 
///<returns></returns> 
public string ShowPro() 
{ 
StringBuilder str = new StringBuilder(); //得到所有省份集合 
List<CasMenuModels.Province> list = new CasMenuBLL.ProvinceManager().GetAllProvince(); //添加一个初始项 
str.Append("<option value=\""); 
str.Append("0"); 
str.Append("\">"); 
str.Append("===请选择==="); 
str.Append("</option>"); 
//循环追加省份下拉项 
foreach (CasMenuModels.Province p in list) 
{ 
str.Append("<option value=\""); 
str.Append(p.ProvinceId); 
str.Append("\">"); 
str.Append(p.ProvinceName); 
str.Append("</option>"); 
} 
return strPro = str.ToString(); 
} 
#endregion #region##城市下拉列表框 
///<summary> 
/// 城市下拉列表框 
///</summary> 
///<param name="str">省份ID</param> 
///<returns></returns> 
[System.Web.Services.WebMethod()] 
public static string ShowCity(string str) //方法是静态的 
{ 
StringBuilder strCi = new StringBuilder(); 
if (str == "0") //为初始项 
{ 
strCi.Append("<option value=\""); 
strCi.Append("请选择"); 
strCi.Append("\">"); 
strCi.Append("请选择"); 
strCi.Append("</option>"); 
} 
else 
{ 
List<CasMenuModels.City> list = new CasMenuBLL.CityManager().GetAllByProId(Convert.ToInt32(str)); //根据省份ID得到城市集合 
foreach (City c in list) 
{ 
strCi.Append("<option value=\""); 
strCi.Append(c.CityId); 
strCi.Append("\">"); 
strCi.Append(c.CityName); 
strCi.Append("</option>"); 
} 
} 
return strCity = strCi.ToString(); 
} 
#endregion 
} 