从 Bootstrap 模式弹出窗口提交数据

Question

我希望我的用户能够从 Bootstrap 模式弹出窗口提交数据。

我想知道是否有人有这样做的经验，以及您如何将数据发布回服务器。 Razor Pages 有很多结构来处理错误等，看起来你会失去所有这些。

您是否将<form> 标签放在模态弹出窗口中？在这种情况下，似乎无法处理服务器端错误。 （或者你找到方法了吗？）

或者您是否使用 AJAX 提交数据，这需要更多工作，但您可以根据需要报告错误。

Answer 1

这里有一个完整的演示，如何在表单发布后出现错误时重新打开模式。此演示是使用 MVC 和 Bootstrap 4 制作的。为了使前端验证正常工作，假设您已将默认 MVC jquery.validate 添加到皮肤中。

首先是一个模型

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

@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">&times;</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，因此我们可以查找它。

$(document).ready(function () {
    if ($('.validation-summary-errors').length) {
        $('#exampleModal').modal('show');
    }
});