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

【问题标题】：Creating an AJAX toggle-image in ASP.NET MVC在 ASP.NET MVC 中创建 AJAX 切换图像
【发布时间】：2009-07-03 23:02:43
【问题描述】：

所以我想为表创建一个切换按钮，我可以在其中进行异步调用以更新数据库记录（启用/禁用）。

经过反复试验，我设法让它工作了——但感觉必须有一种更优雅的方式。

显然，我不喜欢在控制器中重复我的图像标签...我怎样才能以优雅的方式避免这种情况？
有没有比我所做的更好的整体方法来解决这个问题？

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

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 的技巧/hack 被发现 here。

【问题讨论】：

我真的很喜欢你的做法。我没有看到任何明显的方法可以使它更简单。正如您所指出的，您的图像逻辑在控制器和视图中是重复的，但是您需要视图中的逻辑来加载页面，并且您需要控制器中的逻辑来进行 Ajax 调用。
尝试在 razor Mvc 3 中重写它，我收到“替换”错误。它说 System.Web.MVC.MVChtmlString 不包含定义...
关于如何用剃刀重写的任何帮助？

标签： asp.net-mvc asp.net-ajax

【解决方案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 之类的插件为它们提供您可能想到的任何精美样式。

【讨论】：

我会说这是最好的方法 - 这样您就可以只使用 html 离开 html 页面，而不会因为所有额外的代码而弄乱它

【解决方案2】：

如果您想要优雅，我会使用 jQuery Web 服务请求来向底层 ASPX 页面发出 AJAX 请求。它非常优雅，因为您在 ASPX 页面上只需要一个静态 [WebMethod] 来执行实际操作，以及来自 jQuery 的 $.ajax() 调用。

【讨论】：