前台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也很好用
源码下载
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也很好用
源码下载
下一篇： gridview行索引获取方法及实现代码