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

时间:2021-10-04 14:26:19

前台用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 


要注意的地方我都有注释, 
当然前台调入后台方法远不止这一种,比如还有AJAXPRO也很好用
源码下载