在ASP.NET MVC中使用Ajax-优快云博客

本文通过《用户名是否已被注册》实例，详细介绍了如何在ASP.NET MVC应用中使用Ajax实现实时用户名验证。涵盖前端JavaScript与jQuery代码配置及后端控制器响应处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文章适用于 asp.net mvc 3或者4 ，其余没有测试过！！！

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

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

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

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

@{
    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中有这么一个动作方法：

public ActionResult MyPost(string name)
        {
            string flg = "用户名可用";
            if (name == "123")
            {
                flg = "用户名不可用";
            }
            return Content(flg);
        }

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

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

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

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

///<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的内容。