Question

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

CreateProposal View

@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调用，然后更新部分 _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控制器

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。”）;叫做。但是，代替部分刷新，我在同一个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);
        }

});

使用MVC Ajax在部分视图中更新部分视图

2 个答案: