Question

在ajax请求之后，我仅尝试以我的模态重新渲染partialview。但是当我收到响应时，所有内容都将重新呈现，唯一显示的是局部视图。

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

然后我们要在模态中重新渲染partialview：

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

正如我所说，我要完成的工作是重新呈现表单，以便可以在模式中显示消息。

发生的事情是，它仅用表格和消息来呈现整个白页。

Answer 1

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

您想要的内容需要AJAX。您需要捕获表单上的Submit事件，而不是像往常一样放开它，而是使用序列化表单数据发出AJAX请求。然后，在AJAX请求的成功回调中，您需要查询要从DOM替换HTML的元素，并将其innerHTML的值更改为从AJAX请求返回的值。

由于jQuery附带了ASP.NET Core项目，因此我假设您可以使用它：

$('#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);
        }
    });
});

PartialView返回整页，仅呈现表单

1 个答案: