Question

我尝试将Signalr通知实现到我现有的MVC项目，以及我在View中的代码如下

<!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项目，但是当尝试将其实现为现有的时，会出现此问题。

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

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

任何解决此问题的想法

Answer 1

我也正在开发一个带信号器的项目，我想这也是一个引用问题。

再次查看您的代码，行：

<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)

希望它有所帮助。让我知道你有任何疑问!!

无法对现有的MVC项目实施Singalr通知

1 个答案: