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

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

示例下载地址一

      下载地址二

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏飞扬的花生

Html5上传插件封装

      前段时间将flash的上传控件替换成使用纯js实现的,在此记录 1.创建标签 <div class="camera-area" style="dis...

3398
来自专栏Porschev[钟慰]的专栏

Asp.Net开发等级星使用(Jquery Rating)

插件参数: rater第一个参数是AJAX提交的URL rater第二个参数 maxvalue:最大星数 curvalue:默认选择多少颗星 title:鼠标放...

2317
来自专栏Java成神之路

极光推送_总结_01_Java实现极光推送

1313
来自专栏c#开发者

MVC 5 Scaffolder + EntityFramework+UnitOfWork Pattern 代码生成工具集成Visual Studio 2013

MVC 5 Scaffolder + EntityFramework+UnitOfWork Pattern 代码生成工具 经过一个多星期的努力总算完成了单表,多...

45513
来自专栏马洪彪

C#获取AD域中计算机和用户的信息

如果你的计算机加入了某个AD域,则可以获取该域中所有的计算机和用户的信息。 所用程序集,需要.Net Framework 4。 添加程序集引用 System.D...

3727
来自专栏菩提树下的杨过

msmq发送速度的测试

在一些并发量比较高的"中小型"应用中,如果短期内有大量的数据插入,利用msmq中转是一个不错的选择(petshop就是这么干的),想知道msmq一秒钟内到底能...

2289
来自专栏ASP.NET MVC5 后台权限管理系统

ASP.NET MVC5+EF6+EasyUI 后台管理系统(58)-DAL层重构

前言:这是对本文系统一次重要的革新,很久就想要重构数据访问层了,数据访问层重复代码太多。主要集中增删该查每个模块都有,所以本次是为封装相同接口方法    如果你...

2956
来自专栏魏琼东

本人为巨杉数据库(开源NoSQL)写的C#驱动,支持Linq,全部开源,已提交github

     这些年在做AgileEAS.NET SOA 中间件平台的推广、技术咨询服务过程之中,特别是针对我们最熟悉的医疗行业应用之中,针对大数据分析,大并发性能...

1040
来自专栏游戏杂谈

Unity项目中文字的统一管理

一款游戏在研发初期就需要考虑多语言的问题,否则后期在进行多国语言版本时就面临着巨大的成本。鉴于之前页游的经验,其它同事设计出读取Excel的方式来管理所有的文字...

1191
来自专栏跟着阿笨一起玩NET

关于asp.net与winform导出excel的代码

一、asp.net中导出Execl的方法: 在asp.net中导出Execl有两种方法,一种是将导出的文件存放在服务器某个文件夹下面,然后将文件地址输出在...

1011

扫码关注云+社区

领取腾讯云代金券