gpt4 book ai didi

asp.net-mvc - 在 ASP.NET MVC 中创建 AJAX 切换图像

转载 作者:行者123 更新时间:2023-12-04 21:00:45 25 4
gpt4 key购买 nike

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

img

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

  • 我不喜欢在我的 Controller 中重复我的图像标签,显然......我怎样才能以优雅的方式避免这种情况?
  • 有没有一种总体上更好的方法来解决我所做的事情?

  • 这是我在 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");
    }

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

    发现使用图像的 Ajax.Actionlink 的技巧/黑客 here .

    最佳答案

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

    在 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 这样的插件给他们任何你可能想到的花哨的造型。

    关于asp.net-mvc - 在 ASP.NET MVC 中创建 AJAX 切换图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1081091/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com