ASP.NET MVC Ajax: How to update an Ajax.ActionLink itself on-click

Question

I have a page that displays a list with a of elements with a large number of elements, each of which has a boolean property, representing an Enabled and a Disabled state.

I need to provide the user with a link for each list item, and the link text must show the opposite status (so if the item is enabled, the link text must display 'Disable').

When the user clicks the link for a Disabled, the corresponding link text for the item must change to 'Enable' (and vice versa).

I would like to NOT reload the entire list for each click, just the text of the ActionLink itself, so my question is:

Is it possible to update just an ActionLink itself when the user clicks the link, or do I have do handle this using custom javascript?

Answer 1

As far as I remember, you can add HTML attributes to the "a" tag by newing up an anonymous class as the last param on most overloads.

Off the top of my head this can be written like the following:

Html.ActionLink("Name", "Action", "Controller", new { @class = 'updateId' });

(You may be able to do this with an ID which would be preferable over a class - if not just use a unique class name to avoid updating multiple items.)

Then you can use javascript to access the class "updateId" and change the inner html.

In the case of jQuery:

$("a.updateId").html("NewName");

Answer 2

This can be done with a custom user control contained within the element to update. A writeup of the solution can be found here. No custom client-side scripting is necessary.