Использование Fancybox с ASP.NET MVC Ajax

Question

У меня есть форма, которая загружается в fancybox, поэтому, если пользователь нажимает на ссылку, форма загружается в fancybox, это @Ajax.BeginForm().Вот так:

@using (Ajax.BeginForm("AddToBasket", new { controller = "Orders" }, new AjaxOptions()
{
    InsertionMode = InsertionMode.Replace,
    UpdateTargetId = "SuccessBasket",
    OnSuccess = "goToCheckout"   
}, new { @class = "product-order-form" }))
{

@* Form elements for Model *@

<div id="SuccessBasket"></div>
}

Это загружается в окне fancybox.Когда я отправляю форму, мой блок SuccessBasket не обновляется новым содержимым, передаваемым из контроллера, есть ли способ включить вызовы Ajax в Fancybox?Это прекрасно работает, если я не использую fancybox, но я хочу его использовать.

РЕДАКТИРОВАТЬ:

Форма загружается так:

@Ajax.ActionLink("Order", "OrderProduct", new { controller = "Orders", id = ViewData["ID"], search = ViewData["search"] }, new AjaxOptions()
{
    UpdateTargetId = "ModalWindow",
    InsertionMode = InsertionMode.Replace,
    OnFailure = "NotAuthorised"

}, new { @class = "lightbox order-link" })

У меня естьпустой div с именем ModalWindow, который упакован в div, установленный на display: none согласно инструкциям:

<div style="display: none">
    <div id="ModalWindow">
    </div>
</div>

Действие OrderProduct в моем контроллере возвращает PartialView:

return PartialView("_OrderProduct", basket);

Где корзинамоя модель BasketModel basket = new BasketModel();

My _OrderProduct PartialView - это представление, которое содержит форму Ajax в начале моего сообщения.Который имеет блок SuccessBasket.

До этого момента он работал отлично.Форма загружается в fancybox.

Действие AddToBasket возвращает PartialView:

return PartialView("_BasketSuccess");

Это представление просто сообщает пользователю, что его элемент был добавлен в корзину:

<p>This item has been added to your basket. Search again or goto @Html.ActionLink("checkout", "Order", new { controller = "Orders" }, new { @class = "checkout-link" }) to continue.</p>

Проблема в том, что div SuccessBasket не обновляется с помощью приведенного выше текста, но в результате отладки я вижу, что оно загружает представление _BasketSuccess, оно просто не обновляется в модальном окне.

Answer 1

То, как вы загружаете fancybox, странно.Вы отправляете 2 AJAX-запроса: один для Ajax.ActionLink и один для fancybox.Все, что не нужно.Также вам не нужен скрытый div на вашем главном экране, fancybox делает все это автоматически.

Итак, резюмируем, на вашем главном экране все, что вам нужно, это простая HTML-ссылка на актин контроллера, который вернетчастичное, содержащее форму:

@Html.ActionLink("Order", "OrderProduct", "Orders", null, new { @class = "lightbox" })

и в отдельном файле javascript вы прикрепите fancybox к этому якору, чтобы при нажатии на него он автоматически отправлял запрос AJAX (fancybox, а не вы),возьмите частичную форму и покажите ее:

$(function () {
    $('.lightbox').fancybox();
});

Хорошо, теперь у вас есть частичная форма, показанная в фантастическом окне.Эта частичная форма на самом деле является Ajax.BeginForm.Поэтому, когда вы отправляете эту форму, она отправляет запрос AJAX в действие AddToBasket и при успешном выполнении обновляет <div id="SuccessBasket"></div>, находящийся внутри этой формы, с результатом, возвращаемым этим действием.