Ajax在MVC中的使用

Ajax在MVC中的使用更加方便,在webForm當中,當項目比較大時,有時一個頁面要調用十幾個ajax,我們往往會使用一堆的一般處理程序(ashx),確實很繁瑣;當然你也可以使用WebService或WCF,但僅僅為了Ajax而調用WebService和WCF,感覺像是殺雞用牛刀!

而在MVC中,調用Ajax就跟調用普通方法一樣,主要使用以下兩種方式調用

前端代碼:

    <%using (Ajax.BeginForm("Create", null, new AjaxOptions { HttpMethod = "POST" }, new { id="form1"}))
      { %>
     <%-- <%using (Html.BeginForm("Create", "Home", FormMethod.Post, new { id="form1"}))
        { %> 這是沒有使用ajax的form--%>
      <%:Html.Label("Name")%>
      <%:Html.TextBox("Name")%>
      <%:Html.ValidationMessage("Name")%><br />
      <%:Html.Label("Password")%>
      <%:Html.TextBox("Password")%>
      <%:Html.ValidationMessage("Password")%><br />
      <%:Html.Label("Password2")%>
      <%:Html.TextBox("Password2")%>
      <%:Html.ValidationMessage("Password2")%><br />
      <%:Html.Label("Email")%>
      <%:Html.TextBox("Email")%>
      <%:Html.ValidationMessage("Email")%><br />
      <input type="submit" value="注 冊" id="submit"/>
        <%} %>
    </div>
    <input type="button" value="添加" id="add"/><%--jquery提交--%>

 

Model的代碼

public class RegisterUserModel
    {
        [Display( Name="用戶名")]
        [Required(ErrorMessage="用戶名不能為空")]
        //[Remote("ValidateName","Home",ErrorMessage="用戶名長度必須為4-12位")]
        [Remote("ValidateUserName","Home",ErrorMessage="該用戶名已經被注冊")]//使用ajax方法進行驗證
        public string Name { get; set; }

        [Display(Name = "密碼")]
        [Required(ErrorMessage = "密碼不能為空")]
        public string Password { get; set; }

        [Display(Name = "確認密碼")]
        [Compare("Password",ErrorMessage="確認密碼與新密碼不一致")]
        public string Password2 { get; set; }

        [Display(Name = "郵箱")]
        [Required(ErrorMessage = "郵箱不能為空")]
        [RegularExpression(@"\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*",ErrorMessage="郵箱格式不正確")]
        public string Email { get; set; }
    }

Controller

        [HttpPost]
        public ActionResult Create(RegisterUserModel collection)
        {
            if (ModelState.IsValid)
            {
                Users user = new Users
                {
                    UserName = collection.Name,
                    Password = collection.Password,
                    Email = collection.Email
                };
                context.AddToUsers(user);
                context.SaveChanges();
                return Json("ok");
            }
            return Json("fail");
        }

 

一.Ajax.BeginForm(),這是調用微軟已經幫我們封裝好了的方法

   實現如前端代碼所示:

    <%using (Ajax.BeginForm("Create", null, new AjaxOptions { HttpMethod = "POST" }, new { id="form1"}))
      { %>

調用的action為Create,使用Post方式;非常方便!

二,使用jquery的ajax方法,個人還是習慣於使用jquery.

   jquery代碼如下

    $(function () {
                $("#add").click(function () {
                    $.post("Create", $("#form1").serialize(), function (data, status) {
                        if (status == "success") {
                            alert(data);
                        }
                    });
                });
    });

 記得別忘了引用:

<script src="<%: Url.Content("~/Scripts/jquery-1.4.4.min.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery.validate.min.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js") %>" type="text/javascript"></script>