Отправка данных из модального всплывающего окна Bootstrap

Question

Я бы хотел, чтобы мои пользователи могли отправлять данные из модального всплывающего окна Bootstrap.

Интересно, есть ли у кого-нибудь имеет опыт этого и то, как вы отправляли данные обратно на сервер. Razor Pages имеет много структур для работы с ошибками и т. Д. c. и кажется, что вы все это потеряете.

Вы разместили тег <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 и бритва

@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');
    }
});