在ASP.NET MVC中使用Ajax

网页前端编程，常常会用到jquery，json和ajax当然是个棘手问题啊。

下面用《用户名是否已经被注册》的例子，先说说ajax的用法：

我们要做出的效果是：在输入框输入的过程中会自动判断用户名是否以占用。

首先在home/index视图中加入一个输入框和用于提示的span

[html] view
plaincopy





@{

ViewBag.Title = "Home Page";

}

<h2>@ViewBag.Message</h2>

<p>

To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.

</p>

<div id="registerDIV">

<p>

<input type="text" id="t1" />

<span id="s1"></span>

</p>

</div>

<script type="text/javascript" src="../../Scripts/myjs.js"></script>

里面的myjs.js文件就是用来编辑这个页面的脚本的，下面会介绍到的。

然后我们把目光转向后台代码，在homecontroller中有这么一个动作方法：

[csharp] view
plaincopy





public ActionResult MyPost(string name)

{

string flg = "用户名可用";

if (name == "123")

{

flg = "用户名不可用";

}

return Content(flg);

}

里面简单的判断用户名是不是等于123，相等则不可用。

具体这么写你自己喜欢吧。重点是返回的并不是View而是Content。

return content的意思很清楚，就是返回一个内容！当ajax的post方法调用MyPost函数时就可以返回想要的内容。

接下来我们看一下myjs,js里面的代码吧：

[javascript] view
plaincopy





///<reference path="~/Scripts/jquery-1.5.1.min.js" />

$(function () {

$("#t1").keyup(function () {

$.ajax({

type: "POST",

url: "/Home/MyPost",

data: "name=" + $("#t1").val(),

success: function (responseData) {

$("#s1").empty();

$("#s1").text(responseData);

}

});

})

})

很简单，当输入框t1按键时，就触发post事件。

url对应的是刚刚写的动作方法MyPost，因为动作方法对应一个视图（页面）

data指的是从页面传给后台的值，他的参数名要跟动作方法的参数名一样！！

susscess指的是成功之后调用的方法，里面的responseData就是MyPost方法中return content的内容。