Обновить частичное представление в частичном представлении с помощью MVC Ajax

У меня есть веб-приложение MVC 5, которое содержит представление Razor под названием CreateProposal и принимает модель представления под названием ProposalViewModel. Это представление включает ссылку на частичное представление под названием _Proposal, которое также принимает ViewModel.

Просмотр создания предложения

@model STAR.UI.ViewModels.ProposalViewModel

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

Частичное представление _Proposal также ссылается на другое частичное представление под названием _ExistingAttachments, которое также принимает 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 рядом с каждой. Как только пользователь щелкает ссылку удаления на элементе, который он хочет удалить, идентификатор этой записи сохраняется в скрытом текстовом поле с использованием небольшого количества JQuery.

JQuery

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

    });

Затем пользователю предоставляется модальное окно подтверждения, и после подтверждения удаления выполняется вызов Ajax, который должен затем обновить частичные _ExistingAttachments в частичном _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 частичного представления, но этого не происходит.

Приношу свои извинения за длинный вопрос, но надеюсь, я могу заметить, что делаю неправильно.

Пожалуйста помоги.

ОБНОВЛЕНИЕ

Я должен добавить, код превращается в функцию Ajax Success и alert ("Worked."); называется. Однако вместо частичного обновления мое действие редактирования в том же контроллере называется

[HttpPost]
public ActionResult EditProposal(ProposalViewModel model)

person tcode    schedule 22.10.2014    source источник
comment
ваш вызов ajax завершается успешно?   -  person Ehsan Sajjad    schedule 22.10.2014
comment
@EhsanSajjad Да, вызывается предупреждение (сработало) в функции Ajax Success.   -  person tcode    schedule 22.10.2014
comment
Вы можете проверить alert(data), что возвращается?   -  person Ehsan Sajjad    schedule 22.10.2014
comment
@EhsanSajjad Я попробовал то, что вы сказали, alert(data), и я вижу, что возвращаемые данные - это правильный html, как я и ожидал.   -  person tcode    schedule 22.10.2014
comment
убедитесь, что у вас есть один элемент на странице с идентификатором OfferAttachments   -  person Ehsan Sajjad    schedule 22.10.2014
comment
@EhsanSajjad Я знаю, DIV, где вызывается Partial _ExistingAttachments, имеет правильный идентификатор <div class="col-md-6" id="proposalAttachments">   -  person tcode    schedule 22.10.2014
comment
@EhsanSajjad Я не понимаю, почему после завершения вызова AJAX код запускается в другой метод контроллера (указанный в моем обновленном вопросе).   -  person tcode    schedule 22.10.2014
comment
вы вызываете ajax, на котором событие показывает полное событие   -  person Ehsan Sajjad    schedule 22.10.2014
comment
@EhsanSajjad Но похоже, что частичное обновление работает, проблема в том, что как только оно происходит, пользователь затем перенаправляется в другое представление.   -  person tcode    schedule 22.10.2014
comment
вам нужно показать свое событие jquery complete и его html   -  person Ehsan Sajjad    schedule 22.10.2014
comment
Если вы нажимаете POST EditProposal, значит, у вас есть форма для отправки. Это может произойти, если вы не будете осторожны с кнопками на странице, поскольку они могут действовать как отправка по умолчанию. Также существует вероятность проблемы с кешированием из-за AJAX GET, поэтому вы не попадете в точки останова при удалении контроллера, поскольку браузер использует кешированную версию. Вы можете проверить это с помощью сетевого монитора браузера.   -  person Jasen    schedule 22.10.2014


Ответы (2)


Ребята, наконец-то решили эту проблему благодаря помощи Ясена. После завершения моего вызова Ajax код перенаправлялся на другую страницу. Очевидно, я не хотел, чтобы это произошло, поскольку я просто хотел, чтобы частичное представление обновлялось на моей странице, но затем оставалось на странице.

На самом деле виновата была кнопка подтверждения в моем модальном окне. Это было

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

Это заставило приложение выполнить POST после вызова Ajax. Поэтому я вместо этого перешел на это

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

И теперь все работает как положено.

person tcode    schedule 23.10.2014

Кажется, вся ваша разметка и блоки кода хороши. Вероятно, ваш запрос на получение ajax кешируется

Попробуйте добавить 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);
        }

});
person Koti Panga    schedule 22.10.2014