如何构建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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/397858.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

echarts 有引导线和内部文字_点、线、面构图的异同以及相互转化

点、线、面构图既有相似性&#xff0c;又有差异性。相似的是都有对齐、强调、群组、重复、突出层次的作用&#xff0c;不同的是点的特点是聚焦、线的特点是运动和方向性&#xff0c;面的特性是体量感、稳定性。点的情感最弱&#xff0c;线、面的情感要比点丰富。一、点、线、面…

c语言上机报告之水仙花数,C语言上机报告之水仙花数..doc

C语言上机报告之水仙花数.C语言程序设计上机报告课题名称&#xff1a;水仙花数的算法院 (系)&#xff1a;工程学院专业班 级&#xff1a; 052126学生姓名&#xff1a; 喻培学 号&#xff1a; 20121004040指导教师&#xff1a; 熊慕舟2013年11月24日C语言上机报告之水仙花数上机…

《Python黑帽子:黑客与渗透测试编程之道》 Web攻击

Web的套接字函数库&#xff1a;urllib2 一开始以urllib2.py命名脚本&#xff0c;在Sublime Text中运行会出错&#xff0c;纠错后发现是重名了&#xff0c;改过来就好&#xff1a; #!/usr/bin/python #codingutf-8 import urllib2url "http://www.baidu.com"headers …

vCenter Converter Standalone使用文档

文档目的能够使用vCenter Converter Standalone 将物理机操作系统迁移到虚拟机操作系统基础知识vCenter Converter Standalone 能将物理机上的操作系统、VMware虚拟机上的操作系统或者Hype-V 上的虚拟机操作系统迁移到VMware上。系统环境操作系统&#xff1a;Windows Server 20…

1093芯片做正弦波逆变器_正弦波逆变器中的SPWM调制(钟任生)

欢迎加入技术交流QQ群(2000人)&#xff1a;电力电子技术与新能源 905723370高可靠新能源行业顶尖自媒体在这里有电力电子、新能源干货、行业发展趋势分析、最新产品介绍、众多技术达人与您分享经验&#xff0c;欢迎关注我们&#xff0c;搜索微信公众号&#xff1a;电力电子技术…

android 手机短信恢复,安卓手机短信删除了怎么恢复?简单恢复的方法

原标题&#xff1a;安卓手机短信删除了怎么恢复&#xff1f;简单恢复的方法安卓手机短信删除了怎么恢复&#xff1f;手机短信是生活中不经常使用到&#xff0c;但是依然是十分重要的存在&#xff0c;因为我们现在比较喜欢用社交软件与别人进行交流&#xff0c;但是在一些相对重…

Oracle-查看oracle是否有表被锁

问题现象&#xff1a; 查看oracle是否有表被锁 解决方法&#xff1a; select sid,serial#,program,terminal,username,b.object_id,c.object_name from v$session a, v$locked_object b, dba_objects c where a.sid b.session_id and b.object_id c.object_id;转载于:http…

Python循环的一些基本练习

#1:# name input(请输入你的身份)# if name egon:# print(--> 超级管理员)# elif name tom:# print(--> 普通管理员)# elif name jack,rain:# print(--> 业务主管)# elif name 其他:# print(--> 普通用户)#2# today input(今天是星期几&…

bash下个人习惯的一些文件设置

2019独角兽企业重金招聘Python工程师标准>>> bash_profile export PATH/usr/local/bin:$PATH export EDITORviinputrc set editing-mode vi #set editing-mode emacs set show-all-if-ambiguous on set completion-ignore-case on set meta-flag on set conver…

docker打包镜像上传_Jenkins | 一键打包部署Spring Boot 应用的Docker镜像

一、前言1、本文主要内容将在项目中实际使用到的相关东西整理记录一波&#xff0c;同时可以方便其他同学在使用到的时候参考一下(自己也备忘)&#xff0c;有不对的地方&#xff0c;欢迎指出~~Docker部署SpringBoot 项目通用Dockerfile文件、脚本Jenkins新建任务图文详解3、本文…

android 发送短信 广播 demo,向Android模拟器打电话发短信的简单方法

在开发android应用程序时&#xff0c;有时候需要测试一下向android手机拨打电话发送短信时该应用程序的反应。譬如编写一个广播接收器&#xff0c;来提示用户有短信收到或者处理短信&#xff0c;就需要向该手机发送短信来进行测试。这里介绍一种简单的向android模拟器打电话发短…

android 隐藏键盘时ui延迟恢复,android 软键盘的显示与隐藏问题的研究

在android中&#xff0c;常常会和输入法的软件键盘交互。在Manifest文件中&#xff0c;系统给activity的一个属性-windowSoftInputMode来控制输入法的显示方式。该属性提供了Activity的window与软键盘的window交互的方式。这里的属性设置有双方面的影响&#xff1a;1.软键盘的显…

天才基本法_《天才基本法》强推!年度神仙小说,看完这本书我竟然爱上了数学...

《天才基本法》——长洱小说文案元宝的书评这个真的是本年度的神仙小说&#xff0c;讲述了女主回到少女时代&#xff0c;可以和他一直暗恋的数学天才重来一遍。女主让男主改变了觉得她碌碌无为的看法&#xff0c;也改变了自己的人生。本书最大的主角其实是数学&#xff01;天知…

dataTables插件使用

引用文件 <!-- DataTables CSS --> <link rel"stylesheet" type"text/css" href"http://cdn.datatables.net/1.10.7/css/jquery.dataTables.css"><!-- jQuery --> <script type"text/javascript" charset"u…

一行代码,发送邮件

朋友让我给他媳妇儿肚子里的孩子想个名字 走的越来越快了&#xff0c;有天看到一个论点关于说地域会影响人的一辈子。其实想想的确有这个理儿&#xff0c;这使我想起来每天早上挤地铁的时候&#xff0c;其中有一个A站的人总是特别彪悍的往里挤&#xff0c;但B站的人就是永远不会…

js call,apply,bind三个方法的区别

相同点&#xff1a; 都是能够改变this的指向 不同点&#xff1a; 1.call()&#xff1a;传参方式跟bind一样&#xff08;都是以逗号隔开的传参方式&#xff09;&#xff0c;但是跟apply&#xff08;以数组的形式传参&#xff09;不一样&#xff0c; 2.bind(): 此方法应用后的情形…

千年鸿蒙 盼尔来兮是什么意思,鸿蒙是什么意思_鸿蒙的意思和出处_我爱历史网...

鸿蒙&#xff0c;是一个汉语词语&#xff0c;亦作“鸿濛”。中国神话传说的远古时代&#xff0c;传说在盘古开天辟地之前&#xff0c;世界是一团混沌状&#xff0c;因此把那个时代称作鸿蒙时代&#xff0c;后来该词也常被用来泛指远古时代。引证解释亦作“鸿濛”。1、宇宙形成前…

python中调用万年历_python 打印万年历

题目&#xff1a;打印万年历已知条件闰年条件&#xff1a;能被4整除且不能被100整除&#xff0c;或者能被400整除1900年1月1日 是周一解题思路判断闰年;判断当月有多少天;这个月的1号是从周几开始的;格式化打印日历。解题代码#判断年份是否为闰年def is_leap_year(year):if (ye…

求水仙花数

求出所有的"水仙花数"&#xff0c;所谓"水仙花数"是指一个三位数&#xff0c;其各位数字立方和等于该数本身。 1 /**2 * 题目&#xff1a;打印出所有的"水仙花数"&#xff0c;所谓"水仙花数"是指一个三位数&#xff0c;其各位数字立方…

在VS2015中用C++创建DLL并用C#调用且同时实现对DLL的调试

from:http://m.blog.csdn.net/article/details?id51075023 在VS2015中先创建C#项目&#xff0c;然后再创建要编写的动态库DLL项目&#xff0c;这样做的好处是整个解决方案的编程环境是C#模式&#xff0c;这样就可以有很多智能的提示或快捷的编程方式在整个解决方案中都可以使用…