AjaxAjax在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>

相关文章