• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    前台JS(jquery ajax)调用后台方法实现无刷新级联菜单示例
    前台用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(); //得到所有省份集合
    ListCasMenuModels.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
    {
    ListCasMenuModels.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也很好用
    源码下载
    您可能感兴趣的文章:
    • javascript实现二级级联菜单的简单制作
    • js实现网页多级级联菜单代码
    • JavaScript实现级联菜单的方法
    • js出生日期 年月日级联菜单示例代码
    • js 使用form表单select类实现级联菜单效果
    • ExtJS 设置级联菜单的默认值
    • Ajax+Json 级联菜单实现代码
    • 用php+javascript实现二级级联菜单的制作
    • js实现的全国省市二级联动下拉选择菜单完整实例
    • js实现城市级联菜单的2种方法
    上一篇:asp.net jquery无刷新分页插件(jquery.pagination.js)
    下一篇:asp.net中在用ajax格式传递数据到aspx页面时出现乱码
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    前台JS(jquery ajax)调用后台方法实现无刷新级联菜单示例 前台,jquery,ajax,调用,后台,