ASP. NET mistaken Tutorial: Use JQ in MVC to implement Ajax

 

Statement: This tutorial is intended to be a false positive. If you want to become a master, do not read it down. In the webform of ASP. NET, you may find that AJAX implementation is very simple, because the. NET class library has prepared the updatepanel control for you. Using this control to implement Ajax is equivalent to a line of code without writing. However, in MVC, almost all server controls are invalid. What should I do? Traditional JS Code is complicated. Don't forget that jquery is very popular now. JQ is indispensable for web development. Although strictly speaking, it is provided to front-end web designers, but we may also use it for Ajax. Today, let's work together to implement the Ajax function under the MVC framework through JQ. 1. Create an ASP. net mvc application project and create a project method (omitted ). 2. delete all the classes and pages under models, controllers, and views generated by the template by default. Don't waste hard disk space. The teacher said, one kb space, one gold string, it is difficult to buy one kb space. 3. Create a person class under the models directory. The class has three public attributes: name, city, and QQ.

    public class Person    {        public string Name { get; set; }        public string City { get; set; }        public string QQ { get; set; }    }

4. Right-click the controllers directory and choose add> controller... from the pop-up menu. In the displayed dialog box, enter the name of the controller. Note that the controller name must belong to the Controller.

Name the Controller as personcontroller.

 

5. Define a simulated Search Method in the controller.

 

// Get:/person/Search Public jsonresult search () {// obtain the URL parameter value string key = request. querystring ["S"]; List <person> List = new list <person> (); list. addrange (new person [] {new person {name = "aaaakd", city = "Tianjin", QQ = "22654554"}, new person {name = "zooewu ", city = "Changsha", QQ = "665542114"}, new person {name = "ddalion", city = "Beijing", QQ = "224545 "}, new person {name = "odtkkfuq", city = "Shanghai", QQ = "624587"}, new person {name = "pulirjd", city = "Beijing ", qq = "33211576"}, new person {name = "woegd", city = "Beijing", QQ = "32845215"}, new person {name = "menksale ", city = "Guangzhou", QQ = "88017564"}, new person {name = "fulintang", city = "Shanghai", QQ = "4675136 "}, new person {name = "gkaong", city = "Xuzhou", QQ = "354115465"}, new person {name = "fgdongse", city = "Nanjing ", qq = "5514364"}, new person {name = "zhafule", city = "Beijing", QQ = "0124560"}, new person {name = "tueimesh ", city = "Beijing", QQ = "2138575"}, new person {name = "huzmte", city = "Zhuhai", QQ = "72669952 "}, new person {name = "kefbicha", city = "Changsha", QQ = "6845126"}, new person {name = "niufangz", city = "Xi'an ", qq = "62154024"}, new person {name = "goupan", city = "Dongguan", QQ = "8546221165"}, new person {name = "hatengf ", city = "Shenzhen", QQ = "123621"}, new person {name = "dangwu", city = "Datong", QQ = "6584123355 "}, new person {name = "qiulikljh", city = "Haikou", QQ = "32564411"}, new person {name = "lanjuii", city = "Shan ", qq = "684895412" }}); // you can search for the key to find the appropriate record list <person> result = List. where (P => P. name. contains (key )). tolist (); // return JSON (result );}

6. In the global. asax file, change the ing URL path and change the Controller name to the Controller name just created, but not the controller, as long as the previous part.

            routes.MapRoute(                "Default", // Route name                "{controller}/{action}/{id}", // URL with parameters                new { controller = "Person", action = "Index", id = UrlParameter.Optional } // Parameter defaults            );

7. Create a folder under the views directory. Note that the folder name must be the same as that of the controller and be named "person.

8. Create a new page named index. aspx under the person folder. Note that the name must be the same as the action name.

Okay. Run it now to see if it is normal. Press F5 to debug the operation.
OK. If the page is displayed, the operation is successful.

 

9. Open the view page just created. Let's make a simple search page, which uses ajax to complete the search. That is to say, the search results are dynamically displayed on the page and the page is not refreshed.

 

<HTML xmlns = "http://www.w3.org/1999/xhtml"> 

The following is a script for processing Ajax.
 
<SCRIPT type = "text/JavaScript"> function getlist () {// retrieve the value var key = $ ("# TXT") in the text box "). val (); $. getjson ('/person/search? S = '+ key, function (data) {var html = '<tr> <TH> name </Th> <TH> city </Th> <TH> QQ number </Th> </tr>'; $. each (data, function (index, item) {HTML + = '<tr>' + '<TD>' + item. name + '</TD>' + '<TD>' + item. city + '</TD>' + '<TD>' + item. qq + '</TD>' + '</tr>';}); $ ("# TB" ).html (HTML) ;}</SCRIPT>

10. Run it again. Enter "Z" in the text box and click "Search". It's strange. No response. Why?
First, check your JavaScript code, especially the jquery code, which can easily be written incorrectly. Okay, check it again and again. That's right. Why didn't you respond?
 
Let's start the C # code of the controller and change the code after return of the search method, that is, another overload of the JSON method, and add a parameter that allows access by the get method:
 
Public jsonresult search () {...... // return JSON (result, jsonrequestbehavior. allowget );}

Then, run it again to see if the result is correct?