Interactive drop-down box using Ajax in MVC

 

Sometimes, our webpage requires cascade menus or cascade drop-down boxes. For example, when selecting a province, city, or county, we must set the drop-down box as the linkage drop-down box, in order to obtain the county under the province! The following is an exampleMVCHow to UseAjaxTechnical production linkage drop-down box!

 

 

 

1. First, weViewWrite two drop-down boxes:

 

1<DivClass= "Editor-field">2 3 4 @ Html. dropdownlist ("fathernodeid ")5 6 7 @ Html. dropdownlist ("nodeid ")8 9 10</Div>
 

View code

 

 

 

 

 

 

One ID And Name All Fathernodeid And ID And Name All Nodeid In the drop-down list Fathernodeid After the option in the drop-down box Nodeid The options in the drop-down box are also changed. The options here are not updated, because we need Ajax Asynchronously load these options!

 

OKTo createJavascriptScript FileTypelinkage. js,CodeAs follows:

 1      //  Type linkage JS script  2   3   4 $ (Document). Ready ( Function (){  5   6   7 $ ("# Fathernodeid"). Change ( Function  (){  8   9   10 Getchildrentreelist (); //  Obtain sub-options  11   12   13   });  14  15   16   });  17   18   19    20   21   22   Function  Getchildrentreelist (){  23   24   25       VaR Url = "/Thetree/getchildrentreelist/" + $ ("# fathernodeid" ). Val (); 26   27   28   $. Getjson (  29   30   31 URL, Function  (Data ){  32   33   34 $ ("# Nodeid"). Empty (); //  Clear original options  35   36  37 $. Each (data, Function  (I, item ){  38   39   40 $ ("<Option> </option>"). Val (item ["ID"]). Text (item ["nodename"]). appendto ("# nodeid" );  41   42   43   });  44   45   46  });  47   48 };

View code

 

 

 

  Because of my View The layout page is used, so we directly JS Reference to the layout page. Before that JS Add Bundleconfig. CS Is centralized for us. JS Script and CSS A file in the style sheet. Now we put the newly written linkage script in and name it ~ /Bundles/typelinkage As follows:

 

 

 
1Bundles. Add (newscriptbundle ("~ /Bundles/typelinkage"). Include (2"~ /Scripts/typelinkage. js"3));
 

View code

 

2. now we can set a placeholder in the layout page. By referencing this layout page, we can leave a space for us to write our own code.@Rendersection ("Scripts", Required:False)

 

The first parameter is the placeholder name, and the second parameter is to set that the page that references this page must be filled with a placeholder or you can choose not to fill. Here we can choose not to fill.

 

Come to us nowViewLayer Code;To fill in our placeholder, as follows:

 

1 @ Section scripts {2 3 4@ Scripts. Render ("~ /Bundles/jqueryval")5 6 7@ Scripts. Render ("~ /Bundles/typelinkage")8 9 10}
 

View code

 

 

 

 

I am a placeholder filled at the bottom of the page!

 

3.Now let's write the method in the controller:

 

 1     ///  <Summary>  2   3   4           ///  Ajax obtains the subtype list of JSON data  5   6   7           ///  </Summary> 8   9   10           ///  <Paramname = "ID"> </param>  11   12   13           ///  <Returns> </returns>  14   15   16           Public  Jsonresult getchildrentreelist (intid)  17  18   19   {  20   21   22 List <Thetree> treelist = dB. thetrees. Where (E => E. thefathernode = ID). tolist ();  23   24   25               Return  JSON (treelist, jsonrequestbehavior. allowget );  26   27   28 }

View code

 

 

 

 

JsonresultYesActionresultSo we can return this type of view.

 

The code is very simple, that is, according toIDObtain the parent node in the databaseId =ParametersIDSet of itemsThen useJSONIs returned to the view. Note that the page is cached.So we need to add the "cancel cache" feature on the Controller class to declare that all methods in the class do not cache data. The features are as follows:

 

 
1[Outputcache (location = outputcachelocation. None, nostore =True)]//Clear Cache
 

View code

 

 

 

 

 

 

OKNow we can run ourProgramSee the results ......