Ajaxy
- by Chris Skardon
Today is the big day, the day I attempt to use Ajax in the app… I’ve never done this (well, tell a lie, I’ve done it in a ‘tutorial’ site, but that was a while ago now), so it’s going to be interesting.. OK, basics first, let’s start with the @Ajax.ActionLink Right, first stab: @Ajax.ActionLink("Click to get latest",
"LatestEntry",
new AjaxOptions
{
UpdateTargetId = "ajaxEntrant",
InsertionMode = InsertionMode.Replace,
HttpMethod = "GET"
})
As far as I’m aware, I’m asking to get the ‘LatestEntry’ from the current controller, and in doing so, I will replace the #ajaxEntrant DOM bit with the result. So. I guess I’d better get the result working…
To the controller!
public PartialResult LatestEntry()
{
var entrant =_db.Entrants.OrderByDescending(e => e.Id).Single();
return PartialView("_Entrant", entrant);
}
Pretty simple, just returns the last entry in a PartialView… but! I have yet to make my partial view, so onto that!
@model Webby.Entrant
<div class="entrant">
<h4>@Model.Name</h4>
</div>
Again, super simple, (I’m really just testing at this point)…
All the code is now there (as far as I know), so F5 and in…
And once again, in the traditionally disappointing way of the norm, it doesn’t work, sure… it opens the right view, but it doesn’t replace the #ajaxEntry DOM element, rather it replaces the whole page… The source code (again, as far as I know) looks ok:
<a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#ajaxEntrants" href="/Entrants/LatestEntrant">Click to get latest</a>
Changing the InsertionMode to any of the other modes has the same effect..
It’s not the DOM name either, changing that has the same effect.. i.e. none.
It’s not the partial view either, just making that a <p> has (again) no effect…
Ahhhhh --- what a schoolboy error… I had neglected (ahem) to actually put the script bit into the calling page (another save from stackoverflow):
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
I’ve now stuck that into the _Layout.cshtml view temporarily to aid the development process… :)
Onwards and upwards!
Chris
