如何构建ASP.NET MVC4JQueryAJaxJSon示例
背景:
博客中将构建一个小示例,用于演示在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示例相关推荐
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(32)-swfupload多文件上传[附源码]...
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(32)-swfupload多文件上传[附源码] 文件上传这东西说到底有时候很痛,原来的asp.net服务器 ...
- azure云数据库_使用Azure SQL数据库构建ASP.NET应用
azure云数据库 In this article, you will learn about Azure SQL Database and its uses. Then the article sp ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(12)-系统日志和异常的处理②...
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(12)-系统日志和异常的处理② 上一讲我们做了日志与异常的结果显示列表,这一节我们讲要把他应用系统中来. ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(31)-MVC使用RDL报表
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(31)-MVC使用RDL报表 这次我们来演示MVC3怎么显示RDL报表,坑爹的微软把MVC升级到5都木有良 ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(39)-在线人数统计探讨
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(39)-在线人数统计探讨 系列目录 基于web的网站在线统计一直处于不是很精准的状态!基本上没有一种方法可 ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(34)-文章发布系统①-简要分析...
构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(34)-文章发布系统①-简要分析 原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入 ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(13)-系统日志和异常的处理③
构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(13)-系统日志和异常的处理③ 参考文章: (1)构建ASP.NET MVC4+EF5+EasyUI+Unity ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(10)-系统菜单栏[附源码]
构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(10)-系统菜单栏[附源码] 原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后 ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(40)-精准在线人数统计实现-【过滤器+Cache】...
构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(40)-精准在线人数统计实现-[过滤器+Cache] 原文:构建ASP.NET MVC4+EF5+EasyUI+ ...
最新文章
- Redis 那些故障转移、高可用方案
- 985高校博士情侣致谢:我俩每月补贴600元,在一线城市生活5年
- 服务器备份文件ctf,GUET-CTF 题目备份
- 记linux_centOS安装as86过程
- GraphQL的query只返回所请求的字段的实现原理
- sql实现like多个值的查询
- mac android sdk manager速度慢,android - SDK Manager无法在Mac上打开 - 堆栈内存溢出
- python pdf表格识别不出来_Python识别pdf表格
- 什么是 USB 3.1
- spfa算法(c++)
- 剖析虚幻渲染体系(16)- 图形驱动的秘密
- 二维码的制作之根据Excel数据批量制作二维码
- 如何把桌面计算机和回收站隐藏,电脑回收站怎么隐藏图标,隐藏我的电脑和回收站...
- 程序员的必备装备——为健康加油
- 机器学习-单层感知器不能实现异或运算的原因
- 10麦客和300挖藕人
- html编写购物网站页面练习(一)
- 苹果公布Apple Watch手表新专利,可穿戴设备少不了Find My技术
- 移动端 h5和原生交互的方式
- 使用DGL进行异构图元路径采样
热门文章
- python性能解决_我们如何发现并解决Python代码中性能下降的问题
- C语言开发笔记(一)自动转换和强制转换
- shadows a parameter
- 公钥和私钥 java_公钥与私钥 - yxhxj2006 - BlogJava
- 160 - 47 DueList.2
- 二、织物具备超级防水效果的条件?
- 用pv操作描述如下前驱图_LinkedList实现分析(二)——常用操作
- php 获取指定时间 次日,PHP时间判断语句
- I/O 多路复用之select
- inet_pton, inet_ntop