在MVC 5中使用局部视图将提交按钮移出表单

Question

在MVC 5中，我有一个编辑对话框。内容区域是由一个局部视图创建的。如果将提交按钮放在局部视图中的表单内，它可以正常工作。但是我想把保存按钮放在对话框底部，因此在表单和局部视图之外。现在问题是表单数据无法提交。您会如何解决这个问题？我有两个想法： 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>

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

- radbyx

---

在视图中隐藏提交按钮，改为通过对话框的保存按钮触发submit()？ - radbyx

Answer 1

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

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

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

请注意，如果提交按钮具有值属性，则不会被发送回服务器。

另一个选择可能是使用CSS进行定位。

- user3559349

---

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

Answer 2

只需使用JavaScript提交表单：

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

HTML：

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

- User

Answer 3

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

这里是一个 Fiddle，代码来自这个页面。

- PeterM