Creating an AJAX toggle-image in ASP.NET MVC

Question

So I wanted to create a toggle-button for a table, where I can make an async call to update a database record (enable/disable).

After some trial and error, I have managed to get it working - but it feels like there must be a more elegant way.

I don't like repeating my image-tag in my controller, obviously... How can I avoid that in an elegant way?
Is there an overall better way to approach this that what I have done?

Here is my code in the controller:

public ActionResult ToggleEnabled(int id)
    {
        if (Request.IsAjaxRequest())
        {
            var p = this.PageRepository.GetPage(id);
            p.Enabled = p.Enabled != true;
            this.PageRepository.Edit(p);
            return p.Enabled ? Content("<img src='/Content/icons/tick.png' border=0  />") : Content("<img src='/Content/icons/tick_grey.png' border=0  />");
        }
        return Content("Error");
    }

And the view...:

<% var img = Model.Enabled ? "tick.png" : "tick_grey.png"; %>
<% foreach (var item in Model)
       { %>
...
<td align="center">
    <%=Ajax.ActionLink("[replacethis]", 
        "ToggleEnabled", 
                new { id = Model.ID }, 
                new AjaxOptions { UpdateTargetId = "toggleimage" + Model.ID }).Replace("[replacethis]",
                string.Format("<div id='toggleimage{0}'><img src='/Content/icons/{1}' border='0' alt='toggle'/></div>", 
                Model.ID, Model.Enabled ? "tick.png" : "tick_grey.png"))%>
</td>
...
<% } %>

The trick/hack with the Ajax.Actionlink using an image was found here.

I actually like the way you did it. I don't see any obvious way to make it simpler. As you pointed out, your image logic is duplicated in the controller and the view, but you need the logic in the view for the page load, and you need the logic in the controller for the Ajax call. — Robert Harvey
– Robert Harvey, Commented Jul 4, 2009 at 1:02
Trying to rewrite this in razor Mvc 3, I get an error with "replace". It says System.Web.MVC.MVChtmlString does not contain a defintion... — Chaka
– Chaka, Commented Dec 23, 2012 at 15:30

SolutionYogi · Accepted Answer · 2009-07-04 04:41:49Z

3

How about rendering checkbox based on whether the model is enabled or not.

In jQuery, you can replace those checkboxes with your images. Something like

Your document.ready code may look like,

$(document).ready(
function()
{
    $('.enabledCheckbox').each(
        function()
        {
            var image = $(this).checked ? 'tick.png' ? 'tick_grey.png';
            $(this).parent.click(
                function()
                {
                    if($(this).is('image'))
                        toggleEnabledStatus(); //write code in toggleEnabledStatus to toggle the state of the model on server side.
                }     
                );
            $(this).parent.html('<img src=' + image + '/>');
        }
    );
}
);

Alternatively, you can use plugin like jquery-checkbox to give them any fancy styling you may think of.

answered Jul 4, 2009 at 4:41

SolutionYogi

32.4k12 gold badges73 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sirrocco Over a year ago

I would say this is the best way to do it - that way you leave the html page only with html and don't clutter it with all that extra code

Dave Markle · Accepted Answer · 2009-07-04 01:55:39Z

0

If elegance is what you want, I would use a jQuery web service request to make a AJAX request to the underlying ASPX page instead. It's pretty darned elegant, because all you need on your ASPX page is a static [WebMethod] to perform the actual action, and a $.ajax() call from jQuery.

answered Jul 4, 2009 at 1:55

Dave Markle

98.3k20 gold badges152 silver badges172 bronze badges

Collectives™ on Stack Overflow

Creating an AJAX toggle-image in ASP.NET MVC

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related