如何构建ASP.NET MVC4&JQuery&AJax&JSon示例

简介: 背景:  博客中将构建一个小示例,用于演示在ASP.NET MVC4项目中,如何使用JQuery Ajax。步骤:1,添加控制器(HomeController)和动作方法(Index),并为Index动作方法添加视图(Index.cshtml),视图中HTML如下:输入你的姓名:输入你的年龄:提交清空  视图中包含两个文本框,分别用来输入名字和年龄,包含连个按钮,分别用来提交信息和清空文本框的内容,同时包含一个段落,用来显示Ajax返回的数据信息。

背景:

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

步骤:

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         }
复制代码

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

目录
相关文章
|
JSON 程序员 数据格式
深入探索 “JSON for Modern C++“:安装、构建与应用
深入探索 “JSON for Modern C++“:安装、构建与应用
489 0
|
开发框架 JSON JavaScript
ASP.NET Core3.1实战教程---基于Jquery单文件上传
ASP.NET Core3.1实战教程---基于Jquery单文件上传
163 0
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
582 0
|
开发框架 缓存 前端开发
利用Visual Basic构建高效的ASP.NET Web应用
【4月更文挑战第27天】本文探讨使用Visual Basic与ASP.NET创建高效Web应用的策略,包括了解两者基础、项目规划、MVC架构、数据访问与缓存、代码优化、异步编程、安全性、测试及部署维护。通过这些步骤,开发者能构建出快速、可靠且安全的Web应用,适应不断进步的技术环境。
231 0
|
数据采集 JSON 数据处理
抓取和分析JSON数据:使用Python构建数据处理管道
在大数据时代,电商网站如亚马逊、京东等成为数据采集的重要来源。本文介绍如何使用Python结合代理IP、多线程等技术,高效、隐秘地抓取并处理电商网站的JSON数据。通过爬虫代理服务,模拟真实用户行为,提升抓取效率和稳定性。示例代码展示了如何抓取亚马逊商品信息并进行解析。
351 1
抓取和分析JSON数据:使用Python构建数据处理管道
|
存储 JSON 前端开发
jQuery Get 请求参数转换为 JSON
【8月更文挑战第22天】
251 2
|
JSON 开发框架 JavaScript
【Azure Developer】使用.Net Core解析JSON的笔记
【Azure Developer】使用.Net Core解析JSON的笔记
159 1
|
JSON JavaScript 前端开发
jQuery获取json文件的方法
jQuery获取json文件的方法
163 2
|
JSON 运维 Kubernetes
云效产品使用报错问题之流水线中配置了AppStack,构建时下载的制品内容为json字符串,如何解决
本合集将整理呈现用户在使用过程中遇到的报错及其对应的解决办法,包括但不限于账户权限设置错误、项目配置不正确、代码提交冲突、构建任务执行失败、测试环境异常、需求流转阻塞等问题。阿里云云效是一站式企业级研发协同和DevOps平台,为企业提供从需求规划、开发、测试、发布到运维、运营的全流程端到端服务和工具支撑,致力于提升企业的研发效能和创新能力。
|
JSON 数据格式 微服务
.NET下 支持大小写不敏感的JSON Schema验证方法
有很多应用程序在验证JSON数据的时候用到了JSON Schema。 在微服务架构下,有时候各个微服务由于各种历史原因,它们所生成的数据对JSON Object属性名的大小写规则可能并不统一,它们需要消费的JSON数据的属性名可能需要大小写无关。 遗憾的是,目前的JSON Schema没有这方面的标准,标准中都是大小写敏感的。在类似上述情况下,这给使用JSON Schema进行数据验证造成了困难。
208 0