从 MVC 控制器中模仿 jquery 隐藏

Question

我尝试在 MVC 5.1 应用程序的菜单上显示一个数字“徽章”值。

<span id="myBadge" class="badge menu-badge">@SessionData.MyCount</span>

我有一个 SessionData 类，所以我不必传递魔术字符串。

public class SessionData
{
    const string MyCountKey = "MyCount";

    public static int MyCount
    {
        get { return HttpContext.Current.Session[MyCountKey] != null ? (int)HttpContext.Current.Session[MyCountKey] : 0; }
        set { HttpContext.Current.Session[MyCountKey] = value; }
    }
}

徽章最初是从执行数据库调用的基本控制器填充的。

SessionData.MyCount = CountThingsFromDatabase();

当用户修改数据时，我在前端使用 javascript 和 jquery。如果计数达到 0，jquery 命令会隐藏“0”标记。

function setBadgeValue(badgeName, count) {
  $(badgeName).html(count);
  count > 0 ? $(badgeName).show() : $(badgeName).hide();
}

除了一个例外，所有这些都可以正常工作。当控制器检索到“0”计数时，我想以与 jquery 显示/隐藏命令相同的方式从视图中隐藏徽章。前端 jquery 部分工作得非常好，但我不确定如何从控制器端实现相同的效果。

任何帮助将不胜感激。

更新 1：

我使用 Telerik/Kendo 对象的视图。这是来自显示剑道网格​​的视图。每个网格行都有一个与此方法相关联的按钮。我不确定发布整个视图/控制器是否会有所帮助，因为其中大部分都与剑道有关。

function addToCart(e) {
  // Get the grid data
  var grid = $("#Grid").data("kendoGrid");
  var dataItem = grid.dataItem(grid.select());

  // Add item to the cart
  $.ajax({
    url: 'Search/AddCart',
    data: { itemId: dataItem.ItemId },
    success: function () {
      $('_MyBadge').html();
      $('_Layout').html();

      // Update the count
      setBadgeValue("#myBadge", 1);
    },
    error: function (xmlHttpRequest, textStatus, errorThrown) {
      alert('Failed to add item #' + dataItem.itemId + ' to your cart.\nStatus: ' + textStatus + '\nError: ' + errorThrown);
    }
  });
}

Answer 1

在视图上这样做怎么样？

@if (SessionData.MyCount == 0)
{
    <span id="myBadge" class="badge menu-badge" style="display: none;">@SessionData.MyCount</span>
}
else
{
    <span id="myBadge" class="badge menu-badge">@SessionData.MyCount</span>
}

Answer 2

无需以任何方式使用控制器，如果您的计数为零，只需将您的徽章最初隐藏在视图中即可。

<span id="myBadge" class="badge menu-badge" style="display: @(SessionData.MyCount > 0 ? "block" : "none");">@SessionData.MyCount</span>