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中不能使用小数点(.)来作为分隔符

    split()括号里是一个String的参数,所以一定要符合这种:split(".")形式,即点'.'要用双引号""括起来"."在java中 ...

  2. CSS自适应宽度的高级应用，一般人不会告诉你。

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAxgAAACdCAIAAAC4iknFAAAgAElEQVR4nO2d3VsTV7uH51/wqhKotn

  3. SVG可伸缩矢量图形

    SVG可伸缩矢量图形 总结 1.svg就像普通标签那么使用 2.svg是xml 3.svg是矢量图,而canvas是位图 学习要点 对HTML5中的SVG有初步的了解 什么是SVG 简单的说SVG文档 ...

  4. FormatString格式大众人全

    FormatString格式大众人全 Posted on 2010-08-12 16:14 moss_tan_jun 阅读(457) 评论(0) 编辑 收藏 格式化日期和数字的字符串经常要用到这个, ...

  5. CF85 E Guard Towers——二分图

    题目:http://codeforces.com/contest/85/problem/E 给定一些点的坐标,求把它们分成两组,组内最大距离的最小值: 二分答案,判断就是看距离大于 mid 的点能否组 ...

  6. git-更改本地和远程分支的名称

    git branch -m old_branch new_branch # Rename branch locally git push origin :old_branch # Delete the ...

  7. 云栖社区> > 正文 永久免费SSL安全证书Letsencrypt安装使用方法

    ./letsencrypt-auto certonly --standalone --email admin@thing.com -d thing.com -d www.thing.com

  8. 字典（Trie树）

    4189 字典  时间限制: 1 s  空间限制: 256000 KB  题目等级 : 大师 Master     题目描述 Description 最经,skyzhong得到了一本好厉害的字典,这个 ...

  9. phonegap+cordova+ionic调用原生API

    上一篇博客讲了phonegap+cordova+ionic的环境搭建,今天再来分享一篇cordova调用原生API的文章.从技术角度上来讲,这并不是很难,只是有些细节要是没有注意,或者某些步骤不知道的 ...

  10. [Swift通天遁地]九、拔剑吧-(9)创建支持缩放、移动、裁切的相机视图控制器

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...