user2217303
user2217303

Reputation: 356

SignalR MVC4 Issue

I am following this tutorial to integrate SignalR to my project http://venkatbaggu.com/signalr-database-update-notifications-asp-net-mvc-usiing-sql-dependency/

So basically this is my View where I want to show my table.

@{
    ViewBag.Title = "PatientInfo";
}

<h2>PatientInfo</h2>
<h3>@ViewBag.pName</h3>
<h5>@ViewBag.glucoseT</h5>

@if (Session["LogedUserFirstname"] != null)
{

    <text>
    <p>Welcome @Session["LogedUserFirstname"].ToString()</p>
    </text>

    @Html.ActionLink("Log Out", "Logout", "Home")


<div class="row">
    <div class="col-md-12">
       <div id="messagesTable"></div>
    </div>
</div>


    <script src="/Scripts/jquery.signalR-2.2.0.js"></script>
 <!--Reference the autogenerated SignalR hub script. -->
    <script src="/SignalR/Hubs"></script>
<script type="text/javascript">
    $(function () {
        // Declare a proxy to reference the hub.
        var notifications = $.connection.dataHub;

        //debugger;
        // Create a function that the hub can call to broadcast messages.
        notifications.client.updateMessages = function () {
            getAllMessages()

        };
        // Start the connection.
        $.connection.hub.start().done(function () {
            alert("connection started")
            getAllMessages();
        }).fail(function (e) {
            alert(e);
        });
    });


    function getAllMessages() {
        var tbl = $('#messagesTable');
        $.ajax({
            url: '/home/GetMessages',
            contentType: 'application/html ; charset:utf-8',
            type: 'GET',
            dataType: 'html'
        }).success(function (result) {
            tbl.empty().append(result);
        }).error(function () {

        });
    }
</script>



}

My project is running but the table doesn't appear at all. I started by pasting the view because I believe that the scripts are not executed in the first place; The Alert Message is NOT being shown even if I try to add one directly after

$(function () {
        alert("I am an alert box!");

This is my Layout.cshtml file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title - My ASP.NET MVC Application</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    @Styles.Render("~/Content/css")
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/DataTables/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <header>
        <div class="content-wrapper">
        </div>
    </header>
    <div id="body">
        @RenderSection("featured", required: false)
        <section class="content-wrapper main-content clear-fix">
            @RenderBody()
        </section>
    </div>
    <footer>
        <div class="content-wrapper">
            <div class="float-left">
                <p>&copy; @DateTime.Now.Year - My ASP.NET MVC Application</p>
            </div>
        </div>
    </footer>

    <script src="~/Scripts/jquery-1.9.1.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="~/Scripts/DataTables/jquery.dataTables.min.js"></script>
    <script src="~/Scripts/jquery.signalR-2.2.0.min.js"></script>
 <!--Reference the autogenerated SignalR hub script. -->
    <script src="SignalR/Hubs"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#p_table").dataTable();
        });
    </script>

    @RenderSection("scripts", required: false)
</body>
</html>

I am using Visual Studio 2012, MVC4. Please Help..

Upvotes: 0

Views: 445

Answers (1)

Darin Dimitrov
Darin Dimitrov

Reputation: 1038890

Make sure you have placed all your script tags from the view inside the scripts section of the view:

@section scripts {
    ... your <script> tags come here
}

The reason why your alerts don't work is because you have directly put them inside the body of the view which gets rendered at the @RenderBody() call of the Layout. But as you can see it's only at the end of this Layout that we have references to the scripts such as jQuery and signalr.

Now they will appear at the proper location: @RenderSection("scripts", required: false).

By the way use the console window in your webbrowser to see potential script errors you might have. For example in your case it would display that jQuery is not defined error.

Another remark: don't include signalR script twice: right now you seem to have included jquery.signalR-2.2.0.js in your view and jquery.signalR-2.2.0.min.js in your Layout.

Upvotes: 1

Related Questions