ASP MVC异步提交form表单，Jquery-easyui对话框，表单验证(jquery.validate)

houyanhua1

于 2018-01-10 11:55:20 发布

阅读量1k

点赞数

分类专栏： ASP.NET Ajax 文章标签： asp asp.net c# mvc

本文链接：https://blog.csdn.net/houyanhua1/article/details/79021988

版权

ASP.NET 同时被 2 个专栏收录

89 篇文章 0 订阅

订阅专栏

Ajax

23 篇文章 0 订阅

订阅专栏

View/UserInfo/Index.cshtml:

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/themes/default/easyui.css" rel="stylesheet" />  <!--easyui的CSS文件-->
    <link href="~/Content/themes/icon.css" rel="stylesheet" />      <!--easyui的CSS文件-->
    <script src="~/Scripts/jquery-1.7.1.min.js"></script>
    <script src="~/Scripts/jquery.easyui.min.js"></script>    <!--easyui的JS文件-->
    <script src="~/Scripts/easyui-lang-zh_CN.js"></script>    <!--easyui的中文JS文件-->
    <script src="~/Scripts/datapattern.js"></script>    <!--Json日期字符串格式化(未用到)-->
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>   <!--异步(Ajax)提交form表单所需的JS-->
    <script src="~/Scripts/jquery.validate.min.js"></script>    <!--form表单数据验证的JS-->
    <script type="text/javascript">
        $(function () {
            $("#addDiv").css("display", "none");
            $("#btnAdd").click(function () {
                addInfo();
            });
        });

        //添加数据
        function addInfo() {
            $("#addDiv").css("display", "block");
            $('#addDiv').dialog({
                title: '添加用户数据',
                width: 300,
                height: 200,
                collapsible: true,
                maximizable: true,
                resizable: true,
                modal:true,
                buttons: [{
                    text: 'Ok',
                    iconCls: 'icon-ok',
                    handler: function () {
                        //表单校验
                        validateInfo();
                        $("#addForm").submit();//提交表单
                    }
                }, {
                    text: 'Cancel',
                    handler: function () {
                        $('#addDiv').dialog('close');
                    }
                }]
            });

        }
        //完成添加后调用该方法
        function afterAdd(data) {
            if (data == "ok") {
                $('#addDiv').dialog('close');
                $('#tt').datagrid('reload');//加载表格不会跳到第一页。
                $("#addForm input").val("");
            }
        }
        //表单校验
        function validateInfo() {
            $("addForm").validate({//表示对哪个form表单进行校验，获取form标签的id属性的值
                rules: {//表示验证规则
                    UName: "required",//表示对哪个表单元素进行校验，要写具体的表单元素的name属性的值
                    Remark: {
                        required: true
                    },
                    UPwd: {
                        required: true,
                        minlength: 5
                    },
                    Sort: {
                        required: true
                    }
                },
                messages: {
                    UName: "请输入用户名",
                    Remark: {
                        required: "请输入备注"
                    },
                    UPwd: {
                        required: "请输入密码",
                        minlength: jQuery.format("密码不能小于{0}个字 符")
                    },
                    Sort: {
                        required: "请输入排序"
                    }
                }
            });
        }

        //将序列化成json格式后日期(毫秒数)转成日期格式（未用到）
        function ChangeDateFormat(cellval) {
            var date = new Date(parseInt(cellval.replace("/Date(", "").replace(")/", ""), 10));
            var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
            var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            return date.getFullYear() + "-" + month + "-" + currentDate;
        }
    </script>
</head>

<body>
    <input type="button" id="btnAdd" value="添加" />
    <!--------------添加数据---------------------->
    <div id="addDiv">
        <!--异步(Ajax)提交表单，前两个参数表示路由(方法名和控制器名),第三个参数表示额外传给服务端的参数，OnSuccess表示提交成功后从服务端返回数据的回调函数，最后一个参数可以为form表单添加额外的属性值-->
        @using(Ajax.BeginForm("AddUserInfo", "UserInfo", new { }, new AjaxOptions() {HttpMethod="post",OnSuccess="afterAdd"}, new {id="addForm"})){
          <table>
              <tr><td>用户名</td><td><input type="text" name="UName" /></td></tr>
               <tr><td>密码</td><td><input type="password" name="UPwd" /></td></tr>
               <tr><td>备注</td><td><input type="text" name="Remark" /></td></tr>
               <tr><td>排序</td><td><input type="text" name="Sort" /></td></tr>
          </table>
        }
    </div>

</body>
</html>

服务端控制器中 UserInfoControler.cs:

using XXX.Model;
using XXX.Model.EnumType;
using XXX.Model.Search;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace XXX.WebApp.Controllers
{
    public class UserInfoController :BaseController //Controller
    {
        //
        // GET: /UserInfo/
        IBLL.IUserInfoService UserInfoService{get;set;}
        public ActionResult Index()
        {
            return View();
        }

        #region 添加用户数据
        public ActionResult AddUserInfo(UserInfo userInfo)  //从form表单中传过来的参数，自动填充到userInfo参数中，表单中input的name属性值要和UserInfo的属性值相对应。
        {
            UserInfoService.AddEntity(userInfo);
            return Content("ok");  //服务端返回"ok"，触发客户端OnSuccess的注册的回调函数。Content表示以字符串形式返回，Json表示以Json格式返回。
        }
        #endregion
        
    }
}