Показать частичное представление в модале Bootstrap

Question

Я создаю приложение MVC и использую Bootstrap Modal, чтобы дать возможность пользователю проверять входные данные и отправлять эти данные в контроллер с помощью Ajax.Модальное окно:

<div class="modal" tabindex="-1" role="dialog" id="myModal" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Check input data</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div> 
                @using (Ajax.BeginForm("SelectReservationDateTime", new AjaxOptions { UpdateTargetId = "divChangeRegion" }))

                {
                        <div class="modal-body">
                            <table class="table">
                                <tr>
                                    <td>Category name: </td>
                                    <td><b>@Model.CategoryName </b></td>
                                </tr>
                                <tr>
                                    <td>Date: </td>
                                    <td><label id="SelectedDateTimeLabel"></label></td>
                                </tr>
                                <tr>
                                    <td>Client name: </td>
                                    <td><input type="text" name="ClientName" id="ClientName" value="@Model.ClientName" /></td>
                                </tr>
                                <tr>
                                    <td>Client code: </td>
                                    <td><input type="text" name="ClientCode" id="ClientCode" value="@Model.ClientCode" /></td>
                                </tr>                               
                            </table>

                        </div>

                        <input type="hidden" name="CategoryId" id="CategoryId" value="@Model.CategoryId" />
                        <input type="hidden" name="SelectedDateTime" id="SelectedDateTime" />


                        <div class="modal-footer" id="divChangeRegion">
                            <input type="submit" class="btn btn-info" value="OK" data-backdrop="static">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        </div>
                    }         

            </div>
        </div>
    </div>

И после нажатия кнопки отправки я выполняю метод контроллера, который сохраняет введенные данные в базе данных и возвращает частичное представление, которое я хочу ввести в код этого модального контроллера:

public ActionResult SelectReservationDateTime(ReservationTimeModel PartialViewModel)
        {
            ...

            return PartialView(newModel);
        }

Код частичного представления:

@model EQueue.Data.Ticket

<div class="row">
    <div class="col-md-4 offset-md-4">
        <table>
            <tr>
                <td class="border" id="printThis">
                    You get ticket №<b>@Model.CodeTicket</b><br />
                    Category Name <br />
                    <b>"@Model.TicketCategory.NameCategory"</b><br />
                </td>
            </tr>
            <tr>
                <td><input type="button" class="btn btn-primary text-center" value="Print ticket" onclick="printTicket('printThis')" data-dismiss="modal"></td>
                <td><input type="button">
            </tr>
        </table>
    </div>
</div>

<script>
    function printTicket(partForPrint)
    {
        var printContents = document.getElementById(partForPrint).innerHTML;
        var originalContents = document.body.innerHTML;

        document.body.innerHTML = printContents;

        window.print();

        document.body.innerHTML = originalContents;
    }


</script>

Но я получаю новое окно вместо того, чтобы создавать частичное представление в существующем Модале, кто-нибудь может мне помочь?

Answer 1

Сначала я бы изменил эту строку:

@using (Ajax.BeginForm("SelectReservationDateTime", new AjaxOptions { UpdateTargetId = "divChangeRegion" }))

Кому:

@using(Html.BeginForm(null, null, FormMethod.Post, new {id = "whatever"}))

Затем создайте jquery, который использует идентификатор формы, чтобы проверить, была ли она отправлена. Как только он будет получен, вы должны запустить ajax-вызов вашего метода, который возвращает частичное представление. Чтобы реализовать частичное представление, вам нужно указать div, в котором он будет размещен, с использованием идентификатора, а затем, в случае успеха, использовать эту строку кода, чтобы поместить частичное представление в этот div.

$("id of the div").html(result);