MVC Ajax with Partial Views

What we want:   A partial to be loaded on "page load" and to be updated on an action.  If you remember Jim's lecture the contents of the "UpdateTargetId" are replace with the new Ajax command. So we need something to that will fill the html element at initial load.   I had some initial issues with this as the Ajax.Action link did not seem to fire the Get for the action so I had to change the ActionLink to a post and insert an dummy post action [HttpPost] in the control and it all worked after this.  I use   Html.RenderAction to load the initial partial. Note this will Render the contents of a Controller Action which in this case returns a partial view. Below is a simple GetTime Example then  THE GREEN WILL GET REPLACED BY THE AJAX CALL Html :

  @Ajax.ActionLink("GetTime", "GetTime", "Home", new { name = "anything"},  new AjaxOptions { UpdateTargetId = "currenttime" }) 
currenttime">
     @{ Html.RenderAction("GetTime", "Home"); }

Controller: 

[HttpPost]
  public ActionResult GetTime(string name)
 {         

   // string name  : THIS IS NOT USED DUMMY
   return GetTime();     
 }

[HttpGet]

public ActionResult  GetTime()        

{     

      string model = DateTime.Now;
      return PartialView("_ShowTime", model);

}..

Note on Html.RenderAction

THIS WORKS  IN A VIEW   @{ Html.RenderAction("GetTime", "Home"); }

THIS DOES NOT WORK IN A VIEW   @Html.RenderAction("GetTime", "Home"); 

Model Enumeration with Ajax  and Partial Views

If we expand the above example where you want to update a partial with a List which will give multiple Ajax calls on the same rendered page (remember this creates JavaScript when rendered and we have to bear this in mind).  So we will need to ensure that Html element id are unique for each item in our View or things will start to get interesting.  So the View code below will ensure that if we hit a link we will update the correct item within a page. 

Html:@foreach (var item in Model)

{     string elementId =  "GetTime" + item.id;      

  

       @Ajax.ActionLink("GetTime", "GetTime", "Home", new { name = model.id},  new AjaxOptions {                                  

                                        UpdateTargetId = elementId })   @elementId ">

     @{ Html.RenderAction("GetTime", "Home",  new { name = model.id}); }
     
}

Note:  In the above example we are always passing a parameter to the Controller Action so we load the correct data for the model. Code:

 public ActionResult GetTime(string id)
 {     
     List model = GetmyStuff.Get(id);      return PartialView("_ShowStuff", model);
 }

MVC Table Remove Rows with Ajax and JQuery and Razor

I've using MVC3 here so this may change with later version and this works for me (many online examples don't seem to work too well when I try them.


Task: Delete a table row, remove the database item and refresh the form without using postback.


Why: Well I have MVC partial view which is used is various forms/pages and posting back would start to get a bit complex as I only want to use the view one with the minimum amount of controller code. And this is easier once you get your head round it.


This examples clears a Locked Record, but you could really use it for anything.


Controller Code



Partial View Code








How it works

The Ajax makes a call to the backend Controller which Clears the Lock via "ClearLock(int id)" which accepts [HttpDelete]

The JQuery OnComplete = "$('#" + @trid + "').remove();" will delete the table row without the need to postback and reload the form.

So you are doing TWO things here, running back end code call via AJAX (which returns nothing) and running JQuery to delete a row from the table.

Notice we set the id of the row using a unquie id from the model.

Enjoy!