时间戳

首页 > 解决方案 > PartialView 正在返回整页，仅呈现表单

c# - PartialView 正在返回整页，仅呈现表单

问题描述

在 ajax 请求之后，我试图仅在我的模式中重新呈现部分视图。但是当我得到响应时，一切都会重新渲染，唯一显示的是部分视图..

部分视图：

@{
    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>

正如我所说，我想要完成的是重新渲染表单，以便消息可以在模态中显示。

发生的情况是它呈现一个只有表单和消息的整个白页。

标签： c#asp.netajaxasp.net-coreasp.net-mvc-partialview

解决方案

您实际上并没有发布表单本身，但我最好的猜测是您只是在发布标准的旧 HTML 表单。这总是会导致页面发生变化，然后由于您只返回部分视图而不是完整视图，因此您的页面仅被该 HTML 片段替换。

你想要的需要 AJAX。您需要捕获表单上的提交事件，而不是像往常一样让它发生，而是使用序列化的表单数据发出 AJAX 请求。然后，在 AJAX 请求的成功回调中，您需要从 DOM 中查询要替换 HTML 的元素，并将其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);
        }
    });
});

推荐阅读