Question

在我的MVC porogram中，我有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>

Answer 1

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

您可以通过在事件对象中填充并调用preventDefault ...

来停止此操作

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

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

在调用布局的视图中，您可以将值设置为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，这样当页面加载脚本时会将其更改为您刚刚加载的页面所需的值。但我强烈建议你在服务器端这样做。

希望这有帮助，除非有一些我完全失踪的东西？...

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

1 个答案: