欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2024-03-04 17:15:53
前台用ajax直接调用后台方法,老有人发帖提问,没事做个示例 casmenu.aspx页面: 复制代码 代码如下: <%@ page language="c#" au...
前台用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也很好用
源码下载