An AJAX-based two-level linkage with jquery under ASP.

A recent project to achieve a two-level linkage effect. Background: Through the choice of the college, linkage of professional options. Initially want to use Microsoft's control to achieve Ajax effect, but the DropDownList control will automatically trigger postback, in the background is not control at all, so abandon this scheme, with jquery to achieve Ajax effect. Directly on the code, simple and intuitive.

1. Front-end page (this gives the page two-level linkage, respectively, two select)

<select name="xsxy" id="xsxy">                   < option>--Please select the Academy name--</option></Select>     <select name="  Xszy "id="xszy">                    <option>--Please select professional name--</option ></Select

View Code

2. The corresponding jquery code

$(function () {        //Ajax Loading Note path, Professional post parameters and college differences, note$.post (".. /.. /handler/xyzyhandler.ashx ", {" Action ":" Getxydata "},function(data, status) {if(Status! = "Success") {                $("#xsxy"). Append ("<option> Loading College error </option>"); }            Else if(data = "NoData")) {                $("#xsxy"). Append ("<option> temporarily no data </option>"); }            Else {                varOptions =$.parsejson (data);  for(vari = 0; i < options.length; i++) {                    varoption =Options[i]; $("#xsxy"). Append ("<option value=" "+ Option.opvalue +" ' > "+ option.optext +" </option> ");//pay attention to the option wording here.                }            }        }); //achieve professional linkage when the college changes$ ("#xsxy"). Change (function() {$.post (".. /.. /handler/xyzyhandler.ashx ", {" Action ":" Getzydata "," Xyid ": $ ( This). Val ()},function(data, status) {if(Status! = "Success") {                    $("#xszy"). Append ("<option> Load Professional error </option>"); }                Else if(data = "NoData")) {                    $("#xszy"). Append ("<option> temporarily no data </option>"); }                Else {                    $("#xszy"). empty (); $("#xszy"). Append ("<option>--Please select Professional name--</option>")                    varOptions =$.parsejson (data);  for(vari = 0; i < options.length; i++) {                        varoption =Options[i]; $("#xszy"). Append ("<option value=" + Option.opvalue + ">" + option.optext + "</option>");        }                                   }            }); });

View Code 

3. Its corresponding ashx file

 Public voidProcessRequest (HttpContext context) {context. Response.ContentType="Text/plain"; stringAction = context. request["Action"]; XYZYGL Xzgl=NewXyzygl (); //Processing College            if(Action = ="Getxydata") {DataTable result=Xzgl.                                   Xyzygl_getxy (); if(result.) Rows.Count = =0) {context. Response.Write ("NoData"); }                Else{List<OptionContent> list =NewList<optioncontent>();  for(inti =0; I < result. Rows.Count; i++)                    {                        stringXYMC = result. rows[i]["XYMC"].                        ToString (); stringXyid = result. rows[i]["Xyid"].                        ToString (); List. ADD (NewOptioncontent () {opvalue = Xyid, Optext =XYMC}); }                                        //This is more flexible with JSON processing, where data is added as objects, and data is represented as attributes, so that the foreground is easier to use with the dataJavaScriptSerializer JSS =NewJavaScriptSerializer (); Context. Response.Write (JSS.                                  Serialize (list)); }            }            Else if(Action = ="Getzydata")            {                stringXyid = context. request["Xyid"]; DataTable result=Xzgl.                Xyzygl_getzy (Xyid); if(result.) Rows.Count = =0) {context. Response.Write ("NoData"); }                Else{List<OptionContent> list =NewList<optioncontent>();  for(inti =0; I < result. Rows.Count; i++)                    {                        stringZYMC = result. rows[i]["ZYMC"].                        ToString (); stringZyid = result. rows[i]["Zyid"].                        ToString (); List. ADD (NewOptioncontent () {opvalue = Zyid, Optext =ZYMC}); } JavaScriptSerializer JSS=NewJavaScriptSerializer (); Context. Response.Write (JSS.                Serialize (list)); }            }        }         Public BOOLisreusable {Get            {                return false; }        }         Public classoptioncontent { Public stringOpvalue {Get;Set; }  Public stringOptext {Get;Set; } }    }

View Code

Description

1. The College and professional processing documents are written in one, and the parameters of the post are processed accordingly. 

    2. The data results are JSON, and the data results are encapsulated in the object, which makes processing the data more flexible.

    3. Object creation, directly give the property, steal lazy, can actually use parameters to build the object, and then give the set and get method.

    4. The foreground value, through the JSON to obtain, pay attention to see the code.

    5. The College and the professional values obtained from the database, specific details, are not given here, but the reader should be able to understand.

    6.$.post parameters, preferably ashx corresponding to the view

An AJAX-based two-level linkage with jquery under ASP.