使用MVC Ajax更新局部视图中的部分视图

Question

我有一个MVC 5 Web应用程序，其中包含一个名为CreateProposal的Razor视图，它接受一个名为ProposalViewModel的视图模型。该视图包括对名为_Proposal的部分视图的引用，该部分视图也接受视图模型。

CreateProposal 视图

@model STAR.UI.ViewModels.ProposalViewModel

<div class="row">
    @Html.Partial("_Proposal", Model)
</div>

部分视图_Proposal还引用另一个部分视图_ExistingAttachments，该部分视图也接受ViewModel。

_Proposal Partial

@model STAR.UI.ViewModels.ProposalViewModel

<div class="col-md-6" id="proposalAttachments">
     @Html.Partial("_ExistingAttachments", Model)
</div>

_ExistingAttachments Partial

@model STAR.UI.ViewModels.ProposalViewModel

<div class="form-group">
    <label>Existing Attachments</label><br />
    @Html.Hidden("hiddenAttachmentID", "", new { @id = "hiddenAttachmentID" })
    @if (Model.Attachments != null)
    {
        foreach (var upload in Model.Attachments)
        {
            <a href="~/Content/uploads/@upload.fileName">@upload.fileName</a>
            <a href="#" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#ModalDeleteAttachment" data-id="@upload.fileID">Remove</a><br />
        }
    }
</div>

_ExistingAttachments Partial 会列出所有附件的 a href 链接，并在每个链接旁边放置一个“删除”链接。当用户点击要删除的项目上的“删除”链接时，使用一些 JQuery 将该条目的 ID 存储在隐藏文本框中。

JQuery

$(document).on('click', '.btn.btn-danger', function () {
        var id = $(this).data('id');
        //alert(id);
        $('#hiddenAttachmentID').val(id);

    });

然后，向用户展示一个模态确认框，一旦他们确认删除，就会发出Ajax调用，该调用应该更新Partial _Proposal中的Partial _ExistingAttachments。

$.ajax({
        type: "GET",
        url: '/Proposal/DeleteAttachment/',
        data: { id: $("#hiddenAttachmentID").val() },
        error: function () {
            alert("An error occurred.");
        },
        success: function (data) {
            alert("Worked.");
            $("#proposalAttachments").html(data);
        }

});

MVC Controller

public ActionResult DeleteAttachment(int id)
{
    //Delete entry using passed in id
    ProposalViewModel model = new ProposalViewModel();
    //Code to populate ViewModel
    return PartialView("_ExistingAttachments", model);
}

一切正常，直至我期望局部视图_ExistingAttachments被刷新，但这并没有发生。

非常抱歉问题描述较长，请您帮忙看看我做错了什么。

请帮忙。

更新：

我应该补充说明，在Ajax的Success函数中会有alert("Worked.");提示。然而，与其在同一控制器内的Edit操作被调用，而非局部刷新。

[HttpPost]
public ActionResult EditProposal(ProposalViewModel model)

- tcode

---

@EhsanSajjad 我确实这样做了，在调用Partial_ExistingAttachments的DIV中有正确的id <div class="col-md-6" id="proposalAttachments">。 - tcode

@EhsanSajjad 我不明白为什么当AJAX调用完成后，代码会跳转到另一个控制器方法（在我的更新问题中说明）。 - tcode

你在哪个事件上调用了Ajax，显示完成事件？ - Ehsan Sajjad

@EhsanSajjad 但看起来部分更新是起作用的，问题在于一旦发生部分更新，用户就会被重定向到另一个视图。 - tcode

如果你正在访问 POST EditProposal，那么你有一个正在提交的表单。如果你在页面上不小心点击按钮，它可能会作为默认提交。由于 AJAX GET 存在缓存问题，所以你可能无法在控制器的删除操作上触发断点，因为浏览器使用了缓存版本。你可以通过浏览器的网络监视器来验证这一点。 - Jasen

Answer 1

大家好，感谢Jasen的帮助，问题终于得到解决。在我的Ajax调用完成后，代码重定向到另一个页面。显然我不想这种情况发生，因为我只想局部视图更新我的页面，但是仍然保留在页面上。

罪魁祸首实际上是我Modal中的确认按钮。它是

<input type="submit" id="mySubmitDeleteAttachment" class="btn btn-primary" value="Yes, please delete" />

这导致应用程序在Ajax调用后执行了一个POST请求。所以我改成了下面这样。

<button type="button" id="mySubmitDeleteAttachment" class="btn btn-default">Yes, please delete</button>

现在一切都如预期地工作。

- tcode

Answer 2

看起来你的标记和代码块都很好。可能是你的ajax get请求被缓存了

尝试在你的ajax调用中添加cache:false

$.ajax({
        type: "GET",
        url: '/Proposal/DeleteAttachment/',
        cache: false,
        data: { id: $("#hiddenAttachmentID").val() },
        error: function () {
            alert("An error occurred.");
        },
        success: function (data) {
            console.log("Worked.");
            $("#proposalAttachments").html(data);
        }

});

- Koti Panga