MVC3学习：利用mvc3+ajax检测用户是否被注册

假设用户名是保存在表Users中。关系模式为Users(Uid,UserName,PassWord)

可先利用mvc自带的模板生成Create页面。

将填写用户名的地方，由原来的

 <div class="editor-field">
            @Html.EditorFor(model => model.UserName)
           @Html.ValidationMessageFor(model => model.UserName)
        </div>

变为

 <div class="editor-field">
            @Html.EditorFor(model => model.UserName)
            <a id="usn" href="#" >检测该用户是否可用</a>
            <label id="msg" style="color:Red"></label>
           @Html.ValidationMessageFor(model => model.UserName)
        </div>

即增加一个检测按钮和一个显示结果的label.

在此页面上增加JQuery ajax:

<script type="text/javascript">
    $(function () {
        $("#usn").click(function () {
            var username = $("#UserName").val();
            if (username == "") { alert("请输入您要注册的用户名"); return false; }
            else {
                $.post("IsExistUsn", { usn: username },
                function (data) {
                    if (data == "-1") { $("#msg").text("很遗憾，该用户已经被注册！"); return false; }
                    else { $("#msg").text("恭喜您，该用户还未被注册！"); return false; }
                });
            }
        });
    });
</script>

 

控制器端代码：

   public ActionResult Create()
        {
            return View();
        }
        public ActionResult IsExistUsn(string usn)
        {

            try
            {
                if (Request.IsAjaxRequest())
                {
                    int n = db.Users.Where(c => c.UserName == usn).Count();
                    if (n != 0)
                        return Content("-1");
                    else
                        return Content(n.ToString());
                }
                else
                    return Content("-1");
            }
            catch
            {
                return Content("-1");
            }
        }

Create方法用于生成注册页面，IsExistUsn方法用于判断用户是否存在。与ajax里面的url要一致。