Search code examples
c#asp.net-mvcviewshared

Why is this page displaying the shared view corruptly?

I am creating an MVC web application. I downloaded a free template online and it seems to be working fine. The home page renders perfectly, and so does the another page I have created.

Home Page: Homepage

I have another view(and controller) created called game. When I navigate to this page it displays fine and the way I want it to display:

Game Index view:

Game view

I have two view files in the 'Game' view folder, one called index and the other named NewScore the image above is the index view in this folder, however when I navigate to the NewScore page which uses the same shared view the page displays in a corrupted way, as seen here....

corrupt

The code inside the index view and the NewScore view are definitely the EXACT same. Here's the code for both :

@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" />
}

The controller view:

 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();
    }


}

And finally, and perhaps most importantly the shared view code. e.g. _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>

This is just one page it happens on, it happens on the login page as well.

EDIT:

Here's the a page inspection of both pages, thought it might help: Working page:

enter image description here

Corrupted Page:

enter image description here

Solution

  • I fixed this by editing the of 

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

    in the _Layout.cshtml file. I changed the directory that this render was calling to the address of custom CSS file that I imported. I don't know why the style still worked on some pages without changing the code snippet above but when I changed it to:

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

    No more pages were displaying corruptly.