CODEWITHSUNDEEP
asp.netrazormodel-view-controllerview
user788454
user788454

Reputation:

Two identical razor views behave totally differently

I have an ASP.NET MVC project. There is a home page, and an About Us page. To find out what went wrong, I copied everything in the home page into the About Us page. Now the two cshtml views have absolutely identical source code. One in the ~/Views/AboutUs folder, one in the ~/Views/Home folder.

But when I press F5 to run, the home page is properly rendered, while the AboutUs page is totally plain text - no styles no images.

What may be the problem? I have never run into such mysterious problem and I am totally puzzled. Please help!

The action methods:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View("Home");
    }
}

public class AboutUsController : Controller
{
    // GET: AboutUs
    public ActionResult Index()
    {
        return View();
    }
}

The two razor views, which are identical, looks like this:

@{
    ViewBag.Title = "Teacher's Pet";
    Layout = "~/Views/_MainLayoutNew.cshtml";
}


<section class="bg-primary">
    <div class="container">
        <div class="row">
......

The layout view:

@using TeachersPet.BusinessLogic

@{
    UserCookie userCookie = UserCookie.GetUserCookie(Context);
}


<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Teachers Pet- Keeping Friends Togather</title>

    <!-- Bootstrap Core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">



    <!-- Plugin CSS -->
    <link href="vendor/magnific-popup/magnific-popup.css" rel="stylesheet">


    <!-- Theme CSS -->
    <link href="css/style.css" rel="stylesheet">
    <link href="css/testimonials.css" rel="stylesheet">

    <script src='https://www.google.com/recaptcha/api.js'></script>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->


    <title>@ViewBag.Title</title>

    <script type="text/javascript">
        function showMultipleChoiceDialog(data) {
            $('#SearchResultModalBody').empty();
            var radios = '';

            for (var i = 0; i < data.length; i++) {
                radios += '<input type="radio" value="' + data[i].Id + '"/> ' + data[i].Display + '<br/>';
            }

            $('#SearchResultModalBody').append(radios);
            $('#MultipleChoiceDialog').modal();
        }

        function confirmAction(message) {
            $('#ConfirmMessage').text(message);
            $('#ConfirmModal').modal();
        }

    </script>

</head>

<body id="page-top">
        <nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
                    </button>
                <a class="navbar-brand page-scroll" href="#page-top"><img src="img/logo.svg" class="img-responsive logo_svg"></a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-right">

                        <li class="active">
                            <a class="page-scroll active" href="@Url.Action("Index", "Home")">Home</a>
                        </li>

                        @if (userCookie == null)
                        {
                            <li>
                                <a class="page-scroll" href="@Url.Action("RegisterSchool", "SchoolAdmin")">Register School</a>
                            </li>
                        }

                        @if (userCookie == null || userCookie.HasRole('T') || userCookie.HasRole('M'))
                        {
                            <li>
                                <a class="page-scroll" href="@Url.Action("ContactUs", "correspondence")">Contact Us</a>
                            </li>
                        }

                        @if (userCookie == null || userCookie.HasRole('T') || userCookie.HasRole('M'))
                        {
                            <li>
                                <a class="page-scroll" href="@Url.Action("Index", "AboutUs")">About Us</a>
                            </li>
                        }

                        <li>
                            <a class="page-scroll" href="@Url.Action("Index", "Help")">Help</a>
                        </li>


                        @if (userCookie == null)
                        {
                            <li>
                                <a class="page-scroll login" href="@Url.Action("Login", "Login")">Login</a>
                            </li>
                        }
                        else
                        {
                            if (userCookie.HasRole('A') && (userCookie.CurrentRole == 'M' || userCookie.CurrentRole == 'T')) // If it is portal admin logging in as school
                            {
                                <li>
                                    <a class="page-scroll login" href="@Url.Action("LoginOutOfSchool", "PortalAdmin")">Logout School</a>
                                </li>
                            }
                            else
                            {
                                <li>
                                    <a class="page-scroll login" href="@Url.Action("LogOff", "Login")">Logout</a>
                                </li>
                            }
                        }
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>













    @RenderBody()









    <aside class="bg-dark">
        <div class="container">
            <div class="col-md-4 col-xs-4">

                <h4><strong>MENU</strong></h4><br>
                <ul>
                    <li>
                        <a class="footer_link" href="@Url.Action("Index", "Home")">Home</a>
                    </li>

                    @if (userCookie == null)
                    {
                        <li>
                            <a class="footer_link" href="@Url.Action("RegisterSchool", "SchoolAdmin")">Register School</a>
                        </li>
                    }

                    @if (userCookie == null || userCookie.HasRole('T') || userCookie.HasRole('M'))
                    {
                        <li>
                            <a class="footer_link" href="@Url.Action("ContactUs", "correspondence")">Contact Us</a>
                        </li>
                    }

                    @if (userCookie == null || userCookie.HasRole('T') || userCookie.HasRole('M'))
                    {
                        <li>
                            <a class="footer_link" href="@Url.Action("Index", "AboutUs")">About Us</a>
                        </li>
                    }

                    <li>
                        <a class="footer_link" href="@Url.Action("Index", "Help")">Help</a>
                    </li>
                </ul>



            </div>
            <div class="col-md-4 col-xs-4">

                <h4><strong>CONTACT</strong></h4><br>
                [email protected]


            </div>
            <div class="col-md-4 col-xs-4">

                <h4><strong>OUR BUSINESS</strong></h4><br>
                Front Edge Software Pty Ltd<BR>
                ACN 166 360 809




            </div>

        </div>
    </aside>

    <div class="bg-dark1">
        <div class="container">
            <div class="col-md-4 col-xs-4 space">

                Terms of Use | Privacy



            </div>
            <div class="col-md-4 col-xs-4">

                <center><img src="img/fab.png" class="img-responsive"> </center>
            </div>
            <div class="col-md-4 space col-xs-4">

                <div align="right">© 2017 - Teacher's Pet</div>




            </div>

        </div>
    </div>






    <!-- jQuery -->
    <script src="vendor/jquery/jquery.min.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="vendor/bootstrap/js/bootstrap.min.js"></script>

    <!-- Plugin JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
    <script src="vendor/scrollreveal/scrollreveal.min.js"></script>
    <script src="vendor/magnific-popup/jquery.magnific-popup.min.js"></script>

    <!-- Theme JavaScript -->
    <script src="js/creative.min.js"></script>

</body>

</html>

Upvotes: 0

Views: 50

Answers (1)

DavidG
DavidG

Reputation: 119017

The problem is that your CSS files are specified with a relative path so they are trying to load from an incorrect location.

For example, if your URL is http://your-site.com/somepage then the css will try to be loaded as http://your-site.com/somepage/css/style.css which doesn't exist. Instead you should give your CSS an absolute path, the easiest way is to just prefix it with a forward slash which will force the CSS to be loaded from the root. For example:

<link href="/css/style.css" rel="stylesheet">

Upvotes: 0

Related Questions