Asp.NET误人子弟教程：在MVC里面结合JQ实现AJAX

  1. public class Person  
  2. {  
  3.     public string Name { get; set; }  
  4.     public string City { get; set; }  
  5.     public string QQ { get; set; }  
  6. }  
4、在Controllers目录上右击，从弹出的菜单中依次选择【添加】→【Controller...】，在弹出对话框中输入控制器的名称。注意，控制器名必须以Controller结属。

把控制器命名为PersonController。

5、在控制器中定义一个模拟搜索的方法。

  1. // GET: /Person/Search  
  2. public JsonResult Search()  
  3. {  
  4.     // 取得URL参数值  
  5.     string key = Request.QueryString["s"];  
  6.   
  7.     List<Person> list = new List<Person>();  
  8.     list.AddRange(new Person[]  
  9.     {  
  10.         new Person{Name="aaaakd",City="天津",QQ="22654554"},  
  11.         new Person{Name="zooewu",City="长沙",QQ="665542114"},  
  12.         new Person{Name="ddalion",City="北京",QQ="224545"},  
  13.         new Person{Name="odtkkfuq",City="上海",QQ="624587"},  
  14.         new Person{Name="pulirjd",City="北京",QQ="33211576"},  
  15.         new Person{Name="woegd",City="北京",QQ="32845215"},  
  16.         new Person{Name="menksale",City="广州",QQ="88017564"},  
  17.         new Person{Name="fulintang",City="上海",QQ="4675136"},  
  18.         new Person{Name="gkaong",City="徐州",QQ="354115465"},  
  19.         new Person{Name="fgdongse",City="南京",QQ="5514364"},  
  20.         new Person{Name="zhafule",City="北京",QQ="0124560"},  
  21.         new Person{Name="tueimesh",City="北京",QQ="2138575"},  
  22.         new Person{Name="huzmte",City="珠海",QQ="72669952"},  
  23.         new Person{Name="kefbicha",City="长沙",QQ="6845126"},  
  24.         new Person{Name="niufangz",City="西安",QQ="62154024"},  
  25.         new Person{Name="goupan",City="东莞",QQ="8546221165"},  
  26.         new Person{Name="hatengf",City="深圳",QQ="123621"},  
  27.         new Person{Name="dangwu",City="大同",QQ="6584123355"},  
  28.         new Person{Name="qiulikljh",City="海口",QQ="32564411"},  
  29.         new Person{Name="lanjuii",City="山海关",QQ="684895412"}  
  30.     });  
  31.   
  32.     // 通过搜索关键查出合适字录  
  33.     List<Person> result = list.Where(p => p.Name.Contains(key)).ToList();  
  34.     // 返回JSON  
  35.     return Json(result);  
  36. }  

6、在Global.asax文件中，把映射的URL路改一下，把控制器的名字改为刚才建的控制器名字，但不要Controller，只要前面一部分。

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

7、在Views目录下新建一个文件夹，注意名字要和控制器一样，命名为Person。

8、在刚才的Person文件夹下面再新建一个页面，名为Index.aspx，注意，要和Action的名字相同。

好，现在尝试运行一下，看是否正常。按下F5调试运行。
OK，看到页面就说明运行成功了。

9、打开刚才建的视图页面，我们来做一个简单的搜索页面，该页面使用AJAX来完成搜索，也就是说搜索结果在页面中动态显示，页面不刷新。

  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head runat="server">  
  3.     <title></title>  
  4.   
  5.     <script type="text/javascript" src="../../Scripts/jquery-1.4.1.js"></script>  
  6.   
  7.     <style type="text/css">  
  8.         .tb  
  9.         {  
  10.             padding: 0px;  
  11.             border: 1px solid #33CCFF;  
  12.             border-collapse: collapse;  
  13.             border-spacing: 0px;  
  14.             font-size: 13px;  
  15.             font-family: 黑体;  
  16.         }  
  17.         th  
  18.         {  
  19.             margin: 0px;  
  20.             padding: 3px;  
  21.             #003399;  
  22.             border-right-style: solid;  
  23.             border-bottom-style: solid;  
  24.             border-right- 1px;  
  25.             border-bottom- 1px;  
  26.             border-right-color: #33CCFF;  
  27.             border-bottom-color: #33CCFF;  
  28.             color: #FFFFFF;  
  29.             text-align: center;  
  30.              80px;  
  31.             font-size: 14px;  
  32.         }  
  33.         td  
  34.         {  
  35.             border-right-style: solid;  
  36.             border-bottom-style: solid;  
  37.             border-right- 1px;  
  38.             border-bottom- 1px;  
  39.             border-right-color: #33CCFF;  
  40.             border-bottom-color: #33CCFF;  
  41.             padding: 3px;  
  42.         }  
  43.     </style>  
  44. </head>  
  45. <body>  
  46.     <div>  
  47.         <h2>  
  48.             欢迎进入ASP.NET误人子弟示例程序</h2>  
  49.     </div>  
  50.     <div>  
  51.         请输入关键词：  
  52.         <input type="text" id="txt" name="txt" />  
  53.         <input type="button" id="btn" name="btn" value="搜索" onclick="getList()" />  
  54.     </div>  
  55.     <div>  
  56.         <h4>  
  57.             搜索结果</h4>  
  58.         <table id="tb" class="tb">  
  59.         </table>  
  60.     </div>  
  61. </body>  
  62. </html>  

下面是处理AJAX的脚本。

  1. <script type="text/javascript">  
  2.     function getList() {  
  3.         // 取出文本框中的值  
  4.         var key = $("#txt").val();  
  5.         $.getJSON('/Person/Search?s=' + key, function(data) {  
  6.             var html = '<tr><th>姓名</th><th>城市</th><th>QQ号</th></tr>';  
  7.             $.each(data, function(index, item) {  
  8.                 html += '<tr>' +  
  9.                     '<td>' + item.Name + '</td>' +  
  10.                     '<td>' + item.City + '</td>' +  
  11.                     '<td>' + item.QQ + '</td>' +  
  12.                     '</tr>';  
  13.             });  
  14.             $("#tb").html(html);  
  15.         });  
  16.     }  
  17. </script>  

10、再来运行一下，在文本框中输入“z”，点搜索，奇怪了，没反应，咋么回事呢？

首先，你要检查一下你的javascript代码，尤其是jQuery代码，很容易写错，好的，反复检查了，没错啊，是这样，那为什么没反应呢？

来，咱们再来打开控制器的C#代码，把Search方法的return后面的代码改一下，也就是在Json方法另一个重载，再加一个允许GET方式访问的参数：

  1. public JsonResult Search()  
  2. {  
  3.      ........  
  4.   
  5.      // 返回JSON  
  6.     return Json(result, JsonRequestBehavior.AllowGet);  
  7.   
  8. }  

然后，你再运行一下看，结果出来了没？

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/xieweikai/p/6832856.html