How can I code a refresh of a HTML.RenderPartial using Ajax in MVC3?

Answer 1

The basic idea will be that you will use JQuery to fire off an AJAX request when you want your Partial View updated.

The AJAX request will call one of your controller actions, which then will return a PartialViewResult.

The 'success' part of the JQuery AJAX result will get the HTML response, and replace a given container in your View with the new HTML.

e.g.

Your View could look like this:

@model ViewModels.Shared.BaseViewModel


    

        
@Html.LabelFor(model => Model.Link.Position)
        
@Html.LabelFor(model => Model.Link.Title)
 
    
    @for (var i = 0; i < Model.AdminDetails.Count; i++)
    {
        var qs = "&ac=" + Model.Meta.AccountID +
                    "&me=" + Model.AdminDetails[i].RowKey;  
    

        

            @Html.TextBox(("Position_" + @i), Model.AdminDetails[i].Position, new { size = 2 })
        
        
@Model.AdminDetails[i].Title
             
    
  
    }
    

where href is the URL for your controller action. Aternatively, you could look at an AJAX post method and serialize your form data, if that is needed.

Then, a small tweak to your controller action, so that it can handle being called either via AJAX or normally:

public ActionResult Detail(string ac, string me)
{
    vm.AdminDetails = _link.Detail(ac + me).ToList();

    if (Request.IsAjaxRequest())
        return PartialView(vm);
    return View(vm);
}

Without the return PartialView(vm); the HTML response for the AJAX request would include your pages header