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

在MVC5中

我有一个编辑对话框

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

如果我在部分视图中的表单中有submit按钮，它就会工作。但我希望保存按钮位于对话框的按钮处，因此位于窗体和局部视图之外

现在的问题是表单数据无法过帐。你将如何解决这个问题

我有两个想法： 1） 将窗体包装到局部视图之外 2） 发出AJAX请求而不使用helper，以某种方式从表单收集数据？感觉不太对劲

对话框：

<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>

局部视图

@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>
}

@使用（Ajax.BeginForm（“编辑”、“设置”、新的AjaxOptions{UpdateTargetId=“div”}））
{
@Html.AntiForgeryToken（）
@Html.ValidationSummary（true，“，new{@class=“text danger”}）
@LabelFor（model=>model.User，htmlAttributes:new{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.User，new{htmlAttributes=new{@class=“form control”}）
@Html.ValidationMessageFor（model=>model.User，“，new{@class=“text danger”}）
@LabelFor（model=>model.DataSource，htmlAttributes:new{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.DataSource，new{htmlAttributes=new{@class=“form control”}}）
@Html.ValidationMessageFor（model=>model.DataSource，“，new{@class=“text danger”}）
}

局部视图-与表单内部的按钮配合使用

@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>
}

@使用（Ajax.BeginForm（“编辑”、“设置”、新的AjaxOptions{UpdateTargetId=“div”}））
{
@Html.AntiForgeryToken（）
@Html.ValidationSummary（true，“，new{@class=“text danger”}）
@LabelFor（model=>model.User，htmlAttributes:new{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.User，new{htmlAttributes=new{@class=“form control”}）
@Html.ValidationMessageFor（model=>model.User，“，new{@class=“text danger”}）
@LabelFor（model=>model.DataSource，htmlAttributes:new{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.DataSource，new{htmlAttributes=new{@class=“form control”}}）
@Html.ValidationMessageFor（model=>model.DataSource，“，new{@class=“text danger”}）

@*在窗体内部使用按钮*@

}

您可以通过指定

表单

属性（仅限HTML5）在表单标签外放置提交按钮

....

注意：如果submit按钮具有value属性，则不会发回

---

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

我想您正在寻找：

document.myform.submit（）

改编自的代码形式
 只需使用Javascript提交表单即可：

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

HTML:


在视图中隐藏submit按钮，并从对话框的save按钮触发submit（），我猜是简单而完美的。正是我需要的。神奇的部分现在消失了。
<form .... id="editform">
  ....
</form>

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

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

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