Three-level linkage menu code for ajax implementation

Last Update:2017-01-13 Source: Internet

Author: User

Tags trim xmlns

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Similar three-level binding, but when you modify the information, bind and submit again, the value of the drop-down box will always disappear, or after the return, the value of the drop-down box will also disappear, I encountered the same problem in the past two days, so I made up my mind to solve this problem.

This example uses jquery + ashx.

The first case is only submitted.

<% @ Page Language = "C #" AutoEventWireup = "true" CodeFile = "Area. asp tutorial x. cs" Inherits = "Area" %>

<! 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">
<Title> No title page </title>
<Script type = "text/webpage effects" src = "js/jquery. min. js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
DoChange (null, "province", "0 ");
});
Function doChange (id, sub_id, id_value)
       {
$ ("#" + Sub_id). empty ();
Var p_id = id_value;
If (id! = Null)
          {
P_id = $ ("#" + id). val ();
          }
Var options = "<option value =" "> select </option> ";
If (p_id! = "")
          {
$. GetJSON ("GetArea. ashx", {pid: p_id}, function (data ){
$. Each (data. items, function (I, item ){
Options + = "<option value =" "+ item. value +" ">" + item. text + "</option> ";
});
$ ("#" + Sub_id). append (options );
});
          }
Else
          {
$ ("#" + Sub_id). append (options );
          }
       }
</Script>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Div>
<Select name = "province" id = "province" onchange = "doChange ('Vince ', 'city', '0','') "> </select> province
<Select name = "city" id = "city" onchange = "doChange ('city', 'area ', '0','') "> </select> city
<Select name = "area" id = "area"> </select> County
</Div>
</Form>
</Body>
</Html>

The three select statements are used to display the province, city, and County respectively.

The following code is GetArea. ashx.

<% @ WebHandler Language = "C #" Class = "GetArea" %>

Using System;
Using System. Web;
Using System. Data;
Using GeodonHelper;

Public class GetArea: IHttpHandler {

Public void ProcessRequest (HttpContext context ){
String startValue = "{" items ":[";
String endValue = "]}";
If (context. Request. QueryString ["pid"] = null |! ValidateHelper. IsInteger (context. Request. QueryString ["pid"]. ToString ()))
        {
Context. Response. Write (startValue + "{value:" ", text:" Parameter error "}" + endValue );
Context. Response. End ();
        }
Else
        {
Int pid = int. Parse (context. Request. QueryString ["pid"]. ToString ());

String middleValue = "";
// DBHelper is the database tutorial operation class library written by myself. Currently, MSSQL MySql, Access, and SQlite are supported. The code here can be replaced with your own database operation code.

DBHelper sh = DBHelper. CreateInstance ();

String SQL = "select Id, AreaName from Area where ParentId = @ pid ";
Sh. Params. Add ("@ pid", pid );
DataTable tb = sh. ExecuteDataTable (SQL );
Int count = tb. Rows. Count;
If (count = 0)
            {
Context. Response. Write (startValue + "{value:" ", text:" No data "}" + endValue );
Context. Response. End ();
            }
Else
            {
For (int I = 0; I <count; I ++)
                {
MiddleValue + = ", {value:" "+ tb. rows [I] ["Id"]. toString (). trim () + "", text: "" + tb. rows [I] ["AreaName"]. toString (). trim () + ""}";
                }

MiddleValue = middleValue. Substring (1 );
Context. Response. Write (startValue + middleValue + endValue );
Context. Response. End ();
            }
        }
    }

Public bool IsReusable {
Get {
Return true;
        }
    }

}

When submitting data, use Request ["province"], Request ["city"], Request ["area"]

Case 2: modify the information to obtain the province, city, and county numbers from the database, bind the three select statements, and then submit the data.

Aspx page

<% @ Page Language = "C #" AutoEventWireup = "true" CodeFile = "Edit. aspx. cs" Inherits = "Edit" %>

<! 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">
<Title> No title page </title>
<Script type = "text/javascript" src = "js/jquery. min. js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
GetProvince ();
});
Function GetProvince ()
       {
Var province = $ ("# province ");
Province. empty ();
Var options = "<option value =" "> select </option> ";
$. GetJSON ("GetArea. ashx", {pid: "0"}, function (data ){
$. Each (data. items, function (I, item ){
Options + = "<option value =" "+ item. value +" ">" + item. text + "</option> ";
});
Province. append (options );
Province. val ("<% = province %> ");
GetCity ();
});
       }
Function GetCity ()
       {
Var city = $ ("# city ");
City. empty ();
Var p_id = $ ("# province"). val ();
Var options = "<option value =" "> select </option> ";
If (p_id! = "")
          {
$. GetJSON ("GetArea. ashx", {pid: p_id}, function (data ){
$. Each (data. items, function (I, item ){
Options + = "<option value =" "+ item. value +" ">" + item. text + "</option> ";
});
City. append (options );
City. val ("<% = city %> ");
GetArea ();
});
          }
Else
          {
City. append (options );
GetArea ();
          }

       }
Function GetArea ()
       {
Var area = $ ("# area ");
Area. empty ();
Var p_id = $ ("# city"). val ();
Var options = "<option value =" "> select </option> ";
If (p_id! = "" & P_id! = Null)
          {
$. GetJSON ("GetArea. ashx", {pid: p_id}, function (data ){
$. Each (data. items, function (I, item ){
Options + = "<option value =" "+ item. value +" ">" + item. text + "</option> ";
});
Area. append (options );
Area. val ("<% = area %> ");
});
          }
Else
          {
Area. append (options );
          }
       }
</Script>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Div>
<Select name = "province" id = "province" onchange = "GetCity ()"> </select> province
<Select name = "city" id = "city" onchange = "GetArea ()"> </select> city
<Select name = "area" id = "area"> </select> County
</Div>
<Asp: Button ID = "btn_submit" runat = "server" Text = "submit Form"
Onclick = "btn_submit_Click"/> http://www.111cn.net
<Br/>
<Asp: Label ID = "lbl_msg" runat = "server"> </asp: Label>
</Form>
</Body>
</Html>

Because each select value must be assigned, and this value can only be assigned after ajax is loaded successfully, the method I take is to write three methods for loading provinces, cities, and counties respectively.

The following is the aspx. cs code

Using System;
Using System. Collections;
Using System. Configuration;
Using System. Data;
Using System. Linq;
Using System. Web;
Using System. Web. Security;
Using System. Web. UI;
Using System. Web. UI. HtmlControls;
Using System. Web. UI. WebControls;
Using System. Web. UI. WebControls. WebParts;
Using System. Xml. Linq;
Using GeodonHelper;

Public partial class Edit: System. Web. UI. Page
{
Public string province = "", city = "", area = "";
Protected void Page_Load (object sender, EventArgs e)
    {
If (Request. QueryString ["id"]! = Null)
        {
Province = "97 ";
City = "279 ";
Areas = "1469 ";
        }
    }
Protected void btn_submit_Click (object sender, EventArgs e)
    {
Lbl_msg.Text = Request ["province"] + "&" + Request ["city"] + "&" + Request ["area"];
    }
}

GetArea. ashx is used for ajax data loading.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More