Loading content to a jquery modal plugin: iFrame or Ajax?

Question

Hello,

I'm developing a website for a client using ASP.NET MVC 1.0. There is a "profile's page" with many links releated to the profile. For example, "request contact", "see our diretions", "add as your friend", etc.

I would like to use one of the many jquery modal scripts to show this links, without load them as a normal page/link, because the links are small features that aren't worth it to create a specific page for each one.

So this is why I want to use a modal plugin to load the content of this small features to the profile's page.

Ok, the question is: How should I do that? I can use either an iFrame to load the content or load the content via Ajax.

If I use iFrame, I need to have a view with all the page estructure (html, heade, body, etc..), but if I have a Ajax request, I just need a with my form inside and load into another div, or with a google maps, or whatever..

Should I go with iFrame or Ajax? Which is the best approach?

Thanks

Answer 1

I assume here that you're using Thickbox.

I prefer to have a view dedicated to each of these pages, but I don't use iframes. Either way, you're going to need to do some work on the presentation layer.

I would get the partial back from a separate view that's been created specially for AJAX requests.

Answer 2

I was taking a look at FancyBox http://fancybox.net/home and it's seems pretty sweet. I think I'll do something like this:

I'll use Ajax.RenderPartial to load the content and to fill an empty DIV. If the JS is disabled, I'll link to a normal View and then it follows the normal process.

Any other nice tips guys?

Answer 3

I'll use Ajax.RenderPartial to load the content and to fill an empty DIV. If the JS is disabled, I'll link to a normal View and then it follows the normal process.

I Think that's the way to Go, using RenderPartial is elegant for AJAX provided Content, just like this case. IFrame is something that should be avoid because of the evil precedence. The other thing that become handy in this case is the way you can handle both cases in your controller (JS active / JS not active):

public ActionResult Action()
{
    if (Request.IsAjaxRequest())
    {
        //This one just have the explicit content
        return View("PartialView");
    }
    else 
    {
        //This one is a view that reference the partial View
        return View("CompleteView");
    }
}

Answer 4

Omar, this is what I'm doing! I agree with you and it's a elegant way to handle this situation. If the JS is disabled, the pages process will keep working properly. Now I need to apply the same functionality to my tabs…