前臺(tái)用AJAX直接調(diào)用后臺(tái)方法，老有人發(fā)帖提問，沒事做個(gè)示例
CasMenu.aspx頁(yè)面：
復(fù)制代碼 代碼如下:
%@ 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--前臺(tái)JS(Jquery)調(diào)用后臺(tái)方法 級(jí)聯(lián)菜單/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() + '"}'; //此處參數(shù)名要注意和后臺(tái)方法參數(shù)名要一致
$.ajax({
type: "POST", //提交方式
url: "CasMenu.aspx/ShowCity", //提交的頁(yè)面/方法名
data: params, //參數(shù)（如果沒有參數(shù)：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(); //移除原有項(xiàng)
});
$("option value='0'>===請(qǐng)選擇===/option>").appendTo("#selCity"); //添加一個(gè)默認(rèn)項(xiàng)
$(eval("(" + msg + ")").d).appendTo("#selCity"); //將返回來(lái)的項(xiàng)添加到下拉菜單中
},
error: function(xhr, msg, e) {
alert("error");
}
});
});
});
/script>
/head>
body>
form id="form1" runat="server">
div>
Porschev--前臺(tái)JS(Jquery)調(diào)用后臺(tái)方法 級(jí)聯(lián)菜單br />
br />
select id="selPro" name="selPro">
%=strPro %>
/select>省(直轄市)
select id="selCity" name="selCity">
option value="0">===請(qǐng)選擇===/option>
/select>（市）
/div>
div id="tipsDiv">
/div>
/form>
/body>
/html>
CasMenu.aspx.cs
復(fù)制代碼 代碼如下:
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; //省份下拉項(xiàng)
public static string strCity = string.Empty; //城市下拉項(xiàng)
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(); //添加一個(gè)初始項(xiàng)
str.Append("option value=\"");
str.Append("0");
str.Append("\">");
str.Append("===請(qǐng)選擇===");
str.Append("/option>");
//循環(huán)追加省份下拉項(xiàng)
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) //方法是靜態(tài)的
{
StringBuilder strCi = new StringBuilder();
if (str == "0") //為初始項(xiàng)
{
strCi.Append("option value=\"");
strCi.Append("請(qǐng)選擇");
strCi.Append("\">");
strCi.Append("請(qǐng)選擇");
strCi.Append("/option>");
}
else
{
ListCasMenuModels.City> list = new CasMenuBLL.CityManager().GetAllByProId(Convert.ToInt32(str)); //根據(jù)省份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
}
要注意的地方我都有注釋，
當(dāng)然前臺(tái)調(diào)入后臺(tái)方法遠(yuǎn)不止這一種，比如還有AJAXPRO也很好用
源碼下載
您可能感興趣的文章:- javascript實(shí)現(xiàn)二級(jí)級(jí)聯(lián)菜單的簡(jiǎn)單制作
- js實(shí)現(xiàn)網(wǎng)頁(yè)多級(jí)級(jí)聯(lián)菜單代碼
- JavaScript實(shí)現(xiàn)級(jí)聯(lián)菜單的方法
- js出生日期 年月日級(jí)聯(lián)菜單示例代碼
- js 使用form表單select類實(shí)現(xiàn)級(jí)聯(lián)菜單效果
- ExtJS 設(shè)置級(jí)聯(lián)菜單的默認(rèn)值
- Ajax+Json 級(jí)聯(lián)菜單實(shí)現(xiàn)代碼
- 用php+javascript實(shí)現(xiàn)二級(jí)級(jí)聯(lián)菜單的制作
- js實(shí)現(xiàn)的全國(guó)省市二級(jí)聯(lián)動(dòng)下拉選擇菜單完整實(shí)例
- js實(shí)現(xiàn)城市級(jí)聯(lián)菜單的2種方法
