zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    [Coding Made Simple] Coin Changes Minimum Number of Coins
    [Coding Made Simple] Egg Dropping
    015_配置免密登录
    014_编写批量修改扩展名脚本,如批量将 txt 文件修改为 doc 文件
    013_使用 user.txt 文件中的人员名单,在计算机中自动创建对应的账户并配置初始密码
    012_使用死循环实时显示 eth0 网卡发送的数据包流量
    011_9*9 乘法表(编写 shell 脚本,打印 9*9 乘法表)
    010_编写脚本测试 192.168.4.0/24 整个网段中哪些主机处于开机状态,哪些主机处于关机状态
    09_编写脚本,实现人机<石头,剪刀,布>游戏
    08_依次提示用户输入 3 个整数,脚本根据数字大小依次排序输出 3 个数字
  • 原文地址:https://www.cnblogs.com/edwardloveyou/p/2582729.html
Copyright © 2011-2022 走看看