为什么此页面会损坏显示共享视图?

Why is this page displaying the shared view corruptly?

我正在创建一个 MVC 网络应用程序。我在线下载了一个免费模板,它似乎工作正常。主页呈现完美,我创建的另一个页面也是如此。

首页:

我创建了另一个名为游戏的视图(和控制器)。当我导航到此页面时,它显示正常并且我希望它显示的方式:

游戏索引视图:

我在 'Game' 视图文件夹中有两个视图文件,一个名为 index,另一个名为 NewScore,上图是该文件夹中的索引视图,但是当我导航到使用相同的共享视图页面以损坏的方式显示,如此处所示....

索引视图和NewScore 视图中的代码完全相同。这是两者的代码:

@model DARTPRO.Models.Game
<head>
    <link href="Content/css/style.css" rel="stylesheet" type="text/css"     media="all" />
</head>
@{
    ViewBag.Title = "Begin game!";
}

<hgroup class="title">
    <h1>@ViewBag.Title</h1>
</hgroup>

<h1 style="display:inline">Current Score: @ViewBag.myScore</h1>




@using (Html.BeginForm("NewScore", "Game", FormMethod.Post))
{
    @Html.Label("Enter a value : ")
    @Html.TextBox("ReduceBy")
    <input type="submit" value="Go Now" />
}   

控制器视图:

 public class GameController : Controller
{
    private static Game myScore = new Game();

    public ActionResult Index()
    {
        myScore.Set_Score(501);
        ViewBag.myScore = myScore.Get_Score();

        return View();
    }

    [HttpPost]
    public ActionResult NewScore(string ReduceBy)
    {
        int RD = Convert.ToInt32(ReduceBy);
        myScore.Set_Score(myScore.Get_Score() - RD);

        ViewBag.myScore = myScore.Get_Score();
        return View();
    }


}

最后,也许是最重要的共享视图代码。例如_Layout.cshtml.

<!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, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="Content/css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href='http://fonts.googleapis.com/css?family=Lato:400,300,600,700,800' rel='stylesheet' type='text/css'>
<script src="Content/js/jquery.min.js"></script>
<!---strat-slider---->
<link rel="stylesheet" type="text/css" href="Content/css/slider.css" />
<script type="text/javascript" src="Content/js/modernizr.custom.28468.js">   </script>
<script type="text/javascript" src="Content/js/jquery.cslider.js"></script>
<script type="text/javascript">
    $(function () {
        $('#da-slider').cslider({
            autoplay: true,
            bgincrement: 450
        });
    });
</script>
<!---//strat-slider---->
<script src="Content/js/jquery.magnific-popup.js" type="text/javascript"></script>
<link href="Content/css/magnific-popup.css" rel="stylesheet" type="text/css">
<script>
    $(document).ready(function () {
        $('.popup-with-zoom-anim').magnificPopup({
            type: 'inline',
            fixedContentPos: false,
            fixedBgPos: true,
            overflowY: 'auto',
            closeBtnInside: true,
            preloader: false,
            midClick: true,
            removalDelay: 300,
            mainClass: 'my-mfp-zoom-in'
        });
    });
</script>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")

</head>
<body>

    <div class="wrap">
        <div class="header-top">
            <div class="logo">
                <a href="index.html"><img src="Content/images/logo.png" alt="" /></a>
            </div>
            <div class="login"> @Html.Partial("_LoginPartial")</div>
            <div class="h_menu4">
                <!-- start h_menu4 -->
                <a class="toggleMenu" href="#">Menu</a>
                <ul class="nav">
                    <li class="active"><a href="index.html">Home</a></li>
                    <li><a href="pages.html">Pages</a> </li>
                    <li><a href="shortcodes.html">Shortcodes</a></li>
                    <li><a href="blog.html">Blog</a></li>
                    <li><a href="portfolio.html">Portfolio</a></li>
                    <li><a href="contact.html">Contact</a></li>

                </ul>
                <script type="text/javascript" src="Content/js/nav.js"></script>
            </div><!-- end h_menu4 -->
            <div class="clear"></div>
        </div><!-- end header_main4 -->           
    </div>
    <div id="Hero">@RenderSection("Slide", required: false)</div>      
    <div class="main">
        <div class="wrap">
            <h2 class="m_1">Leaderboard</h2>
            <div class="content-top">  
                @RenderBody()             
            </div>
            </div>               
    </div>
    <div class="footer">
        <div class="wrap">
            <div class="footer-grid footer-grid1">
                <div class="f-logo">
                    <a href="index.html"><img src="Content/images/f-logo.png" alt=""></a>
                </div>
                <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words</p>
            </div>
            <div class="footer-grid footer-grid2">
                <h4>Contact</h4>
                <ul>
                    <li>
                        <i class="pin"> </i><div class="extra-wrap">
                            <p>2321 Street name,<br> City name,Country</p>
                        </div>
                    </li>
                    <li>
                        <i class="phone"> </i><div class="extra-wrap">
                            <p>+2321 256 652</p>
                        </div>
                    </li>
                    <li>
                        <i class="mail"> </i><div class="extra-wrap1">
                            <p>info@comapnay name.com</p>
                        </div>
                    </li>
                    <li>
                        <i class="earth"> </i><div class="extra-wrap1">
                            <p>info@comapnay name.com</p>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="footer-grid footer-grid3">
                <h4>Latest Tweets</h4>
                <div class="recent-tweet">
                    <div class="recent-tweet-icon">
                        <span> </span>
                    </div>
                    <div class="recent-tweet-info">
                        <p>Ds which don't look even slightly believable. If you are going to use a passage <a href="#"> 3 Hours Ago</a></p>
                    </div>
                    <div class="clear"> </div>
                </div>
                <div class="recent-tweet1">
                    <div class="recent-tweet-icon">
                        <span> </span>
                    </div>
                    <div class="recent-tweet-info">
                        <p>Ds which don't look even slightly believable. If you are going to use a passage <a href="#"> 3 Hours Ago</a></p>
                    </div>
                    <div class="clear"> </div>
                </div>
            </div>
            <div class="footer-grid footer-grid4">
                <h4>News Letter</h4>
                <p>Randomised words which don't look even slightly believable. If you are going to use a passage</p>
                <form>
                    <input type="text" value="Email Address" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email Address';}">
                    <input type="submit" value="">
                </form>
            </div>
            <div class="clear"> </div>
        </div>
    </div>
    <div class="footer-bottom">
        <div class="wrap">
            <div class="copy">
                <p>© 2014 Template by <a href="http://w3layouts.com" target="_blank"> w3layouts</a></p>
            </div>
            <div class="social">
                <ul>
                    <li class="facebook"><a href="#"><span> </span></a></li>
                    <li class="linkedin"><a href="#"><span> </span></a></li>
                    <li class="twitter"><a href="#"><span> </span></a></li>
                </ul>
            </div>
            <div class="clear"></div>
        </div>
    </div>
    @RenderSection("Scripts", required: false)
</body>

这只是它发生在一个页面上,它也发生在登录页面上。

编辑:

这是对两个页面的页面检查,认为它可能有帮助: 工作页面:

损坏的页面:

查看您的视图,您再次引用了 CSS,但是 _Layout.cshtml 是处理样式、捆绑包等的地方。

<head>
    <link href="Content/css/style.css" rel="stylesheet" type="text/css"     media="all" />
</head>

从您的屏幕截图来看,CSS 确实引起了问题,因为我认为您在 Game 下没有名为 Content 的文件夹。像从视图中删除它应该有所帮助。

我通过编辑

@Styles.Render("~/Content/css")

在 _Layout.cshtml 文件中。我将此渲染调用的目录更改为我导入的自定义 CSS 文件的地址。我不知道为什么在不更改上面的代码片段的情况下该样式在某些页面上仍然有效,但是当我将其更改为:

@Styles.Render("~/Content/css/style.css")

没有更多页面显示错误。