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

背景：

　　博客中将构建一个小示例，用于演示在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),用来接收并处理视图传递过来的数据，并返回执行结果给视图，代码如下：

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 < 18) 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 < 18) temp = "的文章好烂啊";
else temp = ",记得烂也要写";
actionResult = new ContentResult()
{
Content = name + temp
};
}
catch(Exception ex)
{
return null;
}
return actionResult;
}

View Code
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: 60 * 60 * 1000,
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 < 18) 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示例完成。