使用MVC Ajax在部分视图中更新部分视图 [英] Update Partial View Within Partial View Using MVC Ajax

问题描述

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

I have an MVC 5 web application that contains a Razor View called CreateProposal and it accepts a ViewModel called ProposalViewModel. This View, includes a reference to a Partial View called _Proposal which also accepts the ViewModel.

CreateProposal视图

@model STAR.UI.ViewModels.ProposalViewModel

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

部分视图 _Proposal 还引用了另一个名为 _ExistingAttachments 的部分视图，该视图也接受ViewModel.

The Partial View _Proposal also references another Partial View called _ExistingAttachments which also accepts the ViewModel.

_投标部分

@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存储在隐藏的文本框中.

_ExistingAttachments Partial spits out a list of a href links and a Remove link beside each. Once the user clicks the remove link on the item they want to remove, the id of that entry is then stored in the hidden text box using a bit of JQuery.

JQuery

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

    });

随后会向用户显示一个模式确认框，一旦他们确认删除，便会进行Ajax调用，该调用应随后更新部分 _Proposal 中的部分 _ExistingAttachments . strong>

A modal confirm box then is presented to the user and once they confirm the remove, an Ajax call is made which is supposed to then update the Partial _ExistingAttachments within the Partial _Proposal

$.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 ，但这不会发生.

Everything works well until I expect the Partial View _ExistingAttachments to be refreshed, but this doesn't happen.

很抱歉，这个问题很长，但希望可以发现我做错了什么.

Apologies for the long question, but hopefully can spot what I am doing wrong.

请帮助.

更新

我应该添加，代码将其添加到Ajax Success函数和alert("Worked.");叫做.但是，代替部分刷新，我在同一控制器内的编辑操作"被称为

I should add, the code makes it to Ajax Success function and alert("Worked."); is called. However, instead of the Partial Refresh, my Edit Action within the same Controller is called

[HttpPost]
public ActionResult EditProposal(ProposalViewModel model)

推荐答案

伙计们，终于在Jasen的帮助下解决了.我的Ajax调用完成后，代码随后重定向到另一个页面.显然，我不希望发生这种情况，因为我只是想在页面上更新部分视图，然后再保留在页面上.

Folks, finally got it solved thanks to Jasen's help. After my Ajax call was complete, the code then redirected to another page. Obviously I didn't want this to happen as I just wanted the partial view to update on my page, but then remain on the page.

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

The culprit was actually the confirm button in my Modal. It was

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

这导致应用程序在Ajax调用之后执行POST.所以我改成了这个

This caused the application to carry out a POST after the Ajax call. So I instead changed to this

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

现在一切都按预期进行.

And everything is now working as expected.

这篇关于使用MVC Ajax在部分视图中更新部分视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！