使用SignalR完成通知收集后如何将脚本获取的通知渲染到视图

第一步：调整视图代码，给目标元素添加唯一标识 #

修改你的通知展示区域代码，给数量显示标签和通知容器加ID，方便JS定位操作：

<li class="nav-item dropdown">
 <a class="nav-link" data-toggle="dropdown" href="#">
   <i class="far fa-bell"></i>
   <!-- 新增id="ntCnt"和脚本对应，默认值设为0 -->
   <span id="ntCnt" class="badge badge-warning navbar-badge">0</span>
 </a>
 <!-- 新增id="notificationContainer"作为通知渲染容器 -->
 <div id="notificationContainer" class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
   <!-- 通知内容会动态插入到这里 -->
   <div class="dropdown-divider"></div>
 </div>
</li>

第二步：调整脚本代码，修正变量和选择器问题 #

修改后的脚本如下，主要修正了未定义变量、选择器不匹配的问题：

<script src="~/Scripts/jquery.signalR-2.4.2.min.js"></script>
<script src="~/signalr/Hubs/"></script>

<script type="text/javascript">
$(document).ready(function () {
  var hub = $.connection.notifications;
  hub.client.displayNoti = function () {
    getData();
  };
  // 连接成功后再拉取初始通知，避免偶发请求失败
  $.connection.hub.start().done(function(){
    getData();
  });

  function getData() {
    var $notificationContainer = $('#notificationContainer');
    var $countBadge = $('#ntCnt');
    $.ajax({
      url: '/Notification/GetNotification',
      type: 'GET',
      dataType: 'json',
      success: function (data) {
        // 兼容处理：如果后端已经返回JSON对象就不重复解析
        data = typeof data === 'string' ? $.parseJSON(data) : data;
        // 清空原有通知内容，保留最后的分隔线
        $notificationContainer.find('.alert').remove();
        $countBadge.text(data.length);
        if (data.length > 0) {
          // 批量生成通知HTML，减少DOM操作次数
          var notificationHtml = '';
          for (var i = 0; i < data.length; i++) {
            notificationHtml += '<div class="alert alert-danger alert-dismissable dropdown-item">' +
            '<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>'+ 
            data[i].Message +
            '</div>';
          }
          // 插入到分隔线前面
          $notificationContainer.prepend(notificationHtml);
        }
      }, 
      error: function (r, e, w) {
        console.error('通知拉取失败', e);
      }
    });
  }
})
</script>

核心修改点说明 #

• 修复了原脚本中Notificationsdiv未定义、$('#divNotificaion')对应元素不存在的问题
• 通知项新增dropdown-item类，适配下拉菜单的样式规范
• 优化了SignalR连接逻辑，连接成功后再拉取初始通知，降低异常概率
• 新增JSON类型判断，避免重复解析报错
• 调整了通知插入逻辑，保留下拉菜单原有分隔线结构，样式更统一

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