I have been doing some website programs recently, and I often use multiple drop-down menu options. After reading the introduction, I started to use the AjaxPro control, and I feel that the effect is good. I have used MagicAjax before, but I forgot about it after not using it for a long time. The most troublesome thing is that it is more troublesome when working with virtual directories. Haha, there are many on the Internet, but novices are often not reminded of important points. Me too, so experts please ignore it. I saw that AjaxPro is relatively easy to use. This time I used 6.x, and the latest one is 7.x. I thought the 6.0 series was more convenient, so I chose it.
There are hints in important places, I believe it is easy to understand.
First add this contact point between <system.web> and </system.web> in web.config, as follows:
<system.web>
<!--for Ajaxnet-->
<httpHandlers>
<add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro.2"/>
</httpHandlers>
<!--Other settings-->
</system.web>
Then throw AjaxPro.2.dll into the bin folder and reference it.
It's better to send the code, it's too troublesome. The code below is from Default.aspx.cs.
using System;
using System.Data;
using System.Configuration;
using System.Data.OleDb;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default)); //Necessary
if(!IsPostBack)BindDc();
}
/**//// <summary>
/// Database connection http://www.downcodes.com
/// </summary>
/// <returns></returns>
public OleDbConnection myConn()
{
string ConnStr = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + System.Web.HttpContext.Current.Server.MapPath(ConfigurationManager.AppSettings["dbpath"]);
OleDbConnection conn = new OleDbConnection(ConnStr);
try
{
conn.Open();
return conn;
}
catch
{
throw;
}
}
/**//// <summary>
/// Get lower-level categories
/// </summary>
[AjaxPro.AjaxMethod]
public DataSet getNextClass(string cid)
{
//Because we don’t want the page to know the field name, so as txt, id as vol. If it is sql ser, you can use =
//The column name obtained by the page must be the same as this one and is case-sensitive. This is usually an easy place to overlook.
//So the secondary classification has not changed
string sql = @"select cname as txt,id as vol from webclass where parentid=" + cid;
try
{
return getDs(sql);
}
catch
{
//throw;
return null;
}
}
/**//// <summary>
/// Return a DataSet
/// </summary>
/// <param name="SQL"></param>
/// <returns></returns>
public DataSet getDs(string SQL)
{
OleDbConnection conn = myConn();
DataSet Ds = new DataSet();
OleDbDataAdapter Da = new OleDbDataAdapter(SQL, conn);
try
{
Da.Fill(Ds);
return Ds;
}
catch
{
return null;
//throw;
}
}
/**//// <summary>
/// //Data binding
/// </summary>
private void BindDc()
{
//first one
string sql = @"select * from webclass where Parentid=0";
ddl1.DataSource = getDs(sql);
ddl1.DataTextField = "cname";
ddl1.DataValueField = "id";
ddl1.DataBind();
if (ddl1.DataSource != null) ddl1.Attributes.Add("onchange", "showNext(this.options[selectedIndex].value,'ddl2');");
//You can first determine DropDownList.SelectedItem.Value
//Second one
sql = @"select * from webclass where parentid=" + ddl1.SelectedItem.Value;
ddl2.DataSource = getDs(sql);
ddl2.DataTextField = "cname";
ddl2.DataValueField = "id";
ddl2.DataBind();
//The third one
if (ddl2.DataSource != null) ddl2.Attributes.Add("onchange", "showNext(this.options[selectedIndex].value,'ddl3');");
sql = @"select * from webclass where parentid=" + ddl2.SelectedItem.Value;
ddl3.DataSource = getDs(sql);
ddl3.DataTextField = "cname";
ddl3.DataValueField = "id";
ddl3.DataBind();
}
}
default.aspx content:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.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 runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>AjaxPro realizes three-level linkage without refresh</title>
</head>
<script language="javascript" type="text/javascript">
<!--
//ACLOUD common JS functions
function getBid(s){
return document.getElementById(s);
}
function getBmc(s){
return document.getElementByName(s);
}
//Display category list
function showNext(sid,obj)
{
if(sid==null || sid=="" || sid.length<1)return;
var slt =getBid(obj);
var v = _Default.getNextClass(sid).value; // The name of the class
//alert(v);
//return;
if (v != null){
if(v != null && typeof(v) == "object" && v.Tables != null)
{
slt.length = 0;
slt.options.add(new Option("Please select",0));
//Added "Please select" mainly to trigger the onchange event
if(obj=="ddl2"){
getBid("ddl3").options.length=0;
getBid("ddl3").options.add(new Option("Please select",0));
}
for(var i=0; i<v.Tables[0].Rows.length; i++)
{
var txt = v.Tables[0].Rows[i].txt; //This place needs to be case-sensitive var vol = v.Tables[0].Rows[i].vol; //Follow the columns of the dataset table The names must be consistent slt.options.add(new Option(txt,vol));
}
}
}
return;
}
-->
</script>
<body>
<form id="form1" runat="server">
<div>
<table width="500" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="99"> </td>
<td width="401">
City<asp:DropDownList ID="ddl1" runat="server">
</asp:DropDownList>
Region<asp:DropDownList ID="ddl2" runat="server">
</asp:DropDownList>
Garden<asp:DropDownList ID="ddl3" runat="server">
</asp:DropDownList></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</form>
</body>
</html>
Related documents