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>
更多专业前端知识,请上 【猿2048】www.mk2048.com