一个页面多个Form——ajaxform

最新推荐文章于 2022-11-09 17:03:26 发布

weixin_30376323

最新推荐文章于 2022-11-09 17:03:26 发布

阅读量74

点赞数

文章标签： javascript 测试 ViewUI

原文链接：http://www.cnblogs.com/Kingdizzy/archive/2013/04/28/3049634.html

版权

有时候会遇到一个页面放多个Form的情况，在mvc中我们知道一个页面只能放一个Model，那如何在使用Model验证的前提下，放多个表单呢？这里使用PartialView+AjaxForm的方式解决。

1 PartialView

对多个表单，建立多个PartialView，Controller层代码如下：

public PartialViewResult Main()
        {
            MainModel model = new MainModel();
            return PartialView(model);
        }

        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Main(MainModel model)
        {
            if (!ModelState.IsValid)
            {
                ViewBag.IndexRe = "Index 验证不通过";
                return PartialView(model);
            }

            ViewBag.IndexRe = "Index 提交成功";
            return PartialView(model);

        }

        public PartialViewResult Child()
        {
            ChildModel model = new ChildModel();
            return PartialView(model);
        }

        [HttpPost]
        [ValidateAntiForgeryToken]
        public PartialViewResult Child(ChildModel model)
        {
            if (!ModelState.IsValid)
            {
                ViewBag.ChildRe = "Child 验证不通过";
                return PartialView(model);
            }

            ViewBag.ChildRe = "Child 提交成功";
            return PartialView(model);
        }

在上面可以看到，有两个子页面，一个是Main，一个是Child，显示页面就负责引用这2个PartialView就可以了：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="http://www.cnblogs.com/Content/Site.css" rel="stylesheet" type="text/css" />
    <script src="http://www.cnblogs.com/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="http://www.cnblogs.com/Scripts/jquery.validate.min.js" type="text/javascript"></script>
    <script src="http://www.cnblogs.com/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
    <script src="http://www.cnblogs.com/Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
    <script type="text/javascript">
        var vallidateChild = function () {
            $('#divchild form').removeData("validator");
            $.validator.unobtrusive.parse('#divchild form');
        };

        var vallidateMain = function () {
            $('#divMain form').removeData("validator");
            $.validator.unobtrusive.parse('#divMain form');
        };
    </script>
</head>
<body>
<div id="divMain">
    @{Html.RenderAction("Main");}
</div>
    <div id="divchild">
        @{Html.RenderAction("Child");}
    </div>
</body>
</html>

2 Ajax.BeginForm

在子页面的view层用，需要标注表单是ajax的，如下：

Child的view如下：

@model MvcApplication8.Models.ChildModel
@using (Ajax.BeginForm("Child", "MultiForm", new AjaxOptions() { UpdateTargetId = "divchild", InsertionMode = InsertionMode.Replace, OnComplete = "vallidateChild()"}))
{@Html.AntiForgeryToken()
    <div>@Html.TextBoxFor(m => m.ChildName)
        @Html.ValidationMessageFor(m => m.ChildName)
    </div>
    <div>
        <input type="submit" id="childBtn" value="子提交" /></div>
}

Main的view如下：

@model MvcApplication8.Models.MainModel
@using (Ajax.BeginForm("Main", "MultiForm", new AjaxOptions() { UpdateTargetId = "divMain", InsertionMode = InsertionMode.Replace, OnComplete = "vallidateMain()" }))
{@Html.AntiForgeryToken()
    <div>
        @Html.TextBoxFor(m => m.LogName)
        @Html.ValidationMessageFor(m => m.LogName)
    </div>
    <div>
        <input type="submit" value="主提交" id="indexBtn" /></div>
}

3 注意

显示页面的js引用必须有如下：

<script src="http://www.cnblogs.com/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="http://www.cnblogs.com/Scripts/jquery.validate.min.js" type="text/javascript"></script>
    <script src="http://www.cnblogs.com/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
    <script src="http://www.cnblogs.com/Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>

同时注意显示页面的js：

<script type="text/javascript">
        var vallidateChild = function () {
            $('#divchild form').removeData("validator");
            $.validator.unobtrusive.parse('#divchild form');
        };

        var vallidateMain = function () {
            $('#divMain form').removeData("validator");
            $.validator.unobtrusive.parse('#divMain form');
        };
</script>

而对这两个js函数的绑定是在AjaxOptions中的OnComplete = "vallidateMain()"。意思是指当提交后执行vallidateMain函数，函数中的意思是指重新绑定jquery的验证。

转载于:https://www.cnblogs.com/Kingdizzy/archive/2013/04/28/3049634.html

weixin_30376323

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个页面多个Form——ajaxform

有时候会遇到一个页面放多个Form的情况，在mvc中我们知道一个页面只能放一个Model，那如何在使用Model验证的前提下，放多个表单呢？这里使用PartialView+AjaxForm的方式解决。1 PartialView对多个表单，建立多个PartialView，Controller层代码如下：public PartialViewResult Main() ...
复制链接

扫一扫