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

Question

我希望我的用户能够从一个Bootstrap模式弹出式中提交数据。

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

你是否将 <form> 标签就在模态弹出窗口内？在这种情况下，似乎没有办法处理服务器端的错误。(或者你找到了一个方法？)

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

Answer 1

这里有一个完整的演示，如何在表单发布后重新打开一个模式，当有错误。这个演示是用MVC和Bootstrap 4制作的。为了让前端的验证能够正常工作，这就假设你在皮肤上添加了默认的MVC jquery.validate。

所以首先要做一个Model

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">&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);
}

最后是一些javascript打开模式，如果是在 ValidationSummary 是活动的。ValidationSummary生成的html是以 validation-summary-errors，所以我们可以寻找。

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