从Bootstrap模态弹出窗口提交数据 [英] Submitting data from a Bootstrap modal popup
问题描述
我希望我的用户能够从Bootstrap模态弹出窗口提交数据.
I'd like my users to be able to submit data from a Bootstrap modal popup.
我想知道是否有人有这样做的经验，以及如何将数据发布回服务器.Razor Pages具有处理错误等的大量结构，看来您将失去所有这些.
I'm wondering if anyone has experience doing this, and how you posted the data back to the server. Razor Pages have a lot of structure in place to deal with errors, etc. and it seems like you'd lose all that.
您是否将< form> 标记放置在模式弹出窗口中?在这种情况下，似乎无法处理服务器端错误.(或者您找到方法了?)
Did you place the <form> tag right inside the modal popup? In this case, it appears there is no way to handle server-side errors. (Or did you find a way?)
还是您使用AJAX提交了数据，这需要做更多的工作，但是您可以根据需要报告错误.
Or did you submit the data using AJAX, which requires some more work but you could report errors however you wanted.
推荐答案
这里有一个完整的演示，当有错误时，如何在表单发布后重新打开模式.此演示是使用MVC和Bootstrap 4制作的.为了使前端验证正常工作，我们假定您已将默认的MVC jquery.validate添加到皮肤.
Here a complete demo how to re-open a modal after a form post when there are errors. This demo is made with MVC and Bootstrap 4. For the front-end validation to work this assumes you have the default MVC jquery.validate added to the skin.
那么首先是一个模型
public class ModalFormDemoModel
{
[Display(Name = "Email address")]
[Required(ErrorMessage = "Your email address is required.")]
[EmailAddress(ErrorMessage = "Incorrect email address.")]
public string EmailAddress { get; set; }
[Display(Name = "First name")]
public string FirstName { get; set; }
[Display(Name = "Last name")]
[Required(ErrorMessage = "Your last name is required.")]
[StringLength(50, MinimumLength = 3, ErrorMessage = "Your last name is too short.")]
public string LastName { get; set; }
public string ResultMessage { get; set; }
}
然后使用html和剃须刀
@model WebApplication1.Models.ModalFormDemoModel
@{
ViewBag.Title = "Modal Form Demo";
}
<div class="container">
@if (!string.IsNullOrEmpty(Model.ResultMessage))
{
<div class="row">
<div class="col">
<div class="alert alert-success" role="alert">
@Model.ResultMessage
</div>
</div>
</div>
}
<div class="row">
<div class="col">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Open Modal
</button>
</div>
</div>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal Form Demo</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
<div class="container-fluid">
<div class="row">
<div class="col">
@Html.ValidationSummary()
</div>
</div>
<div class="row">
<div class="col">
<div class="form-group">
@Html.LabelFor(m => m.FirstName)
@Html.TextBoxFor(m => m.FirstName, new { @class = "form-control", maxlength = 25 })
@Html.ValidationMessageFor(m => m.FirstName)
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="form-group">
@Html.LabelFor(m => m.LastName)
@Html.TextBoxFor(m => m.LastName, new { @class = "form-control", maxlength = 50 })
@Html.ValidationMessageFor(m => m.LastName)
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="form-group">
@Html.LabelFor(m => m.EmailAddress)
@Html.TextBoxFor(m => m.EmailAddress, new { @class = "form-control", maxlength = 100 })
@Html.ValidationMessageFor(m => m.EmailAddress)
</div>
</div>
</div>
<div class="row mt-4">
<div class="col">
<button class="btn btn-primary" type="submit">
Submit Form
</button>
</div>
<div class="col">
<button class="btn btn-secondary float-right" type="button" data-dismiss="modal">
Cancel
</button>
</div>
</div>
</div>
@Html.AntiForgeryToken()
}
</div>
</div>
</div>
</div>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}
控制器代码
public ActionResult Index()
{
return View(new ModalFormDemoModel());
}
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Index(ModalFormDemoModel model)
{
//add a custom error
ModelState.AddModelError(string.Empty, "This is a custom error for testing!");
//check the model (you should also do front-end vlidation, as in the demo)
if (!ModelState.IsValid)
{
return View(model);
}
//do your stuff
//add a success user message
model.ResultMessage = "Your form has been submitted.";
return View(model);
}
最后，如果 ValidationSummary 处于活动状态，则可以使用一些JavaScript打开模式.ValidationSummary生成带有类 validation-summary-errors 的html，因此我们可以寻找它.
And finally some javascript to open the modal if the ValidationSummary is active. The ValidationSummary generates html with the class validation-summary-errors, so we can look for that.
$(document).ready(function () {
if ($('.validation-summary-errors').length) {
$('#exampleModal').modal('show');
}
});
这篇关于从Bootstrap模态弹出窗口提交数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
