背景:

  博客中将构建一个小示例,用于演示在ASP.NET MVC4项目中,如何使用JQuery Ajax。

  直接查看JSon部分

步骤:

1,添加控制器(HomeController)和动作方法(Index),并为Index动作方法添加视图(Index.cshtml),视图中HTML如下:

输入你的姓名:
<input type="text" id="txtName"/><br/>
输入你的年龄:
<input type="text" id="txtAge" /><br />
<button type="button" id="btn1">提交</button>
<button type="button" id="btn2">清空</button>
<p id="display"></p>

  视图中包含两个文本框,分别用来输入名字和年龄,包含连个按钮,分别用来提交信息和清空文本框的内容,同时包含一个段落,用来显示Ajax返回的数据信息。

2,在Home控制器中添加另外一个动作方(AddUsers),用来接收并处理视图传递过来的数据,并返回执行结果给视图,代码如下:

 1         public ActionResult AddUsers()
 2         {
 3             var my = new MyModel();
 4             string result = string.Empty;
 5             if(Request.IsAjaxRequest())
 6             {
 7                 this.UpdateModel(my);
 8                 string name = my.Name;
 9                 int age = my.Age;
10                 if (age < 18) result = name+"的文章好烂啊";
11                 else result = name+",记得烂也要写";
12             }
13             return Content(result);
14         }

  如代码所示:直接用Content返回一个字符串。

  或者是返回一个 ContentResult()对象,与上面的代码类似(所以折叠了),代码如下:

 1         public ActionResult DoWithUsers()
 2         {
 3             var actionResult = default(ContentResult);
 4             var my = new MyModel();
 5             try
 6             {
 7                 this.UpdateModel(my);
 8                 string name = my.Name;
 9                 int age = my.Age;
10                 string temp = "";
11                 if (age < 18) temp = "的文章好烂啊";
12                 else temp = ",记得烂也要写";
13                 actionResult = new ContentResult()
14                 {
15                     Content = name + temp
16                 };
17             }
18             catch(Exception ex)
19             {
20                 return null;
21             }
22             return actionResult;
23         }

View Code

3,修改Jquery&Ajax代码:

 1     $(document).ready(function () {
 2         $("#btn1").click(function () {
 3             var data = "";
 4             var name = $("#txtName").val();
 5             var age = $("#txtAge").val();
 6             data += "&Name=" + encodeURI(name);
 7             data += "&Age=" + encodeURI(age);
 8             $.ajax({
 9                 async: true,
10                 cache: false,
11                 timeout: 60 * 60 * 1000,
12                 data: data,
13                 type: "GET",
14                 datatype: "JSON",
15                 url: "/Ajax/AddUsers",
16                 success:function(result)
17                 {
18                     $("#display").text(result);
19                 },
20                 error: function (result) {
21                     $("#display").html("error");
22                 },
23             })
24         });

4,运行效果如图:

以上,最简单的ASP.NET MVC4&JQuery&AJax示例完成了。


以Json方式发送Action处理后的结果:

更多的情况下,不止是返回一个字符串,而是以Json的方式返回结果。

5,修改Action如下:

 1         public ActionResult DoWithUsers()
 2         {
 3             var my = new MyModel();
 4             try
 5             {
 6                 this.UpdateModel(my);
 7                 string name = my.Name;
 8                 int age = my.Age;
 9                 string temp = "";
10                 if (age < 18) temp = "的文章好烂啊";
11                 else temp = ",记得烂也要写";
12                 JavaScriptSerializer jss = new JavaScriptSerializer();
13                 return Json(jss.Serialize(new { Name = name, Message = temp }), JsonRequestBehavior.AllowGet);
14             }
15             catch(Exception ex)
16             {
17                 return null;
18             }
19         }

说明:JSon方法返回一个JSonResult,而JSonResult同样是继承自ActionResult的。

6,修改AJax部分,代码如下:

1                 success:function(result)
2                 {
3                     result = JSON.parse(result);
4                     $("#display").text(result.Name + result.Message);
5                 },

运行效果一致。
以上,最简单的ASP.NET MVC4&JQuery&AJax&JSon示例完成。

转载于:https://www.cnblogs.com/SharpL/p/4641040.html

如何构建ASP.NET MVC4JQueryAJaxJSon示例相关推荐

  1. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(32)-swfupload多文件上传[附源码]...

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(32)-swfupload多文件上传[附源码] 文件上传这东西说到底有时候很痛,原来的asp.net服务器 ...

  2. azure云数据库_使用Azure SQL数据库构建ASP.NET应用

    azure云数据库 In this article, you will learn about Azure SQL Database and its uses. Then the article sp ...

  3. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(12)-系统日志和异常的处理②...

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(12)-系统日志和异常的处理② 上一讲我们做了日志与异常的结果显示列表,这一节我们讲要把他应用系统中来. ...

  4. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(31)-MVC使用RDL报表

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(31)-MVC使用RDL报表 这次我们来演示MVC3怎么显示RDL报表,坑爹的微软把MVC升级到5都木有良 ...

  5. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(39)-在线人数统计探讨

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(39)-在线人数统计探讨 系列目录 基于web的网站在线统计一直处于不是很精准的状态!基本上没有一种方法可 ...

  6. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(34)-文章发布系统①-简要分析...

    构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(34)-文章发布系统①-简要分析 原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入 ...

  7. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(13)-系统日志和异常的处理③

    构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(13)-系统日志和异常的处理③ 参考文章: (1)构建ASP.NET MVC4+EF5+EasyUI+Unity ...

  8. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(10)-系统菜单栏[附源码]

    构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(10)-系统菜单栏[附源码] 原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后 ...

  9. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(40)-精准在线人数统计实现-【过滤器+Cache】...

    构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(40)-精准在线人数统计实现-[过滤器+Cache] 原文:构建ASP.NET MVC4+EF5+EasyUI+ ...

最新文章

  1. Redis 那些故障转移、高可用方案
  2. 985高校博士情侣致谢:我俩每月补贴600元,在一线城市生活5年
  3. 服务器备份文件ctf,GUET-CTF 题目备份
  4. 记linux_centOS安装as86过程
  5. GraphQL的query只返回所请求的字段的实现原理
  6. sql实现like多个值的查询
  7. mac android sdk manager速度慢,android - SDK Manager无法在Mac上打开 - 堆栈内存溢出
  8. python pdf表格识别不出来_Python识别pdf表格
  9. 什么是 USB 3.1
  10. spfa算法(c++)
  11. 剖析虚幻渲染体系(16)- 图形驱动的秘密
  12. 二维码的制作之根据Excel数据批量制作二维码
  13. 如何把桌面计算机和回收站隐藏,电脑回收站怎么隐藏图标,隐藏我的电脑和回收站...
  14. 程序员的必备装备——为健康加油
  15. 机器学习-单层感知器不能实现异或运算的原因
  16. 10麦客和300挖藕人
  17. html编写购物网站页面练习(一)
  18. 苹果公布Apple Watch手表新专利,可穿戴设备少不了Find My技术
  19. 移动端 h5和原生交互的方式
  20. 使用DGL进行异构图元路径采样

热门文章

  1. python性能解决_我们如何发现并解决Python代码中性能下降的问题
  2. C语言开发笔记(一)自动转换和强制转换
  3. shadows a parameter
  4. 公钥和私钥 java_公钥与私钥 - yxhxj2006 - BlogJava
  5. 160 - 47 DueList.2
  6. 二、织物具备超级防水效果的条件?
  7. 用pv操作描述如下前驱图_LinkedList实现分析(二)——常用操作
  8. php 获取指定时间 次日,PHP时间判断语句
  9. I/O 多路复用之select
  10. inet_pton, inet_ntop