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

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的更多相关文章

  1. ASP.NET误人子弟教程：在MVC下如何返回图片

    这几天忙着一些小事,也没有写什么了,今天,我们来玩一个比较简单的东东.就是在MVC下如何返回图片,相信,在传统WebForm下,大家都晓得怎么弄,方也不限于一种,但是,在架构较为严格的MVC里面,刚开 ...

  2. ASP.NET Core教程【二】从保存数据看特有属性与服务端验证

    前文索引: 在layout.cshtml文件中,我们可以看到如下代码: <a asp-page="/Index" class="navbar-brand" ...

  3. ASP.NET Core教程【三】实体字段属性、链接标签、并发数据异常、文件上传及读取

    前文索引:ASP.NET Core教程[二]从保存数据看Razor Page的特有属性与服务端验证ASP.NET Core教程[一]关于Razor Page的知识 实体字段属性 再来看看我们的实体类 ...

  4. ASP.NET Core教程【二】从保存数据看Razor Page的特有属性与服务端验证

    前文索引:ASP.NET Core教程[一]关于Razor Page的知识 在layout.cshtml文件中,我们可以看到如下代码: <a asp-page="/Index" ...

  5. ASP.Net Core 2.2 MVC入门到基本使用系列 (二)

    本教程会对基本的.Net Core 进行一个大概的且不会太深入的讲解, 在您看完本系列之后, 能基本甚至熟练的使用.Net Core进行Web开发, 感受到.Net Core的魅力. 本教程知识点大体 ...

  6. ASP.Net Core 2.2 MVC入门到基本使用系列 (一)

    本教程会对基本的.Net Core 进行一个大概的且不会太深入的讲解, 在您看完本系列之后, 能基本甚至熟练的使用.Net Core进行Web开发, 感受到.Net Core的魅力. 本教程知识点大体 ...

  7. ASP.Net Core 2.2 MVC入门到基本使用系列 (三)

    本教程会对基本的.Net Core 进行一个大概的且不会太深入的讲解, 在您看完本系列之后, 能基本甚至熟练的使用.Net Core进行Web开发, 感受到.Net Core的魅力. 本教程知识点大体 ...

  8. ASP.Net Core 2.2 MVC入门到基本使用系列 (四)

    本教程会对基本的.Net Core 进行一个大概的且不会太深入的讲解, 在您看完本系列之后, 能基本甚至熟练的使用.Net Core进行Web开发, 感受到.Net Core的魅力. 本教程知识点大体 ...

  9. asp.net.core教程

    asp.net.core教程(翻译自微软官方文档https://docs.microsoft.com/en-us/aspnet/core/tutorials/first-mvc-app/adding- ...

随机推荐

  1. Java 定时任务之Quartz

    使用CronTrigger CronTrigger 能够提供比 SimpleTrigger 更有具体实际意义的调度方案,调度规则基于 Cron 表达式,CronTrigger 支持日历相关的重复时间间 ...

  2. ansible安装测试

    安装: # yum install ansible # yum install sshpass 配置: # vi /etc/ansible/hosts  [mysqldb] 172.16.100.23 ...

  3. 文章编辑器 文本替换 操作dom 发帖 富文本 今日头条发布富文本的实现 键盘化的html

    js  修改  iframe it=document.getElementById('ueditor_0').contentWindow.document.getElementsByTagName(& ...

  4. js对象和json的区别

    他们两个没有什么关联只不过可以相互转换而已,就像json可以转化为java对象一样 注意:json只有字符串形式(就是我们常说的json字符串:key/value值和数组形式的字符串),没有什么jso ...

  5. go语言笔记——defer作用DB资源等free或实现调试

    defer 和追踪 关键字 defer 允许我们推迟到函数返回之前(或任意位置执行 return 语句之后)一刻才执行某个语句或函数(为什么要在返回之后才执行这些语句?因为 return 语句同样可以 ...

  6. imagebutton 设置了src属性的图片更换

    <ImageButton android:id="@+id/mediacontroller_play_pause" android:layout_width="wr ...

  7. 47. Ext.form.Field.prototype.msgTarget

    转自:https://blog.csdn.net/a1542aa/article/details/24295791 ExtJS.form中msgTarget Ext表单提示方式:msgTarget:有 ...

  8. codevs3002石子归并3（四边形不等式优化dp）

    3002 石子归并 3 参考 http://it.dgzx.net/drkt/oszt/zltk/yxlw/dongtai3.htm  时间限制: 1 s  空间限制: 256000 KB  题目等级 ...

  9. vue2.0 引入font-awesome

    网上的大部分教程复杂而且难看懂,其实两步就能搞定. 先cnpm install font-awesome --save引入依赖 然后在main.js引入 font-awesome/css/font-a ...

  10. BZOJ 4828 DP+BFS

    被一道简单BFS坑了这么长时间我也是hhh了 //By SiriusRen #include <bits/stdc++.h> using namespace std; ,,):d(D),x ...