在ASP.NET MVC中创建AJAX切换图像

Question

所以我想为表创建一个切换按钮,在那里我可以进行异步调用来更新数据库记录(启用/禁用).

img http://i41.tinypic.com/os4vua.jpg

经过一些试验和错误,我已经设法让它工作 - 但感觉必须有一个更优雅的方式.

• 我不喜欢在我的控制器中重复我的图像标签,显然......我怎么能以优雅的方式避免这种情况？
• 有没有一个更好的方法来解决这个问题,我做了什么？

这是我在控制器中的代码:

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");
    }

而观点......:

<% 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>
...
<% } %>

使用图像的Ajax.Actionlink的技巧/黑客在这里找到.

Answer 1

如何根据模型是否启用来渲染复选框。

在 jQuery 中，您可以用图像替换这些复选框。就像是

您的 document.ready 代码可能如下所示，

$(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 + '/>');
        }
    );
}
);

或者，您可以使用jquery-checkbox之类的插件来为它们提供您可能想到的任何精美样式。