在 MVC 5 中,
我有一个用于编辑的对话框。
内容区域是从局部 View 创建的。
如果我在部分 View 中的表单内有提交按钮,它就可以工作。但我希望“保存”按钮位于对话框的按钮上,因此位于表单和局部 View 之外。
现在的问题是表单数据没有发布。你会如何解决这个问题?
我有两个想法: 1)将表格包裹在局部 View 之外 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. ');
});
};
局部 View
@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>
}
局部 View - 使用表单内的按钮
@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>
}
最佳答案
您可以通过指定 form
属性(仅限 HTML5)将提交按钮放置在表单标签之外
<form .... id="editform">
....
</form>
<input type="submit" form="editform" />
请注意,如果提交按钮具有值属性,则不会回发。
另一种选择可能是使用 css 来定位它。
关于javascript - 使用局部 View 将提交按钮移到 MVC 5 中的表单之外,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28320795/