在带有部分视图的 MVC 5 中将提交按钮移到表单之外

Posted 2023-03-05

【中文标题】在带有部分视图的 MVC 5 中将提交按钮移到表单之外

【英文标题】：Moving the submit button outside the form in MVC 5 with Partial view

【发布时间】：2015-04-03 22:34:22

【问题描述】：

在 MVC 5 中，

我有一个编辑对话框。

内容区域是从局部视图创建的。

如果我在部分视图的表单中有提交按钮，它就可以工作。但我希望保存按钮位于对话框的按钮上，因此位于表单和部分视图之外。

现在的问题是没有发布表单数据。你会如何解决这个问题？

我有两个想法： 1) 将表单包裹在 Partial 视图之外 2）发出AJAX请求而不使用助手，并以某种方式从表单中收集数据？感觉不是正确的方法。

对话框：

<div id="myModal" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Edit database connection</h4>
            </div>
            <div class="modal-body">
                @ html.RenderPartial("View");  
            </div>
            <div class="modal-footer">
                <button id="saveBtnSettings" type="button" class="btn btn-primary">Save</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

对话框 javascript

var saveSettings = function () 
    var url = buildUrl("Edit", "Setting");

    $.ajax(
        type: "POST",
        url: url
    )
    .done(function (data, textStatus, jqXhr) 
        alert('done' + data);
    )
    .fail(function (jqXhr, textStatus, errorThrown) 
        alert(textStatus.toUpperCase() + ": " + errorThrown + 'Could not load html. ');
    );
;

部分视图

@using (Ajax.BeginForm("Edit", "Setting", new AjaxOptions  UpdateTargetId = "div" ))

    <fieldset>
        @Html.AntiForgeryToken()

        <div class="form-horizontal">
            @Html.ValidationSummary(true, "", new  @class = "text-danger" )
            <div class="form-group">
                @Html.LabelFor(model => model.User, htmlAttributes: new  @class = "control-label col-md-2" )
                <div class="col-md-10">
                    @Html.EditorFor(model => model.User, new  htmlAttributes = new  @class = "form-control"  )
                    @Html.ValidationMessageFor(model => model.User, "", new  @class = "text-danger" )
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.DataSource, htmlAttributes: new  @class = "control-label col-md-2" )
                <div class="col-md-10">
                    @Html.EditorFor(model => model.DataSource, new  htmlAttributes = new  @class = "form-control"  )
                    @Html.ValidationMessageFor(model => model.DataSource, "", new  @class = "text-danger" )
                </div>
            </div>

        </div>
    </fieldset>

部分视图 - 与表单内的按钮一起使用

@using (Ajax.BeginForm("Edit", "Setting", new AjaxOptions  UpdateTargetId = "div" ))

    <fieldset>
        @Html.AntiForgeryToken()

        <div class="form-horizontal">
            @Html.ValidationSummary(true, "", new  @class = "text-danger" )
            <div class="form-group">
                @Html.LabelFor(model => model.User, htmlAttributes: new  @class = "control-label col-md-2" )
                <div class="col-md-10">
                    @Html.EditorFor(model => model.User, new  htmlAttributes = new  @class = "form-control"  )
                    @Html.ValidationMessageFor(model => model.User, "", new  @class = "text-danger" )
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.DataSource, htmlAttributes: new  @class = "control-label col-md-2" )
                <div class="col-md-10">
                    @Html.EditorFor(model => model.DataSource, new  htmlAttributes = new  @class = "form-control"  )
                    @Html.ValidationMessageFor(model => model.DataSource, "", new  @class = "text-danger" )
                </div>
            </div>
            <p>
                <input type="submit" value="Calculate" /> @* WORKS WITH BUTTON INSIDE OF FORM *@
            </p>
        </div>
    </fieldset>

【问题讨论】：

隐藏视图中的提交按钮并从对话框的保存按钮触发 submit()，而不是我猜？

【参考方案1】：

只需使用 javascript 提交表单：

function SubmitMyForm()
    document.getElementById("myForm").submit();

HTML：

 <input type="button" value="Calculate" onclick="SubmitMyForm()" />

【参考方案2】：

我想你正在寻找：document.myform.submit();

Here is a Fiddle 改编自 this page 的代码形式。

【参考方案3】：

您可以通过指定form 属性将提交按钮放置在表单标签之外（仅限HTML5）

<form .... id="editform">
  ....
</form>

<input type="submit" form="editform" />

注意如果提交按钮有value属性，则不会回发。

另一种选择可能是使用 css 来定位它。

【讨论】：

简单而完美。正是我需要的。神奇的部分现在已经消失了。