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. AutoLayout初战----Masonry与FDTemplateLayoutCell实践

    学iOS也有几个月了.一直都是纯代码开发,菜鸟入门,到今天还处在Frame时代.刚好近期项目在提审.有点时间能够学学传说中的AutoLayout.事实上.就是android的相对布局(Relative ...

  2. BZOJ 2338 HNOI2011 数矩形 计算几何

    题目大意:给定n个点,求一个最大的矩形,该矩形的四个顶点在给定的点上 找矩形的方法是记录全部线段 若两条线段长度相等且中点重合 这两条线段就能够成为矩形的对角线 于是我们找到全部n*(n-1)/2条线 ...

  3. pandas删除满足特定列信息的行记录

    #!/usr/bin/python import pandas as pd df = pd.read_excel('c:\data\zichan.xlsx') df_sn = pd.read_exce ...

  4. MSP430：串口输出

    初始化 void Uart_Init(void) { BCSCTL1 = CALBC1_1MHZ; // Set DCO DCOCTL = CALDCO_1MHZ; P1SEL = BIT1 + BI ...

  5. Oracle group by分组拼接字符串

    select wm_concat(id),depon  from test_1  group by depon

  6. Intellij IDEA14配置

    一.下载 官网下载地址:http://www.jetbrains.com/idea/ 目前最新的版本是15,发现15注册比较麻烦,好像需要只能通过联网激活.而网上14的离线注册码一大堆,就下载了14, ...

  7. python自动化测试框架（一）

    1.开发环境 名称 版本 系统 windows 7 python版本 2.7.14 IDE pycharm2017 2.大致框架流程 :展示了框架实现的业务流程 3.框架介绍 3.1 ======完善 ...

  8. C# 学习——静态（第四天）

    一.命名空间 类似于文件夹,而类就是文件夹中的文件: 作用:明确的指向我们所需要的类的 所在的位置: 统一命名空间下,类名不能重复. 二.类 概念:具有相同属性和功能的对象的抽象的集合. 三.静态与实 ...

  9. jQuery怎么去掉标签的hover效果

    今天项目中遇到jquery去掉hover效果的问题,开始以为直接unbind(“hover”)就可以搞定,可是实际验证这个方法并没有作用,正确的使用方法应该是下面这样: /* 这种方法是新增的,在老的 ...

  10. 【转载】HTTP 缓存的四种风味与缓存策略

    原文地址:https://segmentfault.com/a/1190000006689795 HTTP Cache 通过网络获取内容既缓慢,成本又高:大的响应需要在客户端和服务器之间进行多次往返通 ...