qq

qq

关注
发信
关注(28)粉丝(399)

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结属。
Asp.NET误人子弟教程：在MVC里面结合JQ实现AJAX-LMLPHP

把控制器命名为PersonController。

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

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

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

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，看到页面就说明运行成功了。

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

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

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

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

Asp.NET误人子弟教程：在MVC里面结合JQ实现AJAX-LMLPHP
05-27 03:10
Powered by LMLPHP ©2024 qq 0.040623