Asp.net mvc 4 信号器客户端脚本仅在索引页中运行_Asp.net Mvc 4_Signalr

Asp.net mvc 4 信号器客户端脚本仅在索引页中运行

asp.net-mvc-4 signalr

Asp.net mvc 4 信号器客户端脚本仅在索引页中运行,asp.net-mvc-4,signalr,Asp.net Mvc 4,Signalr,我正在开发一个MVC4Web应用程序，并使用signalR库制作一个实时通知系统。我在母版页中使用了一个名为_Layout.cshtml的工作脚本。以下是布局中的脚本： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0">

我正在开发一个MVC4Web应用程序，并使用signalR库制作一个实时通知系统。我在母版页中使用了一个名为_Layout.cshtml的工作脚本。以下是布局中的脚本：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    @Scripts.Render("~/bundles/jquery")
    <script src="~/Scripts/jquery-ui-1.8.24.min.js"></script>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    <script type="text/javascript" src="Scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery.signalR-2.0.1.min.js"></script>
    <script src="~/signalr/hubs"></script>


</head>
<body >


    <header dir="rtl">

        <table   align="center" cellpadding="0" cellspacing="0"  style="width:100%;">

            <tr>
                <td style="width:30%; height:40px;" valign="top"><img  src="~/Images/header_logo3.png" /></td>
                <td style="width: 40%;  height: 40px; " valign="top"> <a href='@Url.Action("Index","Home")'><img class="header_logo" src='@Url.Content("~/Images/header_logo2.png")' /></a></td>
                <td style="width: 30%; height: 40px; " valign="top" ><img  src="~/Images/header_logo4.png" /></td>
            </tr>

        </table>



        <h2>Index</h2>
        <span id="mySpanTag"></span>
        <script type="text/javascript">
            //var notificationHub = $.connection.notificationHub;

            $(function () {
                //Create Hub on Air
                var chat = $.connection.notificationHub;

                //Messages
                $messages = $("#mySpanTag");

                //Client Side Method To Access From Server Side Method
                chat.client.sendMessage = function (msg) {
                    $messages.html(msg);
                }

                $.connection.hub.start(function () {
                    chat.server.sendMessage("Hello World!");
                });
            });
        </script>



    </header>

    <div id="wrapper" dir="rtl">
        <div id="Smenu" class="visible">
            @{Html.RenderAction("Menu", "SettingsMenu", new { id = "nir"});}
        </div>
        @RenderSection("JavaScript", false)
        <section>
            @RenderBody()
        </section>
    </div>
    <footer></footer>

</body>
</html>

一切正常，我在页面中看到从hub类调用的按摩方法，除了此脚本仅在index.cshtml启动页面上运行，而不是在项目中的所有网页或特定网页中运行。e、 g不工作，脚本与您看到的相同：

@model schoolnetMobile.Models.UserModel

@{
    ViewBag.Title = "Details";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

    <h2>Index</h2>
    <span id="mySpanTag"></span>
    <script type="text/javascript">
        //var notificationHub = $.connection.notificationHub;

        $(function () {
            //Create Hub on Air
            var chat = $.connection.notificationHub;

            //Messages
            $messages = $("#mySpanTag");

            //Client Side Method To Access From Server Side Method
            chat.client.sendMessage = function (msg) {
                $messages.html(msg);
            }

            $.connection.hub.start(function () {
                chat.server.sendMessage("Hello World!");
            });
        });
    </script>

    <br /><br />

    @if (Request.IsAuthenticated) {
        <h4>profile: @Model.UserName</h4>
        if (User.Identity.Name == @Model.UserName)
        {
           <br />
            <ul style="list-style-type: none;">
                <li>first name: @Model.FirstName;</li>
                <li>username: @Model.UserName</li>
                <li>schoolname: @Model.SchoolName</li>
                <li>role: @Model.Role</li>
            </ul>
        }
        else
        { 

            <br />
            <ul style="list-style-type: none;">

                <li>username: @Model.UserName</li>
                <li>school: @Model.SchoolName</li>
                <li>role: @Model.Role</li>
            </ul>
        }
    }
    else
    { 
      <h4>need to login</h4>
    }

更新：我只在detail.cshtml中放置了脚本。看起来像这方面有个问题 var chat=$.connection.notificationHub；因为只有第一个alerthi弹出，而不是第二个

@model HaifanetMobile.Models.UserModel

@{
    ViewBag.Title = "Details";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section Scripts
{

<script type="text/javascript">


        $(function () {
            //Create Hub on Air
            alert("hi"); 
            var chat = $.connection.notificationHub;
            alert("hi1");
            //Messages
            $messages = $("#messages");
            alert("hi2");
            //Client Side Method To Access From Server Side Method
            chat.client.addMessage = function (frm, msg) {
                $messages.append("<br /><b>" + frm + ":</b>" + msg);
            }
            alert("hi3");
            $("#txtMsg").keypress(function (e) {
                //when enter
                if (e.which == 13) {

                    alert("hi4");
                    //get value of input
                    var input = $(this).val();

                    //send message to "Server Side Method"
                    chat.server.sendMessage("@Session.SessionID", input);

                    //Reset TextBox
                    $(this).val("");
                }
            });
            //Hub Starting
            $.connection.hub.start();
        });


</script> 

    }
    <div>Your ID: @Session.SessionID</div>
    <input type="text" id="txtMsg" />
    <div id="messages">
    </div>

    <h2>Index</h2>
    <span id="mySpanTag"></span>


    <br /><br />

    @if (Request.IsAuthenticated) {
        <h4>user profile: @Model.UserName</h4>
        if (User.Identity.Name == @Model.UserName)
        {
           <br />
            <ul style="list-style-type: none;">
                <li>first name: @Model.FirstName;</li>
                <li>user name: @Model.UserName</li>
                <li>school: @Model.SchoolName</li>
                <li>role: @Model.Role</li>
            </ul>
        }
        else
        { 

            <br />
            <ul style="list-style-type: none;">

                <li>username: @Model.UserName</li>
                <li>school: @Model.SchoolName</li>
                <li>role: @Model.Role</li>
            </ul>
        }
    }
    else
    { 
      <h4>Please login</h4>
    }

两个页面中的脚本是否相同？否，我将其从_Layout移到detail.cshtml进行测试，这样就不会有重复，但在一个页面中它可以工作，而在另一个页面中则无法工作…更改`$messages=$myspan；`到“$messages=$mySpanTag[0]；”试试看\否：仍然不工作关闭项目并重新打开。有时，如果在添加使用布局的页面后添加了脚本，则不会加载该脚本。你的这种情况对我来说是新的：/。我希望这能奏效。还要确保在整个DOM中，脚本中使用的元素的id是不同的。

@model HaifanetMobile.Models.UserModel

@{
    ViewBag.Title = "Details";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section Scripts
{

<script type="text/javascript">


        $(function () {
            //Create Hub on Air
            alert("hi"); 
            var chat = $.connection.notificationHub;
            alert("hi1");
            //Messages
            $messages = $("#messages");
            alert("hi2");
            //Client Side Method To Access From Server Side Method
            chat.client.addMessage = function (frm, msg) {
                $messages.append("<br /><b>" + frm + ":</b>" + msg);
            }
            alert("hi3");
            $("#txtMsg").keypress(function (e) {
                //when enter
                if (e.which == 13) {

                    alert("hi4");
                    //get value of input
                    var input = $(this).val();

                    //send message to "Server Side Method"
                    chat.server.sendMessage("@Session.SessionID", input);

                    //Reset TextBox
                    $(this).val("");
                }
            });
            //Hub Starting
            $.connection.hub.start();
        });


</script> 

    }
    <div>Your ID: @Session.SessionID</div>
    <input type="text" id="txtMsg" />
    <div id="messages">
    </div>

    <h2>Index</h2>
    <span id="mySpanTag"></span>


    <br /><br />

    @if (Request.IsAuthenticated) {
        <h4>user profile: @Model.UserName</h4>
        if (User.Identity.Name == @Model.UserName)
        {
           <br />
            <ul style="list-style-type: none;">
                <li>first name: @Model.FirstName;</li>
                <li>user name: @Model.UserName</li>
                <li>school: @Model.SchoolName</li>
                <li>role: @Model.Role</li>
            </ul>
        }
        else
        { 

            <br />
            <ul style="list-style-type: none;">

                <li>username: @Model.UserName</li>
                <li>school: @Model.SchoolName</li>
                <li>role: @Model.Role</li>
            </ul>
        }
    }
    else
    { 
      <h4>Please login</h4>
    }