【问题标题】:Unable to implement Singalr notifications to existing MVC project无法对现有 MVC 项目实施 Signalr 通知
【发布时间】:2018-02-12 05:15:37
【问题描述】:

我尝试在我现有的 MVC 项目和视图中的代码中实现 Signalr 通知,如下所示

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <span class="noti glyphicon glyphicon-bell"><span class="count">&nbsp;</span></span>
                <div class="noti-content">
                    <div class="noti-top-arrow"></div>
                    <ul id="notiContent"></ul>
                </div>
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
                @Html.Partial("_LoginPartial")
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @* Add Jquery Library *@
    <script src="~/Scripts/jquery-2.2.3.min.js"></script>
    <script src="~/Scripts/jquery.signalR-2.2.0.min.js"></script>
    <script src="/signalr/hubs"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    @* Add css  *@
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <style type="text/css">
        /*Added css for design notification area, you can design by your self*/
        /* COPY css content from youtube video description*/

    </style>

    @* Add jquery code for Get Notification & setup signalr *@
    <script type="text/javascript">
        $(function () {
            // Click on notification icon for show notification
            $('span.noti').click(function (e) {
                e.stopPropagation();
                $('.noti-content').show();
                var count = 0;
                count = parseInt($('span.count').html()) || 0;
                //only load notification if not already loaded
                if (count > 0) {
                    updateNotification();
                }
                $('span.count', this).html('&nbsp;');
            })
            // hide notifications
            $('html').click(function () {
                $('.noti-content').hide();
            })
            // update notification
            function updateNotification() {
                $('#notiContent').empty();
                $('#notiContent').append($('<li>Loading...</li>'));

                $.ajax({
                    type: 'GET',
                    url: '/home/GetNotificationContacts',
                    success: function (response) {
                        $('#notiContent').empty();
                        if (response.length  == 0) {
                            $('#notiContent').append($('<li>No data available</li>'));
                        }
                        $.each(response, function (index, value) {
                            $('#notiContent').append($('<li>New contact : ' + value.ContactName + ' (' + value.ContactNo + ') added</li>'));
                        });
                    },
                    error: function (error) {
                        console.log(error);
                    }
                })
            }
            // update notification count
            function updateNotificationCount() {
                var count = 0;
                count = parseInt($('span.count').html()) || 0;
                count++;
                $('span.count').html(count);
            }
            // signalr js code for start hub and send receive notification
            var notificationHub = $.connection.notificationHub;


            $.connection.hub.start().done(function () {
                console.log('Notification hub started');
            });

            //signalr method for push server message to client
            notificationHub.client.notify = function (message) {
                if (message && message.toLowerCase() == "added") {
                    updateNotificationCount();
                }
            }

        })
    </script>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

排队

// signalr js code for start hub and send receive notification
            var notificationHub = $.connection.notificationHub;


            $.connection.hub.start().done(function () {
                console.log('Notification hub started');
            });

$.connection 没有定义

以及在运行应用程序时

Uncaught TypeError: Cannot read property 'notificationHub' of undefined
    at HTMLDocument.<anonymous> (Login:219)
    at i (jquery-2.2.3.min.js:2)
    at Object.fireWith [as resolveWith] (jquery-2.2.3.min.js:2)
    at Function.ready (jquery-2.2.3.min.js:2)
    at HTMLDocument.J (jquery-2.2.3.min.js:2)

它将错误行显示为 var notificationHub = $.connection.notificationHub;

但是当我尝试在一个新项目中实现它时,它在删除一些额外的脚本引用后工作,但在这个项目中它没有工作

这是我遵循的示例 http://www.dotnetawesome.com/2016/05/push-notification-system-with-signalr.html

这适用于空 MVC 项目,但在尝试对现有项目实施相同的项目时会出现此问题。

// 用于启动集线器和发送接收通知的信号器 js 代码 var notificationHub = $.connection.notificationHub;

$.connection 没有应该来自 jquery.signalR-2.2.0.js 的定义

解决这个问题的任何想法

【问题讨论】:

    标签: javascript jquery asp.net-mvc asp.net-mvc-5 signalr


    【解决方案1】:

    我也在用 signalr 开发一个项目,我也猜这是一个引用问题。

    再看看你的代码,那一行:

    <script src="~/Scripts/jquery-2.2.3.min.js"></script>
    

    还有一行:

    @Scripts.Render("~/bundles/jquery")
    

    在这里,您引用了 jQuery 库 2 次。我会重构引用并将其仅保存在一个地方和信号器代码之前。因为 signalr 依赖于 jquery 库。我建议你使用这个层次结构:

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/jqueryTables")
    <script src="~/signalr/hubs"></script>
    @RenderSection("scripts", required: false)
    

    希望对您有所帮助。有任何问题请告诉我!!

    【讨论】:

    • 非常感谢您的帮助,我试过了,但仍然遇到同样的问题。这是我遵循dotnetawesome.com/2016/05/… 的示例。这适用于空 MVC 项目,但是当尝试对现有项目实施相同的项目时会出现此问题。 // 用于启动集线器并发送接收通知的信号器 js 代码 var notificationHub = $.connection.notificationHub; $.connection 没有定义
    • 你还在用吗?我认为问题就在这里。让我再看一遍,如果我发现新的东西会更新你
    • 问题也可能出在代码末尾的捆绑包上:@Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/bootstrap ”)。您是否尝试过删除它们?您还需要确保顺序如下: 并将您的集线器类设为公开,如下所示: public class ChatHub : Hub
    • 非常重要,将此注释添加到您的 Hub 类中:[HubName("notificationHub")]。像这样:[HubName("notificationHub")] public class NotificationHub : Hub
    • 我删除了所有这些。你提到的改变和我页面中剩下的唯一脚本标签是 @* 添加css *@
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-03-08
    • 1970-01-01
    • 2014-10-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多