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. 发现所有的字都被加上了 <font> 标签，导致样式全部错乱

    经检查,发现我的浏览器默认打开了翻译软件!!!!!!!

  2. Codeforces Round #272 (Div. 2) D.Dreamoon and Sets 找规律

    D. Dreamoon and Sets   Dreamoon likes to play with sets, integers and .  is defined as the largest p ...

  3. 百度MP3+图片+文字：生成结果文件；（声音58秒，视频59秒，同步性需要进一步优化）

    import os os_sep = os.sep this_file_abspath = os.path.abspath(__file__) this_file_dirname, this_file ...

  4. pcntl研究

    虽说php用于并发计算有点山寨,但总比没有强把.(有问题请指正) 下面是pcntl多线程的例子.(只能用于cli模式,而且只能用于linux环境) <?php $starttime=microt ...

  5. 2243: [SDOI2011]染色(树链剖分+线段树)

    2243: [SDOI2011]染色 Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 8400  Solved: 3150[Submit][Status ...

  6. windows下 redis/tomcat 服务自启动

    //设置redis服务自启动 //根据个人配置执行语句.   redis-server --service-install redis.windows.conf --loglevel verbose ...

  7. 基于Spark Streaming预测股票走势的例子（二）

    上一篇博客中,已经对股票预测的例子做了简单的讲解,下面对其中的几个关键的技术点再作一些总结. 1.updateStateByKey 由于在1.6版本中有一个替代函数,据说效率比较高,所以作者就顺便研究 ...

  8. 【Vijos1083/BZOJ1756】小白逛公园（线段树）

    [写在前面]TYC (Little White) 真是太巨啦! 题目: Vijos1083 分析: 一眼看上去就是线段树啊-- 然而当我这种蒟蒻兴高采烈地把线段树模板敲了一半,却发现一个问题: 这子区 ...

  9. linux的touch命令

    linux的touch命令不常用,一般在使用make的时候可能会用到,用来修改文件时间戳,或者新建一个不存在的文件. 1．命令格式: touch [选项]... 文件... 2．命令参数: -a    ...

  10. [转]linux之ps命令

    转自:http://www.cnblogs.com/peida/archive/2012/12/19/2824418.html Linux中的ps命令是Process Status的缩写.ps命令用来 ...