PartialView возвращает полную страницу, только рендеринг формы - PullRequest
Новая
       10

PartialView возвращает полную страницу, только рендеринг формы

0 голосов
/ 14 сентября 2018

Я пытаюсь изменить частичное представление ТОЛЬКО в моем модале после запроса ajax.Но когда я получаю ответ, все перерисовывается, и отображается только частичное представление.

PartialView: 

@{
    var bidModel = new BidModel();
}

<div>
    <div class="row">
        @if (ViewBag.Message != null)
        {
            <div class="alert alert-success">@ViewBag.Message</div>
        }
    </div>
    <span class=" alert-danger">
        @Html.ValidationSummary()
    </span>

    <div class="form-group">
        <input name="Bidder" asp-for="@bidModel.Bidder" value="@User.Identity.Name" type="hidden" />
        <input name="AuctionId" asp-for="@bidModel.AuctionId" type="hidden" id="auctionId" />
        <label asp-for="@bidModel.Amount" />
        <input name="Amount" asp-for="@bidModel.Amount" />
    </div>
</div>

Контроллер: 

    public async Task<IActionResult> AddBid(BidModel Bid)
    {
        var result = await _bidBusinessInterface.CreateBidAsync(Bid, Bid.AuctionId);
        if (result)
        {
            ViewBag.Message = "Bud lagt!";

        }
        else
        {
            ViewBag.Message = "Bud förlågt!";
        }
        return PartialView("_BidCreatorPartial");
    }

И тогда мыу меня есть модал, в котором я хочу перерисовать частичное представление: 

<div class="modal fade" id="bidModal" tabindex="-1" role="dialog" aria-labelledby="bidModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="bidModalLabel">Lägg bud</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <form asp-action="AddBid" asp-controller="Home" method="POST" data-ajax="true" data-ajax-update="frmBid">
                                <div id="frmBid">
                                    <partial name="_BidCreatorPartial" model="@bidModel"/>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Avbryt</button>
                                    <button type="submit" class="btn btn-primary">Spara</button>
                                </div>
                            </form>
                        </div>

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

Как я уже сказал, я хочу выполнить перерисовку формы, чтобы сообщение могло отображаться в модале.

Что происходит, если он отображает целую белую страницу только с формой и сообщением.

1 Ответ

0 голосов
/ 14 сентября 2018

Вы на самом деле не публиковали свою форму, но я думаю, что вы просто делаете стандартную старую публикацию в форме HTML. Это всегда приведет к изменению страницы, а затем, поскольку вы возвращаете только частичное представление, а не полное представление, ваша страница заменяется только этим фрагментом HTML.

То, что вы хотите, требует AJAX. Вам нужно перехватить событие отправки в форме, и вместо того, чтобы все прошло как обычно, вы делаете запрос AJAX с сериализацией данных формы. Затем при успешном обратном вызове вашего AJAX-запроса вам потребуется запросить элемент, из которого вы хотите заменить HTML, из DOM и изменить его значение innerHTML на то, что возвращается из запроса AJAX.

Поскольку проект ASP.NET Core поставляется с jQuery из коробки, я собираюсь предположить, что вы можете использовать это: 

$('#MyForm').on('submit', function (e) {
    e.preventDefault();

    var $form = $(this);
    $.ajax({
        url: $form.attr('action'),
        method: 'post',
        data: $form.serialize(),
        success: function (html) {
            $('#frmBid').html(html);
        }
    });
});
...