Foreground JS of jquery ajax calls background methods to implement the refresh free cascading menu example

2020-05-19 04:38:56
OfStack

The foreground directly calls the background method with AJAX, the old people post questions, nothing to do an example
CasMenu. aspx page:

 
<%@ 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-- The front desk JS(Jquery) Calling the background method   Cascading menu </title> 
<script src="js/jquery-1.3.2-vsdoc.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function() { 
$("#selPro").change(function() { // Province drop-down menu change The event  
var params = '{str:"' + $(this).val() + '"}'; // Note that the parameter name is the same as the background method parameter name 1 to  
$.ajax({ 
type: "POST", // submission  
url: "CasMenu.aspx/ShowCity", // Submitted page / The method name  
data: params, // Parameter (if no parameter: null )  
dataType: "text", // type  
contentType: "application/json; charset=utf-8", 
beforeSend: function(XMLHttpRequest) { 
$('#tipsDiv').text(" Being queried ..."); 
}, 
success: function(msg) { 
$('#tipsDiv').text(" The query is successful !"); 
$("#selCity option").each(function() { 
$(this).remove(); // Remove the original item  
}); 
$("<option value='0'>=== Please select a ===</option>").appendTo("#selCity"); // add 1 A default item  
$(eval("(" + msg + ")").d).appendTo("#selCity"); // Adds the returned item to the drop-down menu  
}, 
error: function(xhr, msg, e) { 
alert("error"); 
} 
}); 
}); 
}); 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
Porschev-- The front desk JS(Jquery) Calling the background method   Cascading menu <br /> 
<br /> 
<select id="selPro" name="selPro"> 
<%=strPro %> 
</select> province ( Municipalities directly under the central government ) 
<select id="selCity" name="selCity"> 
<option value="0">=== Please select a ===</option> 
</select> (city)  
</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; // The province drop-down term  
public static string strCity = string.Empty; // The city drop-down term  
protected void Page_Load(object sender, EventArgs e) 
{ 
if (!IsPostBack) 
{ 
} 
ShowPro(); 
} 
#region## Province drop-down list box  
///<summary> 
///  Province drop-down list box  
///</summary> 
///<returns></returns> 
public string ShowPro() 
{ 
StringBuilder str = new StringBuilder(); // You get the set of all the provinces  
List<CasMenuModels.Province> list = new CasMenuBLL.ProvinceManager().GetAllProvince(); // add 1 The initial term  
str.Append("<option value=\""); 
str.Append("0"); 
str.Append("\">"); 
str.Append("=== Please select a ==="); 
str.Append("</option>"); 
// Loop appends the province drop-down item  
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## City drop-down list box  
///<summary> 
///  City drop-down list box  
///</summary> 
///<param name="str"> provinces ID</param> 
///<returns></returns> 
[System.Web.Services.WebMethod()] 
public static string ShowCity(string str) // The method is static  
{ 
StringBuilder strCi = new StringBuilder(); 
if (str == "0") // As the initial  
{ 
strCi.Append("<option value=\""); 
strCi.Append(" Please select a "); 
strCi.Append("\">"); 
strCi.Append(" Please select a "); 
strCi.Append("</option>"); 
} 
else 
{ 
List<CasMenuModels.City> list = new CasMenuBLL.CityManager().GetAllByProId(Convert.ToInt32(str)); // According to the province ID You get the set of cities  
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 
}

I have notes on everything to note,
Of course, the foreground call background method is far from this one, such as AJAXPRO is also very useful
Download the source code