ASP.NET MVC中如何在SignalR通知列表末尾添加清除按钮

有两种可行方案，你可以根据需求选择：

方案一：拆分菜单结构（推荐） #

把通知列表和清除按钮分离成独立部分，加载通知时只清空通知区域，不影响清除按钮。

1. 修改HTML结构 #

调整原有的menu1列表，新增子容器专门存放通知，清除按钮放在容器外：

<ul class="nav navbar-nav navbar-right">
  <li role="presentation" class="dropdown open">
    <a class="dropdown-toggle info-number" data-toggle="dropdown" aria-expanded="false" onclick="LoadData();">
      <i class="fa fa-envelope-o"></i>
      <span class="badge bg-green" id="notiCount">0</span>
    </a>
    <ul id="menu1" class="dropdown-menu list-unstyled msg_list" role="menu">
      <!-- 专门存放通知的容器 -->
      <ul id="notificationsContainer"></ul>
      <!-- 清除全部按钮 -->
      <li style="padding: 10px; text-align: center;">
        <a href="javascript:void(0)" onclick="clearAllNotifications()" style="color: #d9534f;">
          清除全部通知
        </a>
      </li>
    </ul>
  </li>
</ul>

2. 调整LoadData函数 #

修改清空和追加通知的目标为notificationsContainer，而非整个menu1：

function LoadData() {
  const $notiContainer = $('#notificationsContainer');
  $notiContainer.empty();
  $notiContainer.append($('<li> Loading.. </li>'));

  $.ajax({
    type: 'GET',
    url: $("#Get").val(),
    dataType: 'json',
    data: {},
    success: function (data) {
      if (data.Success) {
        $notiContainer.empty();
        
        if (data.listNoti.length === 0) {
          $notiContainer.append($('<li>There is nothing to show </li>'));
          console.log("No Data");
        } else {
          $.each(data.listNoti, function (index, value) {
            $notiContainer.append(`<li> 
              <a> 
                <span class="image"><img src="/Theme/production/images/Annon.png"/> </span> 
                <span>${value.Ndetails}</span>
              </a>
            </li><hr/>`);
          });
        }
        // 简化计数更新
        $("#notiCount").text(data.listNoti.length);
      }
    }
  });
}

3. 添加清除通知的后端调用函数 #

实现清除全部通知的逻辑，调用后端接口后重新加载通知：

function clearAllNotifications() {
  if (confirm('确定要清除全部通知吗？')) {
    $.ajax({
      type: 'POST',
      url: '@Url.Action("ClearAllNotifications", "YourNotificationController")', // 替换为你的控制器和方法
      success: function (response) {
        if (response.Success) {
          LoadData(); // 重新加载通知列表
        } else {
          alert('清除失败，请重试');
        }
      },
      error: function() {
        alert('网络异常，清除失败');
      }
    });
  }
}

方案二：加载通知后追加按钮 #

如果不想修改HTML结构，可以在每次通知加载完成后，手动追加清除按钮：

修改LoadData的success逻辑 #

success: function (data) {
  if (data.Success) {
    $('#menu1').empty();
    
    if (data.listNoti.length === 0) {
      $('#menu1').append($('<li>There is nothing to show </li>'));
      console.log("No Data");
    } else {
      // 追加所有通知
      $.each(data.listNoti, function (index, value) {
        $('#menu1').append(`<li> 
          <a> 
            <span class="image"><img src="/Theme/production/images/Annon.png"/> </span> 
            <span>${value.Ndetails}</span>
          </a>
        </li><hr/>`);
      });
      // 追加清除按钮
      $('#menu1').append(`<li style="padding: 10px; text-align: center;">
        <a href="javascript:void(0)" onclick="clearAllNotifications()" style="color: #d9534f;">
          清除全部通知
        </a>
      </li>`);
    }
    $("#notiCount").text(data.listNoti.length);
  }
}

同样需要实现上述的clearAllNotifications函数，以及后端对应的清除接口。

后端接口示例（ASP.NET MVC） #

在你的控制器中添加清除通知的方法：

[HttpPost]
public JsonResult ClearAllNotifications()
{
    try
    {
        // 这里实现清除当前用户所有通知的逻辑，比如：
        // var userId = User.Identity.GetUserId();
        // db.Notifications.Where(n => n.UserId == userId).ToList().ForEach(n => n.IsDeleted = true);
        // db.SaveChanges();
        
        return Json(new { Success = true });
    }
    catch (Exception ex)
    {
        // 记录日志
        return Json(new { Success = false, Message = ex.Message });
    }
}

内容的提问来源于stack exchange，提问作者Dev Beginner