validate实行用户注册认证

本系列文章基于ASP.NET MVC
beta.本示例Blog系统同步更新的演示站点:

首先在模板页面中引入jquery类库和jquery.validate类库

在ASP.NET MVC beta发布之前,M$就宣布支持开源的JS框架jQuery,然后ASP.NET
MVC beta发布后,你建立一个ASP.NET MVC
beta的项目后,你可以在项目的scripts目录下找到ASP.NET
AJAX和jQuery的JS。反正我是比较喜欢jQuery的,所以对于M$此举还是挺欣慰的。

<script src=”/Scripts/jquery-1.4.1.js”
type=”text/javascript”></script>
<script src=””
type=”text/javascript”></script>
 <script
src=””
type=”text/javascript”></script>

废话不多说,我们使用AJAX来实现发表评论的功能吧。先来看看怎样使用M$的JS框架来进行异步AJAX请求。

其中JQuery.Validate.Message_cn是对jquery.validate类库中的英文出错信息用中文替换,代码如下:

首先,当然是要引入M$的AJAX框架的JS:

//定义中文消息
var cnmsg = {
required: “必选字段”,
remote: “请修正该字段”,
email: “请输入正确格式的电子邮件”,
url: “请输入合法的网址”,
date: “请输入合法的日期”,
dateISO: “请输入合法的日期 (ISO).”,
number: “请输入合法的数字”,
digits: “只能输入整数”,
creditcard: “请输入合法的信用卡号”,
equalTo: “请再次输入相同的值”,
accept: “请输入拥有合法后缀名的字符串”,
maxlength: jQuery.format(“请输入一个长度最多是 {0} 的字符串”),
minlength: jQuery.format(“请输入一个长度最少是 {0} 的字符串”),
rangelength: jQuery.format(“请输入一个长度介于 {0} 和 {1}
之间的字符串”),
range: jQuery.format(“请输入一个介于 {0} 和 {1} 之间的值”),
max: jQuery.format(“请输入一个最大为 {0} 的值”),
min: jQuery.format(“请输入一个最小为 {0} 的值”)
};
jQuery.extend(jQuery.validator.messages, cnmsg);

<script src=”/Content/MicrosoftAjax.js” type=”text/javascript”></script>
<script src=”/Content/MicrosoftMvcAjax.js” type=”text/javascript”></script> 

一定要注意母板页中引用的先后顺序,因为下边的类库都是基于上边的,所以顺序不能颠倒。

 

然后在view中用jquery.validate进行验证,view代码如下:

ASP.NET
MVC的框架的Helper方法中提供了对他自身的AJAX的支持,使用的是System.Web.Mvc.Ajax命名空间下面的方法。你可以这样写代码:

register.aspx//用户注册页面

图片 1

   <form action=”/Account/LogOn” method=”post” id=”form1″
runat=”server”>
      
        <%: Html.ValidationSummary(true,
“帐户创建不成功。请更正错误并重试。”)%>
        <div>
            <fieldset>
                <legend>帐户信息</legend>
               
                <div class=”editor-label”>
                    <%: Html.Label(“用户名”)%>
                </div>
                <div class=”editor-field”>
                    <%: Html.TextBoxFor(m => m.user_name)%>
                    <%: Html.ValidationMessageFor(m =>
m.user_name)%>
                </div>
               
                <div class=”editor-label”>
                    <%: Html.Label(“邮箱”)%>
                </div>
                <div class=”editor-field”>
                    <%: Html.TextBoxFor(m => m.Email)%>
                    <%: Html.ValidationMessageFor(m =>
m.Email)%>
                </div>
               
                <div class=”editor-label”>
                    <%: Html.Label(“密码”)%>
                </div>
                <div class=”editor-field”>
                    <%: Html.PasswordFor(m => m.pwd)%>
                    <%: Html.ValidationMessageFor(m =>
m.pwd)%>
                </div>
               
                <div class=”editor-label”>
                    <%: Html.Label(“确认密码”)%>
                </div>
                <div class=”editor-field”>
                    <%: Html.Password(“pwdagain”)%>
                    <%: Html.ValidationMessage(“pwdagain”)%>
                </div>
               
                <p>
                    <input type=”submit” value=”注册” />
                </p>
            </fieldset>
        </div>
    </form>
      <script type=”text/javascript”>
          function InitRules() {
              opts = {
                  rules:
                  {
                      user_name:
                        {
                            required: true,
                            remote: {
                                type: “post”,
                                datatype: “json”,
                                url: “/Users/IsUserExist”,
                                data: {
                                        user_name: function () {
                                        return
$(“#user_name”).val();
                                    }

或者:

                                }
                            }
                        }
                            ,
                      Email:
                        {
                            email: true
                        },
                      pwd:
                       {
                           required: true,
                           minlength: 6
                       },
                      pwdagain:
                       {
                           required: true,
                           minlength: 6,
                           equalTo: “#pwd”
                       }
                  },
                  messages:
                  {
                      user_name:
                     {
                         required: “请输入用户名”,
                         remote: “该用户已存在!”
                     }
                  }
              }
         }
         jQuery(document).ready(function () {
             InitRules();
             if (opts != undefined || opts != null) {
                 jQuery(“#<%=form1.ClientID
%>”).validate(opts);
             } else {
                 jQuery(“#<%=form1.ClientID %>”).validate();
             }
         });
               
       </script>
UsersController代码如下:

图片 2

 public class UsersController : Controller
    {
        //
        // GET: /User/
        UserRepository userRepository = new UserRepository();
       
       
      
        public JsonResult IsUserExist(string user_name)
        {
            //JsonResult result = new JsonResult();
            if
(userRepository.ValidateUser(user_name))//查询是否存在该用户
          
            {
                //result.Data = false;
                return Json(false);
              
            }
            else
            {
                //result.Data = true;
                return Json(true);
               
            }
            //return Json(result, JsonRequestBehavior.AllowGet);

在AjaxHelper中并没有EndForm方法,你可以直接写Html来关闭form,或者你也可以使用Html.EndForm();来关闭。好,下面我们来写发表评论的AjaxForm:

        }

图片 3

注意直接返回json(true)或json(false)即可。

这里详细说下AjaxOptions的可选配置的各个属性的作用。

public string Confirm :没测试,不知道干嘛用的,知道的说一下.
public string HttpMethod :就是指定请求的Http方法,”POST” “GET” “PUT” 等等图片 4
public InsertionMode InsertionMode :返回的内容要更新的目标元素的方式。有三种方式:
    Replace :替换目标元素里面的内容;
    InsertBefore :返回内容插入到目标元素的前面;
    InsertAfter:返回内容插入到目标元素的后面。

public string LoadingElementId :指定在进行异步请求的时候要显示的提示信息的Loading元素的ID
public string OnBegin :在发送异步请求前触发的JavaScript方法
public string OnComplete :在发送异步请求完成后触发的JavaScript方法
public string OnFailure :在发送异步请求失败的时候触发的JavaScript方法
public string OnSuccess :在发送异步请求成功的时候触发的JavaScript方法
public string UpdateTargetId :指定返回的内容要更新的目标元素的ID
public string Url :请求的URL,不指定则为form的action的url。

 

在上面的代码中,在异步请求成功后会调用名称为clearComment的JavaScript方法来清除输入框的评论内容,然后返回内容会替换掉id为boxcomments元素里面的内容。完整的客户端代码如下:

图片 5图片 6MS Ajax
<div class=”entry”>
<% 
    Html.RenderPartial(“_commentList”, ViewData.Model.Comments);
    if (BlogSettings.Instance.IsCommentsEnabled){ 

   Ajax.BeginForm(“AddComment”, new { controller = “Home”, id = “” }, new AjaxOptions()
   {
       HttpMethod = “Post”,
       LoadingElementId = “loading”,
       //OnBegin = “commentValidate”,
       OnSuccess = “clearComment”,
       UpdateTargetId = “boxcomments”,
       InsertionMode = InsertionMode.Replace
   }, new { id = “commentform” }); 
%> 

    <h3 id=”respond”>发表评论</h3>
    <p>欢迎留下你的评论,你的支持,是我最大的动力!</p>
    <p><label for=”author”>Name (required)</label>
    <input type=”text” tabindex=”1″ size=”22″ value=”” id=”author” name=”author”/>
    <%= Html.ValidationMessage(“Author”)%></p>
    <p><label for=”email”>E-mail (will not be published) (required)</label>
    <input type=”text” size=”22″ tabindex=”2″ value=”” id=”email” name=”email”/>
    <%= Html.ValidationMessage(“Email”)%></p>
    <p><label for=”url”>Website</label>
    <input type=”text” tabindex=”3″ size=”22″ value=”” id=”Website” name=”Website”/></p> 

    <p><%= Html.ValidationMessage(“Content”)%>
    <textarea tabindex=”4″ rows=”10″ cols=”5″ id=”commentContent” name=”content”></textarea></p> 

    <p><input type=”submit” value=”Submit Comment” tabindex=”5″ id=”submit” name=”submit”/>
    <span id=”loading” style=”display:none;”>数据处理中图片 7</span>
    <input type=”hidden” value=”<%= ViewData.Model.Id %>” id=”comment_post_ID” name=”comment_post_ID”/></p>
</form>
<script type=”text/javascript” language=”javascript”>
    function clearComment(a, b, c, d) {
        $get(“commentContent”).value = “”;
    }    
</script>
<% } %>
</div> 

以上为使用M$的AJAX框架来实现AJAX异步请求,下面来看看使用jQuery怎么做呢。前面说过,我个人比较喜欢jQuery,所以示例的4mvcBlog里面的将使用jQuery来实现。

首先,我们用jQuery写一个用于提交form表单的异步请求的小”插件”:

图片 8图片 9(function($) 图片 10{
图片 11图片 12    $.fn.ajaxForm = function(success) 图片 13{
图片 14        var form = $(this);
图片 15        var btn = form.find(“:submit”);
图片 16图片 17        form.submit(function() 图片 18{
图片 19图片 20            $.ajax(图片 21{
图片 22                url: form.attr(“action”),
图片 23                type: form.attr(“method”),
图片 24                data: form.serialize(),
图片 25图片 26                beforeSend: function(xhr) 图片 27{
图片 28                    btn.attr(“disabled”, true);
图片 29                    showLoading();
图片 30                },
图片 31图片 32                success: function(data) 图片 33{
图片 34图片 35                    if (success) 图片 36{ success(data); }
图片 37                },
图片 38图片 39                error: function() 图片 40{
图片 41                    alert(“请求出错,请重试”);
图片 42                },
图片 43图片 44                complete: function() 图片 45{
图片 46                    btn.attr(“disabled”, false);
图片 47                    hideLoading();
图片 48                }
图片 49            });
图片 50            return false;
图片 51        });
图片 52    };
图片 53图片 54    function showLoading() 图片 55{
图片 56        $(“#loading”).css(“display”, “”);
图片 57    };
图片 58图片 59    function hideLoading() 图片 60{
图片 61        $(“#loading”).css(“display”, “none”);
图片 62    };
图片 63})(jQuery); 

 

然后我们不需要修改原来的一般的form,我们只需要使用ajaxForm
方法来指定要进行ajax请求的form的id就可以了:

图片 64<form id=”commentform” method=”post” action=”<%= Url.Action(“AddComment”,new{controller=”Home”,id=””}) %>”> 
图片 65
图片 66<h3 id=”respond”>发表评论</h3>
图片 67    <p>欢迎留下你的评论,你的支持,是我最大的动力!</p>
图片 68    <p><label for=”author”>Name (required)</label>
图片 69    <input type=”text” tabindex=”1″ size=”22″ value=”” id=”author” name=”author”/>
图片 70    <%= Html.ValidationMessage(“Author”)%></p>
图片 71    <p><label for=”email”>E-mail (will not be published) (required)</label>
图片 72    <input type=”text” size=”22″ tabindex=”2″ value=”” id=”email” name=”email”/>
图片 73    <%= Html.ValidationMessage(“Email”)%></p>
图片 74    <p><label for=”url”>Website</label>
图片 75    <input type=”text” tabindex=”3″ size=”22″ value=”” id=”Website” name=”Website”/></p> 
图片 76
图片 77    <p><%= Html.ValidationMessage(“Content”)%>
图片 78    <textarea tabindex=”4″ rows=”10″ cols=”5″ id=”commentContent” name=”content”></textarea></p> 
图片 79
图片 80    <p><input type=”submit” value=”Submit Comment” tabindex=”5″ id=”submit” name=”submit”/>
图片 81    <span id=”loading” style=”display:none;”>数据处理中图片 82</span>
图片 83    <input type=”hidden” value=”<%= ViewData.Model.Id %>” id=”comment_post_ID” name=”comment_post_ID”/></p>
图片 84</form>
图片 85
图片 86
图片 87图片 88<script type=”text/javascript” language=”javascript”>图片 89    
图片 90
图片 91//我们只需要在这里注册一下事件就可以,这就是jQuery和Html干净的分离的优雅。
图片 92$(“#commentform”).ajaxForm(success);
图片 93图片 94    function success(data) 图片 95{
图片 96图片 97        if (data.search(/^\{[\s\S]+\}$/img) > -1) 图片 98{
图片 99            alert(eval(“(” + data + “)”).ErrorMsg.toString());
图片 100图片 101        } else 图片 102{
图片 103            var c = $(“.boxcomments”);
图片 104图片 105            if (c.length <= 0) 图片 106{
图片 107                c = $(‘<div ></div>’);
图片 108                c.insertBefore(“#commentform”);
图片 109            }
图片 110            c.html($(data).find(“.boxcomments”).html());
图片 111            $(“#commentContent”).val(“”);
图片 112        }
图片 113    } 
图片 114
图片 115</script>

后台代码如下:

图片 116图片 117Code
[AcceptVerbs(HttpVerbs.Post | HttpVerbs.Put), CallByAjax(true)]
public ActionResult AddCommentByAjax(FormCollection form)
{
    JsonResultData jsonData = new JsonResultData();
    Comment comment = new Comment();
    string postId = form[“comment_post_ID”] ?? “”;
    Post post = Post.GetPost(new Guid(postId));
    if (TryUpdateModel(comment, new[] { “Content”, “Author”, “Email” }))
    {
        if (comment.IsValid)
        {
            comment.Id = Guid.NewGuid();
            comment.Author = Server.HtmlEncode(comment.Author);
            //comment.Email = email;
            comment.Content = Server.HtmlEncode(comment.Content);
            comment.IP = Request.UserHostAddress;
            //comment.Country = country;
            comment.DateCreated = DateTime.Now;
            comment.Parent = post;
            comment.IsApproved = !BlogSettings.Instance.EnableCommentsModeration; 

            if (User.Identity.IsAuthenticated)
                comment.IsApproved = true; 

            string website = form[“Website”] ?? “”;
            if (website.Trim().Length > 0)
            {
                if (!website.ToLowerInvariant().Contains(“://”))
                    website = ” + website; 

                Uri url;
                if (Uri.TryCreate(website, UriKind.Absolute, out url))
                    comment.Website = url;
            } 

            post.AddComment(comment);
            SetCommentCookie(comment.Author, comment.Email, website, comment.Country);
            return View(“_commentList”, post.Comments);
        }
        else
        {
            foreach (string key in comment.BrokenRules.Keys)
            {
                //将验证不通过的信息添加到错误信息列表
                jsonData.ErrorMsg.Add(comment.BrokenRules[key]);
            }
        }
    }
    jsonData.IsError = true;
    return Json_Net(jsonData);//如果业务逻辑验证不通过,则返回JSON结果表示的失败信息

对于上面的后台代码的[CallByAjax(true)]特性你可以参考我Asp.net Mvc
Preview 5
体验–实现ActionSelectionAttribute来判断是否为AJAX请求而选择不同的Action这一篇文章。

暂时就到这里吧。Enjoy!具体效果请下载示例代码运行查看或到演示站点
by Q.Lee.lulu 。

最新的Blog示例程序代码: 4mvcBlog_10.rar


更多内容,请关注 和


Post Author: admin

发表评论

电子邮件地址不会被公开。 必填项已用*标注