前台JS(Jquery)调用后台方法无刷新级联菜单示例

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

下面是做的一个前台用JQUERY，AJAX调用后台方法做的无刷新级联菜单

http://www.dtan.so

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" mce_src="js/jquery-1.3.2-vsdoc.js" type="text/javascript"></mce: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>

<%@ 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" mce_src="js/jquery-1.3.2-vsdoc.js" type="text/javascript"></mce: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
}

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也很好用

示例下载地址：http://download.csdn.net/source/2758448

前台JS(Jquery)调用后台方法无刷新级联菜单示例的更多相关文章

AJAX JQuery 调用后台方法返回值（不刷新页面）
AJAX JQuery 调用后台方法返回值(不刷新页面) (1)无参数返回值(本人亲试返回结果不是预期结果) javascript方法: $(function () { //无 ...
jQuery调用后台方法
前台: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.as ...
<asp:TextBox><asp:LinkButton><input button>调用后台方法后刷新页面
<asp:TextBox><asp:LinkButton>服务器控件,执行后台方法,会回调加载js,相当于页面重新加载,刷新页面 <input button>不能直 ...
JS前端调用后台方法
//JS前端代码function Exportqmdltb() { var areavalue= GetQmdltmValue(); $.ajax({ type: "post", ...
jQuery 调用后台方法（net）
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs ...
JavaScript获取后台C#变量以及调用后台方法
http://www.educity.cn/develop/495493.html 有时需要在JavaScript中获取后台变量的值,来判断JavaScript的执行逻辑,或者需要调用C#后台方法获取 ...
asp.net如何在前台利用jquery Ajax调用后台方法
一 :最近因为帮同事开发项目使用到了asp.net,而我又想实现Ajax异步请求....从网上查询了一下资料之后,原来在asp.net中利用Ajax调用后台方法同样很简单,为了便于自己以后查看,特将此 ...
Asp.net中JQuery、ajax调用后台方法总结
通过上一篇文章实例的实现,整个过程当中学习到很多知识点,了解了Jquery.Ajax在asp.net中的运用,加以总结,其实原理都是一样的,理解了一种,其他的注意很少的区别就可以了.灵活运用: 1.有 ...
js调用后台方法（如果你能容忍执行的后台方法变成一个常量）
最近一直在做一个电话拨号的系统,系统不大,但是做的时间有点长了.其中用到了一个技术:js调用后台方法.解决这个问题花了不少时间,现如今仍然还有些不明白的地方,今天跟大家分享一下.真正明白的同学欢迎指正 ...

随机推荐

C#操作Word生成目录
OperateWord ow = new OperateWord(); Microsoft.Office.Interop.Word.ApplicationClass ss = ow.WordAppli ...
Effective C++ Item 37 绝不又一次定义继承而来的缺省參数值
本文为senlie原创,转载请保留此地址:http://blog.csdn.net/zhengsenlie 经验:绝对不要又一次而来的缺省參数值.由于缺省參数值都是静态绑定,而 virtual 函数 ...
SaundProgressBar
https://github.com/eltld/SaundProgressBar
ProgressCircular
https://github.com/eltld/ProgressCircular
DB2数据库性能优化介绍
DB2数据库性能优化介绍作者:chszs,转载需注明.博客主页:http://blog.csdn.net/chszs 前段时间,我从CSDN得到了这本书<DB2数据库性能调整和优化(第2版)& ...
boa安装
Boa 下载地址:http://www.boa.org/boa-0.94.13.tar.gz 1.解压生成Makefile tar xzf boa-0.94.13.tar.gz #解压 cd boa- ...
Java RESTful Web Service相关概念
原文地址:http://1.liangtao.sinaapp.com/?p=647 接上一篇文章REST|RESTful初步认识:p=639">http://1.liangtao.si ...
BootStrap 的随笔一二三
正在学习中待补充 ..为自己日后查看留存,不喜误看特别鸣谢,小霖,小涛,小海... Bootstrap总结可实现的页面效果导航.格栅分为12份,焦点图,按钮,响应式,下拉按钮,选项卡等 boot ...
从ext2文件系统上读出超级块
概述本篇博客中,我们将仔细分析如何从格式化为ext2文件系统的磁盘中读取超级块并填充内存超级块结构,每次将一个格式化了ext2文件系统的磁盘(分区)挂载到挂载点的时候会调用该方 ...
项目源码--Android类似酷狗音乐播放器
下载源码知识技能概要: 1.音乐文件的扫描与管理 2.音频流的解码 3. UI控件的综合使用 4.播放列表方式管理 5.随机播放方式 6.源码带详细的中文注释 ...... 详细介绍 1. 音乐文件 ...

前台JS(Jquery)调用后台方法 无刷新级联菜单示例

前台JS(Jquery)调用后台方法 无刷新级联菜单示例的更多相关文章

随机推荐

热门专题

前台JS(Jquery)调用后台方法无刷新级联菜单示例

前台JS(Jquery)调用后台方法无刷新级联菜单示例的更多相关文章