如何构建 MVC&AJax&JSon示例
背景:
博客中将构建一个小示例,用于演示在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),用来接收并处理视图传递过来的数据,并返回执行结果给视图,代码如下:
public ActionResult AddUsers()
{
var my = new MyModel();
string result = string.Empty;
if(Request.IsAjaxRequest())
{
this.UpdateModel(my);
string name = my.Name;
int age = my.Age;
if (age < ) result = name+"的文章好烂啊";
else result = name+",记得烂也要写";
}
return Content(result);
}
如代码所示:直接用Content返回一个字符串。
或者是返回一个 ContentResult()对象,与上面的代码类似(可以折叠了),代码如下:
public ActionResult DoWithUsers()
{
var actionResult = default(ContentResult);
var my = new MyModel();
try
{
this.UpdateModel(my);
string name = my.Name;
int age = my.Age;
string temp = "";
if (age < ) temp = "的文章好烂啊";
else temp = ",记得烂也要写";
actionResult = new ContentResult()
{
Content = name + temp
};
}
catch(Exception ex)
{
return null;
}
return actionResult;
}
3,修改Jquery&Ajax代码:
$(document).ready(function () {
$("#btn1").click(function () {
var data = "";
var name = $("#txtName").val();
var age = $("#txtAge").val();
data += "&Name=" + encodeURI(name);
data += "&Age=" + encodeURI(age);
$.ajax({
async: true,
cache: false,
timeout: * * ,
data: data,
type: "GET",
datatype: "JSON",
url: "/Ajax/AddUsers",
success:function(result)
{
$("#display").text(result);
},
error: function (result) {
$("#display").html("error");
},
})
});
4,运行效果如图:
以上,最简单的ASP.NET MVC4&JQuery&AJax示例完成了。
以Json方式发送Action处理后的结果:
更多的情况下,不止是返回一个字符串,而是以Json的方式返回结果。
5,修改Action如下:
public ActionResult DoWithUsers()
{
var my = new MyModel();
try
{
this.UpdateModel(my);
string name = my.Name;
int age = my.Age;
string temp = "";
if (age < ) temp = "的文章好烂啊";
else temp = ",记得烂也要写";
JavaScriptSerializer jss = new JavaScriptSerializer();
return Json(jss.Serialize(new { Name = name, Message = temp }), JsonRequestBehavior.AllowGet);
}
catch(Exception ex)
{
return null;
}
}
说明:JSon方法返回一个JSonResult,而JSonResult同样是继承自ActionResult的。
6,修改AJax部分,代码如下:
success:function(result)
{
result = JSON.parse(result);
$("#display").text(result.Name + result.Message);
},
运行效果一致。
以上,最简单的ASP.NET MVC4&JQuery&AJax&JSon示例完成。
出处:http://www.cnblogs.com/SharpL/p/4641040.html
如何构建 MVC&AJax&JSon示例的更多相关文章
- 如何构建ASP.NET MVC4&JQuery&AJax&JSon示例
背景: 博客中将构建一个小示例,用于演示在ASP.NET MVC4项目中,如何使用JQuery Ajax. 步骤: 1,添加控制器(HomeController)和动作方法(Index),并为Inde ...
- MVC $.Ajax()+Json实现数据库访问并显示数据
我们在使用搜索引擎时经常会看到这样一个效果 在输出输入相关文字时会有与之对应的相关提醒,作为一个MVC初学者我也做了一个简单版的“搜索工具”,分享给初学mvc和ajax的童鞋(各位大神勿喷),也加深我 ...
- ajax使用向Spring MVC发送JSON数据出现 org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported错误
ajax使用向Spring MVC发送JSON数据时,后端Controller在接受JSON数据时报org.springframework.web.HttpMediaTypeNotSupportedE ...
- Spring MVC使用@RestController生成JSON示例
继上一章的生成JSON示例http://www.cnblogs.com/EasonJim/p/7500405.html,现在还有另一种选择,就是使用@RestController,下面将参照上一节例子 ...
- php ajax json jquery 记录
php+jquery+ajax+json简单小例子 <html> <title>php+jquery+ajax+json简单小例子</title> <?php ...
- php+jquery+ajax+json简单小例子
直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...
- 基于MVC4+EF5.0+Ajax+Json+CSS3的简单注册页面(get&post)
使用mvc4可以很快速的创建页面,但封装的过多,难免会有些性能上的问题.所以基于此,通过使用简单的手写html,加ajax,json来创建一个注册页面,会比较干净,简洁. 本项目的环境是MVC4+EF ...
- spring mvc返回json字符串的方式
spring mvc返回json字符串的方式 方案一:使用@ResponseBody 注解返回响应体 直接将返回值序列化json 优点:不需要自己再处理 步骤一:在spring- ...
- JFreeChart与AJAX+JSON+ECharts两种处理方式生成热词统计可视化图表
本篇的思想:对HDFS获取的数据进行两种不同的可视化图表处理方式.第一种JFreeChar可视化处理生成图片文件查看.第二种AJAX+JSON+ECharts实现可视化图表,并呈现于浏览器上. 对 ...
随机推荐
- Java基础-String和StringBuilder类型(11)
String类概述 字符串是由多个字符组成的一串数据字符串可以看成是字符数组 构造方法 public String(String original)public String(char[] value ...
- Leetcode 89
回溯写到自闭:不想就删了: class Solution { public: vector<int> grayCode(int n) { vector<vector<int&g ...
- Is your JDeveloper Slow? - It shouldn't be!(转)
我的Jdeveloper随便点一个AM,code的显示速度和手指的反应速度跟不上,真的是着急,忍了好久,找到以下教程. 经过考虑,仅仅只是在jdev.conf(jdevbin/jdev/bin/jde ...
- 84. Largest Rectangle in Histogram *HARD* -- 柱状图求最大面积 85. Maximal Rectangle *HARD* -- 求01矩阵中的最大矩形
1. Given n non-negative integers representing the histogram's bar height where the width of each bar ...
- 铺音out1
1◆ 单个 c k s tʃ g gg g dʒ 2◆ 多个 si dʒ su wr w wh sc s ph f gh ck ʃ ch sh tc ...
- 标准库头文件 (CA2T)
标准库中,CA2T,CA2W的头文件是: #include <atlstr.h>
- javaScript 变量提升 var let const,以及JS 的解析阶段和执行阶段
我们先来看一道面试题,大家猜想一下,下面这段代码,打印出来的结果是什么 var name = 'World!'; (function () { if (typeof name === 'undefin ...
- PHP:第三章——PHP中函数的实参多余形参的处理方法
<?phpheader("Content-Type:text/html;charset=utf-8");//传参的函数/*function F($a){ echo $a ...
- Tarjan 算法求强联通分量
转载自:http://blog.csdn.net/xinghongduo/article/details/6195337 还是没懂Tarjan算法的原理.但是感觉.讲的很有道理. 说到以Tarjan命 ...
- 推荐十款java开源中文分词组件
1:Elasticsearch的开源中文分词器 IK Analysis(Star:2471) IK中文分词器在Elasticsearch上的使用.原生IK中文分词是从文件系统中读取词典,es-ik本身 ...