zoukankan      html  css  js  c++  java

  • 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. }  

    然后，你再运行一下看，结果出来了没？
  • 相关阅读:
    Nhibernate1
    控制反转（IoC）
    Windbg是windows平台上强大的调试器
    Java 7 语法新特性
    区间数据计算
    红黑树数据结构剖析
    .net下灰度模式图像
    如何配置Hyper-V的虚拟机通过主机网络上网 (NAT)
    产品落地
    poj-3898 Software Industry Revolution DP
  • 原文地址：https://www.cnblogs.com/xieweikai/p/6832856.html
Copyright © 2011-2022 走看看