In this series of posts I will start detailing the components of the MVC forum and how you can modify it to suit your own site.
ASP.NET MVC does not include anything that directly corresponds to a page. In an ASP.NET MVC application, there is not a page on disk that corresponds to the path in the URL that you type into the address bar of your browser. The closest thing to a page in an ASP.NET MVC application is something called a view.
The look and feel of the forum is controlled by a set of template files which you can find in the Views folder, and css files which are located in the Content folder. If all you want to do is change colours and fonts etc, then you just need to edit the css files.
Under the Views folder you will find several subfolders, each subfolder contains template files specific to a certain area/function of the site, Home, Forum,Topic etc. You will also see a subfolder called Shared, this subfolder contains the main base layout template together with common include templates for formatting specific items on a page, I will go into this as we go along.
All public/member web pages are based on a main _Layout.cshtml template (admin pages use a different _layout.cshtml), this template can be found in the Shared folder.
The layout template contains elements common to every page (menu etc) as well as defining the basic page layout, header, footer columns etc. The file also contains placeholders where you can inject code from the other views, these are defined as sections and may or may not be required, a required section means you must define it in the view.
The code sample below shows the forums _layout page to illustrate the layout and sections, other code/css/javascript has been removed for clarity.
You will also see a few lines like @Html.Partial("_LoginPartial") in the actual _layout file, these lines are including other view templates much like the classic asp include files. In general these 'partial views' will start with an underscore and will either be in the same subfolder as the view template, or in the shared folder if included in multiple views.
ASP.NET MVC does not include anything that directly corresponds to a page. In an ASP.NET MVC application, there is not a page on disk that corresponds to the path in the URL that you type into the address bar of your browser. The closest thing to a page in an ASP.NET MVC application is something called a view.
The look and feel of the forum is controlled by a set of template files which you can find in the Views folder, and css files which are located in the Content folder. If all you want to do is change colours and fonts etc, then you just need to edit the css files.
Under the Views folder you will find several subfolders, each subfolder contains template files specific to a certain area/function of the site, Home, Forum,Topic etc. You will also see a subfolder called Shared, this subfolder contains the main base layout template together with common include templates for formatting specific items on a page, I will go into this as we go along.
All public/member web pages are based on a main _Layout.cshtml template (admin pages use a different _layout.cshtml), this template can be found in the Shared folder.
Main Layout template
The layout template contains elements common to every page (menu etc) as well as defining the basic page layout, header, footer columns etc. The file also contains placeholders where you can inject code from the other views, these are defined as sections and may or may not be required, a required section means you must define it in the view.
The code sample below shows the forums _layout page to illustrate the layout and sections, other code/css/javascript has been removed for clarity.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
@RenderSection("pageMeta", required: false) <!-- placeholder for page specific meta tags -->
<title>@ViewBag.Title</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link rel="alternate" type="application/rss+xml" title="RSS Feed for @(ClassicConfig.ForumTitle)" href="~/RssFeed/Active" />
@Styles.Render("~/Content/css")
@RenderSection("styles", required: false) <!-- placeholder for page specific css -->
<script type="text/javascript">
/* lets set some global javascript forum variables */
var SnitzVars = SnitzVars || { };
</script>
</head>
<body id="page-top">
<!-- css class sizeing for content cols -->
@{
col-resize code
}
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation" ></div>
<!-- Begin page content -->
<div class="container-fluid">
@if (IsSectionDefined("breadcrumb")) {
<div class="breadcrumb">
@RenderSection("breadcrumb", required: false) <!-- placeholder for breadcrumb -->
</div>
}
<div class="row-fluid">
<div class="@thirdcolClass" id="left-col">
<!-- Container for left-col in a three column layout. Hidden for small and phone screens
so do not include content that you wish to show on those sizes -->
@if (IsSectionDefined("thirdcol")) {
<div class="side-box-left">
@RenderSection("thirdcol", required: false) <!-- placeholder for leftcol content -->
</div>
}
</div>
<div class="@contentClass" id="main-content">
@{ <!-- placeholder for AdBanner -->
if(ClassicConfig.GetIntValue("intTopBanner")==1) {
if (IsSectionDefined("topBanner")) {
@RenderSection("topBanner", required: false)
}
} else {
if (IsSectionDefined("topBanner")) {
RenderSection("topBanner", false).WriteTo(TextWriter.Null);
}
}
}
@if (IsSectionDefined("featured")) { <!-- placeholder for page announcement -->
@RenderSection("featured", required: false)
}
@if (IsSectionDefined("topicsearchbox")) { <!-- placeholder for search box on small devices -->
<div class="side-box hidden-sm hidden-md hidden-lg">
@RenderSection("topicsearchbox", required: false)
</div>
}
@RenderBody() <!-- main content placeholder -->
</div>
<div class="@colClass" id="right-col">
@{
if (IsSectionDefined("sideBanner")) { <!-- placeholder for AdBanner -->
if (ClassicConfig.GetIntValue("intSideBanner") == 1) {
@RenderSection("sideBanner", required: false)
} else {
RenderSection("sideBanner", false).WriteTo(TextWriter.Null);
}
}
}
@if (IsSectionDefined("sidebox")) { <!-- placeholder for right col content -->
<div class="side-box-right">
@RenderSection("sidebox", required: false)
</div>
}
</div>
</div>
</div>
<!-- Begin page Footer -->
<footer class="footer">
</footer>
<!-- Begin common scripts -->
@Scripts.Render("~/bundles/Snitzscripts")
<script type="text/javascript">
<!-- common page javascript -->
</script>
@RenderSection("scripts", required: false) <!-- placeholder for page specific javascript -->
@Html.PageScripts() <!-- placeholder for partial view javascript -->
</body>
</html>
Posted
Part 2 will explain how a page gets laid out using the template
