jQuery 文档就绪函数被 _layout.cshtml 覆盖答案

【问题标题】：jQuery document ready function is overwritten by _layout.cshtmljQuery 文档就绪函数被 _layout.cshtml 覆盖
【发布时间】：2014-06-14 05:46:46
【问题描述】：

在我的 MVC 图中，我有 index.cshtml，包括 _layout.cshtml：

在_layout.cshtml中，我有一个信息显示：

<div id='pageTheme'> Operations Overview </div>

它位于标题栏中，用于显示与页面相关的信息。在文档就绪功能中，我有一个按钮单击功能，它从 MVC 控制器路由到一个新页面，并且在我拥有的功能中

$(“#pageTheme”).text(“Hello Kitty”);

单击按钮并执行文档准备功能时，会出现一个新的路由页面，我可以看到“Hello Kitty”出现然后返回 “运营概览”。我以为加载新页面后会执行文档准备功能，而不是再次返回该页面。我做错了什么？

以下是文档准备功能的详细说明：

 $(document).ready(function () {
        // Click main / sub menu
        $("#nav  li  a").on("click", function () {
            $("#nav li").removeClass("menuActive");
            $(this).parents(".topMenu").addClass("menuActive");
            var mainMenuTitle = $(this).parents(".topMenu").children('a').text();
            $("#pageTheme").text(mainMenuTitle);
        });
    });

下面是mainMenu，在_layout.cshtml里面

<ul id="nav">
            <li class="topMenu"><a class="topMenuA" href='@Url.Action("Index", "SavedViews")'>Saved Views</a></li>
            <li class="topMenu"><a class="topMenuA" > Administration</a> 
                <ul class="subnav">
                    <li class="subMenu"> <a href=@Url.Action("Index", "ServerLogs")>Server Logs</a></li> 
                    <li class="subMenu"> <a href=@Url.Action("Index", "DirSet")>Directory Setting</a></li> 
                    <li class="subMenu"> <a href=@Url.Action("Index", "Site")>Locations</a></li> 
                    <li class="subMenu"> <a href=@Url.Action("Index", "AccessPoint")>Wi-Fi Access Point</a></li> 

                    <li class="subMenu"> <a href=@Url.Action("Index", "ServerLogs")>TIS Server Logs</a></li> 

                    <li class="subMenu"> <a href=@Url.Action("Index", "SoftwareBaseLine")>Software Baselines</a></li> 
                    <li class="subMenu"> <a href=@Url.Action("Index", "Car")> Cars</a></li> 
                    <li class="subMenu"> <a href=@Url.Action("CarSeries", "Car")>Car Series</a></li> 
                    <!--We need a better way to handle the hiding and showing of functionality across projects-->
                    @if (Global.CompanyName == "Port Authority Transit Corporation")  // Video is for WMATA only
                    {
                    <li class="subMenu"> <a href=@Url.Action("Index", "ManagePassword")>Maintenance Password</a></li> 
                    }
                </ul>
            </li>
            <li class="topMenu"><a class="topMenuA" href=@Url.Action("Index", "JobManage")>Job Management</a></li>
</ul>

当点击子菜单时，它执行路由：假设：

href='@Url.Action("Index", "SavedViews")

这是Controller SavedViews的索引。以下是控制器cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

    namespace Fleet.Controllers
    {
        public class SavedViewsController : Controller
        {  
            public ActionResult Index()
            {
                return View();
            }
        }
    }

以下是index.chtml：

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

<h2>Saved view for testing now</h2>

<LINK href="~/Content/css/SoftwareVersionPage.css" rel="stylesheet">  
@Scripts.Render("~/bundles/tableFilter")   
@Scripts.Render("~/bundles/jsonTable") 
@Styles.Render("~/Content/Filtercss")
<script type="text/javascript" src="~/Content/js/softwareVersion.js"></script>
<script type="text/javascript" src="~/Content/js/jquery.dataTables.js"></script>


<div class="outerDivBody">  
    <div id="filterMenu">
        @Html.Partial("_FilterMenu")    
    </div>
    <div id="displayNoTitle">
        <p id="showNOofItems"> </p>
    </div>
    <div id="middleOuterDiv">
        <div id="filterDiv" class="halignDiv">
            <div class="filterTopRow"> </div>
            <div class="filterContent"></div>

            <p> Search </p>
            <div id="div_filterSearch">   
                <div>
                </div>     
            </div> 
        </div>
        <div id="MiddleRightSoftDiv" class="softwareVersionDiv">               
        </div>    
    </div>   
</div>

_layout.cshtml：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title - Quester Tangent FleetWise</title>

        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
        @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required: false)

        @if (IsSectionDefined("AddFilesToHead"))
        {
            @RenderSection("AddFilesToHead", required: false)
        }
    </head>
    <body>
        <header>
            <div class="header">
                <div id="headerstrip">&nbsp;</div>
                <div id="headerstrip1">&nbsp;</div>
                <div  id="infoStrip">
                    <section id="pageTheme">
                        Operations Overview
                    </section>
                    <section id="ws_stat">   Disconnected   </section>                     
                </div>
                <div id ="companyLogo">
                    <A href="@Global.CompanyURL">
                        <IMG title="@Global.CompanyName" id="logo"  alt="@Global.CompanyName"  src="@Url.Content("~/Content/img/")@Global.CompanyLogoFile"  > 
                    </A>
                </div>

                <div id="pageTitle"> </div>

                <div class="float-right">
                    <section id="login">
                        @Html.Partial("_LoginPartial")
                    </section>
                    <nav>
                         @if (Session["MyMenu"] == null){
                            Session["MyMenu"] = Html.Partial("~/Views/Shared/_MainMenu.cshtml");
                          } 
                         @Session["MyMenu"]
                    </nav>
                </div>

            </div>
        </header>

        <div id="body"  class="content-wrapper">
            @RenderSection("featured", required: false)
            <section class="content-wrapper main-content clear-fix">
                @RenderBody()
            </section>
        </div>

    </body>
    @if (IsSectionDefined("AddPageScriptToFooter"))
    {
        @RenderSection("AddPageScriptToFooter", required: false)
    }
</html>

【问题讨论】：

欢迎来到 Stack Overflow。请花点时间阅读How to create a Minimal, Complete, and Verifiable example。必须有比你给我们更多的代码。您说会出现一个新页面，但是如何，我没有看到与此相关的任何内容。
听起来您正在更新页面上的当前 div，然后在后端获取新页面（这就是为什么它看起来像是“恢复”回“操作概述”的原因）。此按钮是否绑定到表单？正如@ErikPhilips 所说......您必须与我们分享更多代码。
感谢 Erik 和 Ballbin。我提供了更多代码。请看一下。这个问题我已经有一段时间了，我应该花时间解决它。

标签： jquery asp.net-mvc

【解决方案1】：

由于您的 href 中有一个值，它会去获取该页面。您所看到的是在浏览器从服务器获得响应之前运行的 javascript 代码。所以发生的事情是...... js 更改生效，然后新页面加载清除前一页中的任何内容。

您可以通过在事件对象中填充并调用preventDefault...来停止此操作...

$("#nav  li  a").on("click", function (e) {
  e.preventDefault();
  ...//rest of your code...
});

我猜你想链接到正常运行，因为你在href 属性中给出了一个值？如果是这种情况，您可以在服务器呈现页面时轻松更改“pageTheme”文本。

在调用您的布局的视图中，您可以将值设置为ViewBag...

@{
    ViewBag.Title = "Index"; //Or what ever view you are in...
    ViewBag.PageTheme = "Hello Kitty"; // Or what ever theme you want for the particular view
    Layout = "~/Views/Shared/_Layout.cshtml";
}

然后在您的布局中您可以将其更改为...

<section id="pageTheme">
    @ViewBag.PageTheme
</section>

或者另一种选择是添加 javascript，以便在页面加载时脚本会将其更改为刚刚加载的页面所需的值。但我强烈建议你在服务器端这样做。

希望这会有所帮助，除非我完全缺少某些东西？...

【讨论】：

你很棒，鲍尔宾。我和你有同样的想法。唯一的苦涩是我必须在每个页面上添加额外的内容，或者以你的方式，或者在每个页面的底部使用 javascript ，如果我们没有更好的方法。无论哪种方式，它都相当于硬编码
Hello Kitty ，当我在网站中有很多网页时，它变得很顽皮。非常感谢。
您有设置客户端会话变量（javascript 设置和获取会话变量）的经验吗？如果我们能做到这一点，那就更美了。谢谢。
你可以做本地存储或cookies。看看这个 SO 问题client-side-js-session-library 或这篇文章cookieless-javascript-session-variables/