Fancybox with Jquery and partial views

Recently I’ve been working on a site redesign and I thought a nice little feature would be to have a fancybox (read lightbox) and inside there provide some basic site statistics, current user count etc.

So the aim is to have a fancybox appear with it’s content loaded via ajax from a partial view on the server. The content will appear when a button is clicked on the page.

I’ll be using the following :

Partial View

[HttpPost]
public PartialViewResult p_popup()
{
   return PartialView();
}

Javascript

$(document).ready(function() {
   $("#menuButton").click(function() {
      e.preventDefault();
      $("#overallApplicationNavigation").overallNavigation.close();
      // Close the overall model
      // Open a fancybox
      $.ajax({
         url: '/fb/p_popup',
         type: 'POST',
         data: '',
         success: function (data) {
            $.fancybox(data);
         }
    });
   });
});

And that’s it, I prefer this method to using templates on the client side. In a follow up to this I’ll deal with posting back from forms with validation.

Advertisements