Using Fancybox with ASP.NET MVC Ajax

Question

I have a form which loads within a fancybox so that if the user clicks on a link, a form loads up in fancybox, its an @Ajax.BeginForm(). Like so:

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

This gets loaded up in a fancybox window. When I submit the form, my SuccessBasket div does not get updated with the new content passed from the controller, is there some way to enable Ajax calls to be updated within Fancybox? This works fine if I don't use fancybox but I wish to use it.

EDIT:

The form is loaded like so:

@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" })

I have an empty div called ModalWindow which is wrapped by a div set to display: none as per the instructions:

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

OrderProduct Action in my controller returns a PartialView:

return PartialView("_OrderProduct", basket);

Where basket is my model BasketModel basket = new BasketModel();

My _OrderProduct PartialView is the view which contains the Ajax form at the start of my post. Which has the SuccessBasket div.

Upto this point, it works perfectly. The form loads up in fancybox.

The AddToBasket Action returns a PartialView:

return PartialView("_BasketSuccess");

This view simply tells the user that their item was added to the basket:

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

The problem is, the SuccessBasket div does not update with the text above but through debugging, I can see that it does load the view _BasketSuccess, it just doesn't update in the modal window.

Could you provide more details? How are you loading this form? How are you opening the fancybox? What does the controller action return as a result? What does the goToCheckout function do? — Darin Dimitrov

Darin Dimitrov Darin Dimitrov · Accepted Answer · 2012-03-13T13:29:53

The way you are loading the fancybox is strange. You are sending 2 AJAX requests: one for the Ajax.ActionLink and one by the fancybox. All that is not necessary. Also you don't need a hidden div in your main view, the fancybox does all this automatically.

So to recap, in your main view all you need is a simple HTML link to the controller actin which will return a partial containing the form:

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

and in a separate javascript file you will attach the fancybox to this anchor so that when it is clicked it will automatically send an AJAX request (the fancybox, not you), fetch the partial form and show it:

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

Alright, now you have a partial form shown in a fancybox. This partial form is actually an Ajax.BeginForm. So when you submit this form it will send an AJAX request to the AddToBasket action and upon success it will update the <div id="SuccessBasket"></div> which is inside this form with the result returned by this action.

Using Fancybox with ASP.NET MVC Ajax

EDIT:

1 Answers