使用MVC Ajax在部分視圖中更新部分視圖

Question

我有一個MVC 5 Web應用程序，它包含一個名為CreateProposal的Razor View，它接受一個名為ProposalViewModel的ViewModel。 此視圖包含對名為_Proposal的部分視圖的引用，該部分視圖也接受ViewModel。

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吐出一個href鏈接列表和每個旁邊的Remove鏈接。 一旦用戶單擊要刪除的項目上的刪除鏈接，該條目的ID就會使用一些JQuery存儲在隱藏文本框中。

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控制器

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

一切正常，直到我期望刷新Partial View _ExistingAttachments ，但這不會發生。

為長期問題道歉，但希望能發現我做錯了什么。

請幫忙。

UPDATE

我應該補充一下，代碼使它成為Ajax Success函數和alert（“Worked。”）; 叫做。 但是，不是部分刷新，而是調用同一個Controller中的編輯操作

[HttpPost]
public ActionResult EditProposal(ProposalViewModel model)

Answer 1

感謝Jasen的幫助，人們終於解決了問題。 在我的Ajax調用完成后，代碼然后重定向到另一個頁面。 顯然我不希望這種情況發生，因為我只是希望部分視圖在我的頁面上更新，但隨后保留在頁面上。

罪魁禍首實際上是我的模態中的確認按鈕。 它是

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

現在一切都按預期工作了。

Answer 2

似乎所有標記和代碼塊都很好。 可能是你的ajax get請求被緩存了

嘗試將cache:false添加到您的ajax調用中

$.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);
        }

});