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

浏览数：49 / 时间：2015年06月09日

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

 

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

  http://www.dtan.so

CasMenu.aspx页面：

 

[html] view plaincopyprint?
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="CasMenu.aspx.cs" Inherits="_Default" %>  
  2.   
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4. <html xmlns="http://www.w3.org/1999/xhtml">  
  5. <head id="Head1" runat="server">  
  6.     <title>Porschev--前台JS(Jquery)调用后台方法 级联菜单</title>  
  7.     <script src="js/jquery-1.3.2-vsdoc.js" mce_src="js/jquery-1.3.2-vsdoc.js" type="text/javascript"></mce:script>  
  8.     <script type="text/javascript">  
  9.         $(function() {              
  10.             $("#selPro").change(function() {    //省份下拉菜单的change事件                  
  11.                 var params = ‘{str:"‘ + $(this).val() + ‘"}‘;  //此处参数名要注意和后台方法参数名要一致                                 
  12.                 $.ajax({                      
  13.                     type: "POST",                   //提交方式                      
  14.                     url: "CasMenu.aspx/ShowCity",   //提交的页面/方法名                      
  15.                     data: params,                   //参数（如果没有参数：null）                      
  16.                     dataType: "text",               //类型                      
  17.                     contentType: "application/json; charset=utf-8",                      
  18.                     beforeSend: function(XMLHttpRequest) {                          
  19.                         $(‘#tipsDiv‘).text("正在查询...");                      
  20.                     },                     
  21.                     success: function(msg) {                                                  
  22.                         $(‘#tipsDiv‘).text("查询成功!");                         
  23.                         $("#selCity option").each(function() {                              
  24.                             $(this).remove();   //移除原有项                          
  25.                         });                         
  26.                         $("<option value=‘0‘>===请选择===</option>").appendTo("#selCity");   //添加一个默认项                          
  27.                         $(eval("(" + msg + ")").d).appendTo("#selCity");        //将返回来的项添加到下拉菜单中                      
  28.                     },                      
  29.                     error: function(xhr, msg, e) {                          
  30.                         alert("error");                      
  31.                     }                  
  32.                  });              
  33.             });         
  34.         });      
  35.         </script>  
  36. </head>  
  37. <body>  
  38.     <form id="form1" runat="server">  
  39.     <div>  
  40.         Porschev--前台JS(Jquery)调用后台方法 级联菜单<br />  
  41.         <br />  
  42.         <select id="selPro" name="selPro">  
  43.             <%=strPro %>  
  44.         </select>省(直辖市)  
  45.         <select id="selCity" name="selCity">  
  46.             <option value="0">===请选择===</option>  
  47.         </select>（市）  
  48.     </div>  
  49.     <div id="tipsDiv">  
  50.     </div>  
  51.     </form>  
  52. </body>  
  53. </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

 

[csharp] view plaincopyprint?
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7. using CasMenuModels;  
  8. using CasMenuBLL;  
  9. using System.Text;  
  10. public partial class _Default : System.Web.UI.Page   
  11. {      
  12.     public static string strPro = string.Empty;  //省份下拉项      
  13.     public static string strCity = string.Empty;  //城市下拉项      
  14.     protected void Page_Load(object sender, EventArgs e)      
  15.     {          
  16.         if (!IsPostBack)          
  17.         {                    
  18.         }          
  19.         ShowPro();     
  20.     }      
  21.      
  22.     #region##省份下拉列表框      
  23.     /// <summary>      
  24.     /// 省份下拉列表框     
  25.     /// </summary>      
  26.     /// <returns></returns>      
  27.     public string ShowPro()      
  28.     {          
  29.         StringBuilder str = new StringBuilder();        //得到所有省份集合          
  30.         List<CasMenuModels.Province> list = new CasMenuBLL.ProvinceManager().GetAllProvince();                       //添加一个初始项          
  31.         str.Append("<option value=\"");          
  32.         str.Append("0");          
  33.         str.Append("\">");          
  34.         str.Append("===请选择===");          
  35.         str.Append("</option>");                 
  36.          
  37.         //循环追加省份下拉项                  
  38.         foreach (CasMenuModels.Province p in list)          
  39.         {              
  40.             str.Append("<option value=\"");              
  41.             str.Append(p.ProvinceId);              
  42.             str.Append("\">");              
  43.             str.Append(p.ProvinceName);              
  44.             str.Append("</option>");                      
  45.         }          
  46.         return strPro = str.ToString();      
  47.     }      
  48.      
  49.     #endregion    #region##城市下拉列表框      
  50.     /// <summary>      
  51.     /// 城市下拉列表框      
  52.     /// </summary>      
  53.     /// <param name="str">省份ID</param>      
  54.     /// <returns></returns>      
  55.     [System.Web.Services.WebMethod()]      
  56.     public static string ShowCity(string str)   //方法是静态的      
  57.     {          
  58.         StringBuilder strCi = new StringBuilder();          
  59.         if (str == "0")     //为初始项          
  60.         {              
  61.             strCi.Append("<option value=\"");              
  62.             strCi.Append("请选择");              
  63.             strCi.Append("\">");              
  64.             strCi.Append("请选择");              
  65.             strCi.Append("</option>");          
  66.         }          
  67.         else          
  68.         {              
  69.             List<CasMenuModels.City> list = new CasMenuBLL.CityManager().GetAllByProId(Convert.ToInt32(str));   //根据省份ID得到城市集合              
  70.             foreach (City c in list)              
  71.             {                  
  72.                 strCi.Append("<option value=\"");                  
  73.                 strCi.Append(c.CityId);                  
  74.                 strCi.Append("\">");                  
  75.                 strCi.Append(c.CityName);                  
  76.                 strCi.Append("</option>");                             
  77.             }          
  78.         }          
  79.         return strCity = strCi.ToString();      
  80.     }      
  81.     #endregion     
  82. }  
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

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style log com src http java si html class style log com src http java si html

相关文章

随机文章

您可能还喜欢

您可能还喜欢