CODEWITHSUNDEEP
htmlasp.netasp.net-mvcasp.net-mvc-5
Roy Kooiman
Roy Kooiman

Reputation: 69

Layout page and views conflict MVC5

So I've just published a website for the first time and I've come up with a problem. It looks like that the _Layout.cshtml page and the views conflicts with each other, because it doesn't load all of the CSS and JS. I get a few errors in the console tab which says:

" HTML1503: Unexpected start tag, HTML1512: Unmatched end tag, HTML1506: Unexpected token. "

When I go to the source of the page where the error occurs, the layout and the view page are combined together, it gives the error at the seconds head tags. The first first head tag is the one from the Layout page and the second head tags is from the view page. Thus having 2 head tags in 1 page and it conflicts.

Is there something I missed before publishing? Because on localhost it runs fine without these conflicts.

Hope someone can help me, thanks in advance! :)

Upvotes: 0

Views: 562

Answers (1)

Jack
Jack

Reputation: 1493

I recommend you read through this MSDN article on Layout pages using Razor.

It sounds like you're repeating your header information.

From the article,

Many websites have content that's displayed on every page, like a header and footer, or a box that tells users that they're logged in. ASP.NET lets you create a separate file with a content block that can contain text, markup, and code, just like a regular web page. You can then insert the content block in other pages on the site where you want the information to appear. That way you don't have to copy and paste the same content into every page.

In other words, the layout page has all of the markup that you want repeated on every page. This way, you don't have to repeat it manually.

A content page can have multiple sections, which is useful if you want to use layouts that have multiple areas with replaceable content. In the content page, you give each section a unique name. (The default section is left unnamed.) In the layout page, you add a RenderBody method to specify where the unnamed (default) section should appear. You then add separate RenderSection methods in order to render named sections individually.

Since each page is likely to have multiple sections, you can use the RenderSection method to differentiate them in your layout.

Here's an example from the article:

<!DOCTYPE html>
<html>
  <head>
    <title>Multisection Content</title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="header">
      <div>This content will repeat on every view that uses this layout.</div>
      @RenderSection("header", required: false)
    </div>
    <div id="main">
      @RenderBody()
    </div>
  </body>
</html>

As you can see, any header information will be loaded using the RenderSection method. On your view, you would define that section using code similar to this:

@section header {
  <div>
    This content will only repeat on the page that it is declared in.
  </div>
}

So, when you run it, you'll get:

<!DOCTYPE html>
<html>
  <head>
    <title>Multisection Content</title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="header">
      <div>This content will repeat on every view that uses this layout.</div>
      <div>
         This content will only repeat on the page that it is declared in.
      </div>
    </div>
    <div id="main">
      ...
    </div>
  </body>
</html>

The required:false part of @RenderSection("header", required: false) means that you do not have to include the Section "header" in every view that uses the layout. It is optional. If you do not have required set to false, it will be required that you declare it on every page that uses the layout.

On a side note, make sure you only declare your css and javascript that in only one of these locations, preferably the layout page if it is going to be repeated. This does not mean, however, that you cannot have css and javascript in both. For example, if you are using bootstrap in your project, you would include that in your layout page so that you do not repeat the inclusion throughout your views. But, you may, for example, include a view specific javascript file in only your view and not the layout.

Upvotes: 1

Related Questions