在视图中验证多个没有 BeginForm 的部分视图答案

【问题标题】：Validate multiple Partial view without BeginForm in a View在视图中验证多个没有 BeginForm 的部分视图
【发布时间】：2017-10-02 10:34:56
【问题描述】：

我有一个View (Index.cshtml)，它有两个模态（Bootstrap 模态）。

我在每个 ‍‍‍modal 中加载了一个Partial View。所以在这个View中，我有两个Partial Views（AddContractHistory.cshtml和AddCompany.cshtml）。

我有一个模型，它的字段应该在每个Partial Views 中进行验证。我需要分别验证每个部分视图。

在同一个问题中，使用了 Html.BeginForm，但我在 MVC 模块和 DNN 8 上工作，不支持 Html.BeginForm 或 Ajax.Html.BeginForm。

为了在没有BeginForm 的情况下完成这项工作，我测试了以下多种方法，但无法正确完成。

ASP.NET MVC Validation Groups?

ASP.NET MVC Multiple form in one page: Validation doesn't work

Index.cshtml（视图）

@using MyProject.BusinessLogic
<div class="form-group">
    <div class="col-sm-12">
        <button type="button" class="btn btn-success" onclick="$('#AddContractHistory').modal('show');">
            <i class="fa fa-plus"></i>
            New ContractHistory
        </button>
    </div>
    <div class="col-sm-12">
        <button type="button" class="btn btn-success" onclick="$('#AddCompany').modal('show');">
            <i class="fa fa-plus"></i>
            New Company
        </button>
    </div>
</div>

<div id="AddContractHistory" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg" id="mymodal">
        @Html.Partial("AddContractHistory", new ContractHistory())
    </div>
</div>
<div id="AddCompany" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg" id="mymodal">
        @Html.Partial("AddCompany", new Company())
    </div>
</div>

AddContractHistory.cshtml（部分视图）

@inherits DotNetNuke.Web.Mvc.Framework.DnnWebViewPage<MyProject.BusinessLogic.ContractHistory>

<div id="myform">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">contract</h4>
        </div>
        <div class="modal-body">
            <div class="row">
                <div class="panel-body">
                    <div class="form-horizontal">
                        @Html.ValidationSummary()
                        @Html.HiddenFor(c => c.ID)
                        <div class="form-group">
                            <div class="col-sm-6">
                                @Html.LabelFor(c => c.PlaceName)
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        <i class="fa fa-file-text-o" aria-hidden="true"></i>
                                    </span>
                                    @Html.EditorFor(c => c.PlaceName, new { htmlAttributes = new { @class = "form-control requierd-field" } })
                                </div>
                            </div>
                            <div class="col-sm-6">
                                @Html.LabelFor(c => c.ActivityDescription)
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        <i class="fa fa-file-text-o" aria-hidden="true"></i>
                                    </span>
                                    @Html.EditorFor(c => c.ActivityDescription, new { htmlAttributes = new { @class = "form-control requierd-field" } })
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="submit" class="btn btn-success" formaction="AddContractHistory">
submit
            </button>
            <button type="button" class="btn btn-default" data-dismiss="modal">cancel</button>
        </div>
    </div>
</div>

AddCompany.cshtml（部分视图）

@inherits DotNetNuke.Web.Mvc.Framework.DnnWebViewPage<MyProject.BusinessLogic.Company>

<div id="myform">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Company</h4>
        </div>
        <div class="modal-body">
            <div class="row">
                <div class="panel-body">
                    <div class="form-horizontal">
                        @Html.ValidationSummary()
                        @Html.HiddenFor(c => c.ID)
                        <div class="form-group">
                            <div class="col-sm-6">
                                @Html.LabelFor(c => c.PlaceName)
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        <i class="fa fa-file-text-o" aria-hidden="true"></i>
                                    </span>
                                    @Html.EditorFor(c => c.PlaceName, new { htmlAttributes = new { @class = "form-control requierd-field" } })
                                </div>
                            </div>
                            <div class="col-sm-6">
                                @Html.LabelFor(c => c.ActivityDescription)
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        <i class="fa fa-file-text-o" aria-hidden="true"></i>
                                    </span>
                                    @Html.EditorFor(c => c.ActivityDescription, new { htmlAttributes = new { @class = "form-control requierd-field" } })
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="submit" class="btn btn-success" formaction="AddCompany">
                submit
            </button>
            <button type="button" class="btn btn-default" data-dismiss="modal">cancel</button>
        </div>
    </div>
</div>

提前致谢！

【问题讨论】：

不熟悉 DNN，但需要一个
来进行 jquery 验证。 stackoverflow.com/questions/23871160/…
@SteveGreene 我的问题与 DNN 无关。事实上，我将在带有控件验证的
中创建两组控件和两个提交按钮。有什么办法吗？
我在您的示例中没有看到
标记。您的问题是验证根本不起作用还是您想独立验证部分类？
Index.cshtml 中有一个 Html.BeginForm，我需要在其中加载两个局部视图。但是两个部分都不应该有
标签。然后我需要验证索引表单标签内的两组控件（与两个部分相关）。如您所知，我需要类似 web 表单中的验证组。

标签： c# jquery asp.net-mvc dotnetnuke model-validation

【解决方案1】：

您可以通过另一种方式实现您的Html.BeginForm，Dotnetnuke 不支持它。

1.更改按钮属性

您应该更改buttons，这会导致将数据发布到操作，如下所示：

<button id="btnAddContractHistory" type="button" class="btn btn-success">
    submit
</button>

<button id="btnAddCompany" type="submit" class="btn btn-success">
    submit
</button>

2。添加事件点击按钮

两次点击事件要求将数据置于期望的操作中。在此事件中，url 不同，action 属性 form 由您的url 更改，之后form.submit() 导致将数据（模型）传递给相关操作。最后，您将在两个不同的操作中验证属性值。

<script>

    $('.modal').find('#btnAddContractHistory').on('click', function () {
        var url = 'AddContractHistory action url'; // It depends on your AddContractHistory action url
        var form = $(this).closest('form');
        form.prop('action', url);
        form.submit();
    });

    $('.modal').find('#btnAddCompany').on('click', function () {
        var url = 'AddCompany action url'; // It depends on your AddCompany action url
        var form = $(this).closest('form');
        form.prop('action', url);
        form.submit();
    });

</script>

【讨论】：

【解决方案2】：

一般来说，我建议您在视图中集成更多的 JS 代码（JQuery ？）。这样一来，您就不会受限于某些不支持您习惯的基本 MVC 功能的框架 (DNN)。毕竟 - 一个网络应用程序归结为 HTML+JS+CSS，所以你拥有更好的 JS 知识 - 你获得更好的控制和灵活性。

关于您的问题，MVC 会为您注入 JS 代码以在提交时处理验证错误。你可以自己模仿这种行为。这需要一些时间，但您将完全控制此过程。

当页面被加载（JS 事件）时，你可以通过 JS 完成一些工作，比如用你想要的 <form> 标签包装你的部分视图，和/或绑定到提交事件。就如此容易。

但常规表单提交会刷新您的页面，丢失其他部分视图数据/状态。因此，如果您需要，您可以通过 AJAX（还是 JQuery？）发布/获取您的数据并相应地更新您的页面。

<form data-reza-ajaxform="true"
      data-reza-targetId="#your-htmlcontrol-id"
      action="@Url.Action("Your Action")"
      method="POST/GET">
          <div class="input-group">
               <input type="text" ...>
               ...
               <button class="btn btn-default" type="submit">Go!</button>
          </div>
</form>

然后，在您的脚本中，您可以执行以下操作：

$('form[data-reza-ajaxform]').on('submit', submitAjaxForm);
...
function submitAjaxForm(e) {
    var $form = $(this);

    var options = {
        url: $form.action,
        method: $form.method,
        data: $form.serialize()
    };

    $.ajax(options)
        .success(function(res) {
            var $target = $($form.attr('data-reza-targetId'));

            $target.html(res);
            $target.effect('highlight', 'slow');
    });

    e.preventDefault();
}

通过这种方式，您可以完全控制您的网页及其部分。无论您将使用哪个框架。什么可以更好？ :)

【讨论】：