在带有部分视图的 MVC 5 中将提交按钮移到表单之外
Posted
技术标签:
【中文标题】在带有部分视图的 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">×</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 来定位它。
【讨论】:
简单而完美。正是我需要的。神奇的部分现在已经消失了。以上是关于在带有部分视图的 MVC 5 中将提交按钮移到表单之外的主要内容,如果未能解决你的问题,请参考以下文章