Load a view using AJAX in ASP.NET 3 RAZR

When using MVC you are calling actions that then load a view and a parent layout/masterpage. When you wish to load a view using AJAX though and then stick that content say inside a div with an id of content you would end up loading all the layout and stuff as well as you are just calling the action.

How do I get around this? Is their some way to say if calling this action using AJAX then don't bother with the layou开发者_StackOverflowt and just shove the view inside the div?

Any code examples would be much appreciated. Thanks

ajax request

$.ajax({
   url: '/controller/action',
   type:'POST',
   success:function(data){ // data will contain the html rendered by partial view
     $('#someDivID').html(data);  
   }
  });

your ActionResult will look like

public ActionResult ActionName()
{
//some code 
return PartialView();
 //or
 // return View();
}

in your ajax response HTML you can select only the div or elements you want to display

lets suppose your ajax calls looks like this:-

$.ajax(
   url: 'some_url',
   success:function(responseHtml){
     $('.div-on-current-page').html( $(responseHtml).find('.div-inside-response') ); 
   });

just give your response HTML to jquery $(responseHtml) and select the content you want $(responseHtml).find('.div-inside-response') and set it in your current page div

$('.div-on-current-page').html( $(responseHtml).find('.div-inside-response') );.

Process: You need to do a ajax call to one action which give you a view you want in a string, bellow you can see the different methods you need to take what you o want.

'RenderPartialViewToString' method convert the view in a string:

    public static string RenderPartialViewToString<T>(
        ControllerContext context,
        string partialViewName,
        T model,
        TempDataDictionary tempData)
    {
        ViewEngineResult result = ViewEngines.Engines.FindPartialView(context, partialViewName);

        if (result.View != null)
        {
            StringBuilder sb = new StringBuilder();
            using (StringWriter sw = new StringWriter(sb))
            {
                using (HtmlTextWriter output = new HtmlTextWriter(sw))
                {
                    ViewContext viewContext = new ViewContext(context, result.View, new ViewDataDictionary<T>(model), tempData, output);
                    result.View.Render(viewContext, output);
                }
            }

            return sb.ToString();
        }

        return String.Empty;
    }

In your action, call 'RenderPartialViewToString' method:

    public ActionResult ActionName(ActionParameters)
    {
          return Json(RenderPartialViewToString(this.ControllerContext, "ViewName", model, tempDict), JsonRequestBehavior.AllowGet);
    }

In Javascript make something like this:

$.ajax({
    url: '/controllerName/actionName',
    success:function(result){
        $('div#someID').html(result);  
    }
});