Advance Web Application Development: Instructor: Dr. Syed Ali Raza Department of Computer Science GC University Lahore

Advance Web Application
Development
Instructor: Dr. Syed Ali Raza
Department of Computer Science
GC University Lahore
Lecture 9
Layouts
Give someone a program, you frustrate them for a day;
teach them how to program, you frustrate them for a
lifetime.
— David Leinweber
Layouts
• With Web Pages it is easy to create a web site with a consistent

layout.
• On the Internet you will discover many web sites with a consistent
look and feel:
• Every page have the same header
• Every page have the same footer
• Every page have the same style and layout
Using Layout Page
• Another approach to creating a consistent look is to use a layout page.

• A layout page contains the structure, but not the content, of a web page.
• When a web page (content page) is linked to a layout page, it will be displayed
according to the layout page (template).
• The layout page is just like a normal web page, except from a call to the
@RenderBody() method where the content page will be included.
• Each content page must start with a Layout directive.
<html>
<body>
<p>This is header text</p>
@RenderBody()
<p>Any content here…</p>
</body>
</html>
• Add following in view pages
@{Layout="Layout.cshtml";}
RenderBody
• RenderBody acts like a placeholder for other views.

• For example, Index.cshtml in the home folder will be injected and
rendered in the layout view, where the RenderBody() method is
being called.
• Layout view uses two rendering methods: RenderBody() and
RenderSection().
• RenderBody can be used only once in the layout view,
• RenderSection method can be called multiple time with different name.
Creating Layout View
• To create a new layout

view in Visual Studio,
right click on shared
folder -> select Add ->
click on New Item..
• In the Add New Item
dialogue box, select
MVC 5 Layout Page
(Razor) and give the
layout page name as
"_Layout.cshtml" and
click Add.
Preventing Files from Being Browsed
• With ASP.NET, files with a name that starts with an underscore

cannot be browsed from the web.
• If you want to prevent layout files from being viewed by your users,
rename the files to _Layout.cshtml
Sample Layout
<html>
<head>
<title> @ViewBag.Title</title>
</head>
<body>
<table border =1 style=”width800px; font-family:arial”>
<tr> <td colspan=”2” style=”text-align:center”><h3>website header</h3></td> </tr>
<tr> <td style=”width:200px”><h3>Menu</h3></td>
<td style=”width:600px”> @RenderBody()</td> </tr>
<tr>
<td colspan=”2” style=”text-align:center; font-size:x-small”><h3>website
Footer</h3></td>
</tr>
</table>
</body>
</html>
Updated Layout with Style Sheets and HTML
Helpers
<!DOCTYPE html>
<html>
<head> <title> @ViewBag.Title - in ASP.Net MVC</title> <link href="@Url.Content("~/Content/MyCSS.css")" rel="stylesheet"
type="text/css" /> </head>
<body> <table border=1 style="width:800px;" align="center">
<tr> <td colspan="2" style="text-align:center"> <img src="@Url.Content("~/images/header.jpg")" height="90" width="750" />
</td> </tr>
<tr>
<td style="width:200px">
<ul id="menu">
<li>
@Html.ActionLink("Home", "Index") </li>
<li>
@Html.ActionLink("About", "About")</li>
</ul>
</td>
<td style="width:600px"> @RenderBody()</td>
</tr>
<tr> <td colspan="2" style="text-align:center; font-size:x-small"> <div><h3>Copyrights © 2019. All rights reserved for University of
Education </h3></div>
</td>
</tr>
</table>
</body>
</html>
Url.Content()
• This function allows to easily convert a virtual-root relative path (you

know, the one that begins with a tilde (~) character) to an application
absolute path.
• This works great in MVC Razor projects and the Razor view engine
makes it a snap to pop the method into an href for an anchor
element.
Inserting Folder
Inserting Stylesheet
Basic Style Sheet
body { font: "Trebuchet MS", Verdana, sans-serif; }
ul#menu {
position:relative;
margin: 0; }
ul#menu li {
display: block;
align-items:center; }
ul#menu li a {
background-color: #e8eef4;
padding: 10px 20px;
line-height: 2.8em;
border-radius: 4px 4px 0 0; }
ul#menu li a:hover {
background-color: #b200ff; }
Helpers
<!DOCTYPE html>
<html>
<head> <title> @ViewBag.Title - in ASP.Net MVC</title> <link href="@Url.Content("~/Content/MyCSS.css")" rel="stylesheet" type="text/css" />
</head>
<tr> <td colspan="2" style="text-align:center"> <img src="@Url.Content("~/images/header.jpg")" height="90"
width="750" /> </td> </tr>
<tr>
<ul id="menu">
<li>
<li>
</ul>
</td>
</tr>
</td>
</tr>
</table>
</body>
</html>
Inserting Images
Helpers
<!DOCTYPE html>
<html>
<head> <title> @ViewBag.Title - in ASP.Net MVC</title> <link href="@Url.Content("~/Content/MyCSS.css")" rel="stylesheet" type="text/css" />
</head>
<tr> <td colspan="2" style="text-align:center"> <img src="@Url.Content("~/images/header.jpg")" height="90" width="750" />
</td> </tr>
<tr>
<ul id="menu">
<li>
<li>
</ul>
</td>
</tr>
</td>
</tr>
</table>
</body>
</html>
HTML.Action Link
• Html.ActionLink creates a hyperlink on a view page and the user

clicks it to navigate to a new URL.
• It does not link to a view directly, rather it links to a controller's
action.
• If you want to navigate to the same controller's action method, use
the one given below.
• Razor is smart enough to assume the first param is link text and the second
param is the action method name, if it finds only two parameters.
@Html.ActionLink("Click here", // <-- Link text

"Index" // <-- Action Method Name)
• It will be rendered in HTML as: <a href="/">Click here</a>

HTML.Action Link
• To navigate to a different controller's action method, use the one given

below.
• You can even avoid typing "null" for the route value and htmlArguments.
• Here also, razor will assume the first param as link text, the second param
as the action method name and the third param as the controller name, if
it finds three parameters.
@Html.ActionLink("Click here", // <-- Link text
"About", // <-- Action Method Name
"Home", // <-- Controller Name
null, // <-- Route value
null // <-- htmlArguments
)
• It will be rendered in HTML as: <a href="/Home/About">Click here</a>

Advance Web Application Development: Instructor: Dr. Syed Ali Raza Department of Computer Science GC University Lahore

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Advance Web Application Development: Instructor: Dr. Syed Ali Raza Department of Computer Science GC University Lahore

Uploaded by

Copyright:

Available Formats

Advance Web Application

• With Web Pages it is easy to create a web site with a consistent

• Another approach to creating a consistent look is to use a layout page.

• RenderBody acts like a placeholder for other views.

• To create a new layout

• With ASP.NET, files with a name that starts with an underscore

• This function allows to easily convert a virtual-root relative path (you

• Html.ActionLink creates a hyperlink on a view page and the user

@Html.ActionLink("Click here", // <-- Link text

• It will be rendered in HTML as: <a href="/">Click here</a>

• To navigate to a different controller's action method, use the one given

• It will be rendered in HTML as: <a href="/Home/About">Click here</a>

You might also like