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

最新推荐文章于 2021-03-19 17:34:41 发布

qkqlqq0288

最新推荐文章于 2021-03-19 17:34:41 发布

阅读量548

点赞数

下面是做的一个前台用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>

CasMenu.aspx.cs

[csharp] view plain copy print ?

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