在ASP.NET MVC中使用Ajax

本文章适用于  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的内容。



相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在,都有一个你没有努力的曾经。