ASP. net mvc + jquery implement Three-Level Association of Ajax drop-down box data

Source: Internet
Author: User

This is the first example of using jquery to implement data association at the city level 3! I have never used jquery before. In the webform development process, ASP is often used. net Ajax, ajaxpro + JavaScript, has never used the JS framework, and has recently been learning ASP. net MVC. In the latest release version, jquery 1.3.1 has been integrated. Naturally, you have to learn it! I found that jquery code is actually more elegant than the original JS Code! It's just that there are too many syntaxes and methods, and you are not familiar with them yet. You still need time to learn them ..... this is the first time to use jquery to write client scripts. If you find better implementation methods, please leave a message for me! Thank you!

Note: ASP. net mvc 1.0, Author: 0x001;

View:

<SCRIPT type = "text/JavaScript">
$ (Document). Ready (function (){
Getbyjquery ();
$ ("# Ddlprovince"). Change (function () {getcity ()});
$ ("# Ddlcity"). Change (function () {getdistrict ()});
});

Function getbyjquery (){

$ ("# Ddlprovince"). Empty (); // clear the province Select Control

$. Getjson ("/ajax/getprovincelist", function (data ){
$. Each (data, function (I, item ){
$ ("<Option> </option> ")
. Val (item ["provinceid"])
. Text (item ["provincename"])
. Appendto ($ ("# ddlprovince "));
});
Getcity ();
});

}

Function getcity (){

$ ("# Ddlcity"). Empty (); // clear the city Select Control
VaR url = "/ajax/getcitylist/" + $ ("# ddlprovince"). Val ();
$. Getjson (URL, function (data ){
$. Each (data, function (I, item ){
$ ("<Option> </option> ")
. Val (item ["cityid"])
. Text (item ["cityname"])
. Appendto ($ ("# ddlcity "));
});
Getdistrict ();
});
}

Function getdistrict (){
$ ("# Ddldistrict"). Empty (); // clear the Select Control for the city
VaR url = "/ajax/getdistrictlist/" + $ ("# ddlcity"). Val ();

$. Getjson (URL, function (data ){
$. Each (data, function (I, item ){
$ ("<Option> </option> ")
. Val (item ["districtid"])
. Text (item ["districtname"])
. Appendto ($ ("# ddldistrict "));
});
});
}

</SCRIPT>
<Table> <tr> <TD> <select id = "ddlprovince"/> </TD> <select id = "ddlcity"/> </TD> <TD> <select id = "ddldistrict"/> </TD> </tr> </table>

Controller:

Using system;
Using system. Collections. Generic;
Using system. LINQ;
Using system. Web;
Using system. Web. MVC;
Using system. Web. MVC. Ajax;

Namespace mvcbbs. Controllers
{
Public class ajaxcontroller: Controller
{
//
// Get:/ajax/

/// <Summary>
/// Obtain all [province] Data
/// </Summary>
Public actionresult getprovincelist ()
{
If (! Request. isajaxrequest ())
{
Return content ("please do not use illegal methods. This is an immoral behavior! ");
}

Bll. Province BLL = new mvcbbs. BLL. Province ();
List <mvcbbs. model. s_province> modellist = BLL. getprovincelist ();

Return JSON (modellist );
}

/// <Summary>
/// Obtain all [City] data of a [province]
/// </Summary>
Public actionresult getcitylist (int id)
{
If (! Request. isajaxrequest ())
{
Return content ("please do not use illegal methods. This is an immoral behavior! ");
}
Bll. Province BLL = new mvcbbs. BLL. Province ();
List <mvcbbs. model. s_city> modellist = BLL. getcitylist (ID );
Return JSON (modellist );
}

/// <Summary>
/// Obtain all [City] data of a [City]
/// </Summary>
Public actionresult getdistrictlist (int id)
{
If (! Request. isajaxrequest ())
{
Return content ("please do not use illegal methods. This is an immoral behavior! ");
}

Bll. Province BLL = new mvcbbs. BLL. Province ();
List <mvcbbs. model. s_district> modellist = BLL. getdistrict (ID );

Return JSON (modellist );
}

}
}

I prefer the three-tier + factory mode to read and write data. O/R Mapping is not suitable for my requirements! Projects we write are often not intended to facilitate migration, but to select a clear database and require higher performance and stronger business logic! You should be familiar with the code above. read data from the database to return data in list <>, and convert data with the JSON Method built in ASP. net mvc to response.

Dal:

// Bll, the model will not be posted!

Using system;
Using system. Data;
Using system. text;
Using system. Data. sqlclient;
Using system. Collections. Generic;
Using dbutility; // Add reference first

Namespace mvcbbs. dal
{
Public class Province
{
Public province ()
{}

/// <Summary>
/// Obtain data from all provinces
/// </Summary>
/// <Returns> </returns>
Public list <model. s_province> getprovincelist ()
{
Stringbuilder strsql = new stringbuilder ();
Strsql. append ("select provinceid, provincename ");
Strsql. append ("from s_province ");
List <model. s_province> modellist = new list <mvcbbs. model. s_province> ();
Sqldatareader DR = dbhelpersql. executereader (strsql. tostring ());
While (dr. Read ())
{
Model. s_province _ model = new mvcbbs. model. s_province ();
_ Model. provinceid = int. parse (Dr ["provinceid"]. tostring ());
_ Model. provincename = dr. getstring (1 );
Modellist. Add (_ model );
}
Dr. Close ();
Return modellist;
}

/// <Summary>
/// Obtain the data of all cities in a province
/// </Summary>
/// <Param name = "provinceid"> </param>
/// <Returns> </returns>
Public list <model. s_city> getcitylist (INT provinceid)
{
Stringbuilder strsql = new stringbuilder ();
Strsql. append ("select cityid, cityname, zipcode ");
Strsql. append ("from s_city ");
Strsql. append ("where provinceid = ");
Strsql. append (provinceid. tostring ());

List <model. s_city> modellist = new list <mvcbbs. model. s_city> ();
Sqldatareader DR = dbhelpersql. executereader (strsql. tostring ());
While (dr. Read ())
{
Model. s_city _ model = new mvcbbs. model. s_city ();
_ Model. cityid = int. parse (Dr ["cityid"]. tostring ());
_ Model. cityname = dr. getstring (1 );
_ Model. zipcode = dr. getstring (2 );
_ Model. provinceid = provinceid;
Modellist. Add (_ model );
}
Dr. Close ();
Return modellist;
}

/// <Summary>
/// Obtain all urban areas of a city
/// </Summary>
/// <Param name = "cityid"> </param>
/// <Returns> </returns>
Public list <model. s_district> getdistrict (INT cityid)
{
Stringbuilder strsql = new stringbuilder ();
Strsql. append ("select districtid, districtname ");
Strsql. append ("from s_district ");
Strsql. append ("where cityid = ");
Strsql. append (cityid. tostring ());

List <model. s_district> modellist = new list <mvcbbs. model. s_district> ();
Sqldatareader DR = dbhelpersql. executereader (strsql. tostring ());
While (dr. Read ())
{
Model. s_district _ model = new mvcbbs. model. s_district ();
_ Model. districtid = int. parse (Dr ["districtid"]. tostring ());
_ Model. districtname = dr. getstring (1 );
_ Model. cityid = cityid;
Modellist. Add (_ model );
}
Dr. Close ();
Return modellist;
}
}
}

For more information, see 0x001.com. Thank you! Please give me more suggestions! I need to learn and improve my motivation!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.