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
