jquery - 使用 MVC Ajax 更新局部 View 内的局部 View

Question

我有一个 MVC 5 Web 应用程序，其中包含名为 CreateProposal 的 Razor View ，并且它接受名为 ProposalViewModel 的 ViewModel。此 View 包含对名为 _Proposal 的部分 View 的引用，该 View 也接受 ViewModel。

创建提案 View

@model STAR.UI.ViewModels.ProposalViewModel

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

部分 View _Proposal还引用了另一个名为_ExistingAttachments的部分 View ，它也接受ViewModel。

_提案部分

@model STAR.UI.ViewModels.ProposalViewModel

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

_现有附件部分

@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 链接列表以及每个链接旁边的删除链接。一旦用户点击他们想要删除的项目上的删除链接，该条目的 ID 就会使用一些 JQuery 存储在隐藏的文本框中。

JQuery

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

    });

然后会向用户显示一个模式确认框，一旦他们确认删除，就会进行 Ajax 调用，然后更新部分 _Proposal 中的部分 _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);
}

一切正常，直到我期望刷新部分 View _ExistingAttachments，但这并没有发生。

对这个长问题表示歉意，但希望能发现我做错了什么。

请帮忙。

更新

我应该补充一点，代码使其成为 Ajax Success 函数和alert("Worked.");叫做。但是，在同一 Controller 中调用我的编辑操作，而不是部分刷新

[HttpPost]
public ActionResult EditProposal(ProposalViewModel model)

Answer 1

各位，在 Jasen 的帮助下终于解决了这个问题。 Ajax 调用完成后，代码重定向到另一个页面。显然我不希望这种情况发生，因为我只是希望部分 View 在我的页面上更新，但随后保留在页面上。

罪魁祸首实际上是我模态中的确认按钮。这是

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

现在一切都按预期进行。