Tracking the number of times Ajax.ActionLink was called - asp.net-mvc

Question

In brief: is it possible to track the number of times an Ajax.ActionLink method was called?
Now for context. I've got a simple model:
public class Person {
public string Name { get; set; }
public List<Address> Addresses { get; set; }
}
public class Address {
public string City { get; set; }
public string Country { get; set; }
}
So, a person can have many addresses. On the Create page, I want the user to click a button that allows them to add as many Addresses as they want, dynamically.
I used this page as a reference in learning how to bind dynamically to a list: http://haacked.com/archive/2008/10/23/model-binding-toa-list.aspx,
With that as a reference, here are my classes:
HomeController:
//
// GET: /Home/
public ActionResult Index() {
return View();
}
[HttpPost]
public ActionResult Create(Person p) {
return View(p);
}
[OutputCache(NoStore = true, Duration = 0)]
public ActionResult AjaxAddAddress() {
TempData["key"] = DateTime.Now.Ticks.GetHashCode();
return PartialView("~/Views/Shared/EditorTemplates/Address.cshtml", new Address());
}
Index view:
#model ModelTest.Models.Person
<div>
#using (Html.BeginForm("Create", "Home")) {
<div>Name: #Html.TextBoxFor(m => m.Name)</div>
<div id="ajaxAddressBox"></div>
<p>#Ajax.ActionLink("Add Another Address", "AjaxAddAddress", new AjaxOptions {
UpdateTargetId = "ajaxAddressBox",
InsertionMode = InsertionMode.InsertAfter,
HttpMethod = "GET" })</p>
<input id="btnSubmit" type="submit" value="Create" />
}
</div>
Create View (just to confirm the model binded okay):
#model ModelTest.Models.Person
<div>
<p>You entered person: #Model.Name.</p>
<p>He has #Model.Addresses.Count total addresses.
#foreach (var c in Model.Addresses) {
<p>City: #c.City, Country: #c.Country</p>
}
</div>
Address editor template:
#model ModelTest.Models.Address
<p><input type="hidden" name="Addresses.Index" value="#TempData["key"]" />
City: #Html.TextBoxFor(x => x.City, new { Name = "Addresses[" + TempData["key"] + "].City" } )
Country: #Html.TextBoxFor(x => x.Country, new { Name = "Addresses[" + TempData["key"] + "].Country" })</p>
It seems to work ok, so I hope I'm doing this right so far. I'm new to MVC so please let me know if anything is totally wrong.
But I need it to do more. Ideally, I'd like to add a label that says "Address #(index)" for each line. But more important, I need to restrict the user to only adding, eg, 5 addresses. Either way, I'd like to track the number of times that Ajax.ActionLink, or the method AjaxAddAddress was called. Plus, in the future I'll need an edit page that also requires that restriction. Thus, if an existing person has 3 addresses, they can add only 2 more.
Any advice? It seems simple but I'm not sure how best to approach it. If I used a hidden field, how do you pass that value in Ajax.ActionLink and read it in my AjaxAddAddress method? Can you make a local client variable somehow?
I suppose a Session variable would work, but I always get nervous using that, not sure how long it lives or how reliable it is.

Answer 1

Here's one possible solution I came up with, with help from http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/.
Instead of using Ajax.ActionLink, I'm using Html.ActionLink and calling Ajax manually myself. That way, I can have it grab values right from Javascript. Whatever value I want, really: an expando, jquery.data, a hidden field, anything.
So my Ajax.ActionLink becomes:
#Html.ActionLink("Add Another Address", "AjaxAddAddress", null, new { id = "addItem" })
Then, within the same view I added this script:
<script type="text/javascript">
$("#addItem").click(function () {
$.ajax({
url: this.href + "?index=" + $("#ajaxAddressBox").children('div').size(),
cache: false,
success: function (html) {
$("#ajaxAddressBox").append(html);
}
});
return false;
});
</script>
I'm manually passing in an Index value to my AjaxAddAddresses method, and I'm basing that index value off the total number of div children currently in the ajaxAddressBox, or put another way, the current total number of addresses added. Thus, in the future when I build an Edit view, and it'll initially populate with existing addresses, this function will know how many addresses there are from the start.
AjaxAddAddresses becomes:
[OutputCache(NoStore = true, Duration = 0)]
public ActionResult AjaxAddAddress(int? index) {
if (index >= 5) return null;
TempData["key"] = DateTime.Now.Ticks.GetHashCode();
TempData["index"] = index + 1;
return PartialView("~/Views/Shared/EditorTemplates/Address.cshtml", new Address());
}
Thus, if the index is >= 5, I return null so that the user can't add more. (This could be done in the script block as well to save the wasted Ajax call, but at least when done server-side it can't be spoofed.)
And the Address Editor Template becomes:
#model ModelTest.Models.Address
<div><p><input type="hidden" name="Addresses.Index" value="#TempData["key"]" />
Address ##TempData["index"] ---
City: #Html.TextBoxFor(x => x.City, new { Name = "Addresses[" + TempData["key"] + "].City" } )
Country: #Html.TextBoxFor(x => x.Country, new { Name = "Addresses[" + TempData["key"] + "].Country" })</p></div>
Of course, other solutions are still welcome. This still feels needlessly complicated to me...
-ps, As it turns out, using a Session variable in my AjaxAddAddress method does work, but I can't shake the feeling that it could fail under some circumstances.