BMIT2023 Web and Mobile Systems Slide 1

BMIT2023 Web and

Mobile Systems
Chapter 2:
Reusable Layout

202409
 BMIT2023 Web and Mobile Systems Slide 2

Part 1:
Reusable Layout

202409
 BMIT2023 Web and Mobile Systems Slide 3

Reusable Layout
Most web apps have a common layout.
Provide users with consistent experience as they
navigate from page to page.
Layout typically includes common UI elements.
For example: Header
Header Navigation Menu
Navigation Menu Page Content
Footer

Footer

202409
 BMIT2023 Web and Mobile Systems Slide 4

Reusable Layout …
Common HTML structures such as shared JS and CSS
imports are also included in layout.
Layout reduces duplicate code in views.

NOTE:
Layout is optional.
Apps can define more than one layout.
Different views may use different layouts.
By convention, the default layout for ASP.NET is named
_Layout.cshtml and stored in the Views/Shared folder.

202409
 BMIT2023 Web and Mobile Systems Slide 5

Demo: Common Image, CSS and JS Files

Right-click wwwroot folder. Select Add > New Folder.
Add the following 3 folders:

202409
 BMIT2023 Web and Mobile Systems Slide 6

…
Drag-and-drop or copy-and-paste an PNG app icon to the images folder.
Rename it to favicon.png if necessary.

202409
 BMIT2023 Web and Mobile Systems Slide 7

…
Right-click css folder. Enter app.css.

Write common
CSS code here

NOTE: If you see a large dialog window,

click the Show Compact View button at
the bottom-left corner to swap to
compact view

202409
 BMIT2023 Web and Mobile Systems Slide 8

…
Right-click js folder. Enter app.js.

Write common
JS code here

202409
 BMIT2023 Web and Mobile Systems Slide 9

JS Libraries for ASP.NET MVC

There are 4 JS libraries required by ASP.NET MVC to
support some of its basic features:

jQuery Base library

jQuery AJAX Unobtrusive Support AJAX

jQuery Validate Support client-side
jQuery Validation Unobtrusive input validations

We will install them by using LibMan (library manager).

https://learn.microsoft.com/aspnet/core/client-side/libman/libman-vs

NOTE: LibMan is optional. You can also download JS libraries manually

202409
 BMIT2023 Web and Mobile Systems Slide 10

Demo: Add JS Libraries

Right-click js folder. Select Add > Client-Side Library.
Enter or select the following. Click Install.

202409
 BMIT2023 Web and Mobile Systems Slide 11

…
The JS library is downloaded from CDNJS.
The libman.json file is also created.

NOTE:
We can continue to add JS libraries using the UI.
Or by modifying the libman.json file.

202409
 BMIT2023 Web and Mobile Systems Slide 12

…
Open libman.json file. Modify:

This make all libraries saved to wwwroot/js/ folder by default.

NOTE: The libman.json supports auto code completion.

202409
 BMIT2023 Web and Mobile Systems Slide 13

…
Add the other libraries.
Save the file.
The libraries will be added.

NOTE: You can add libraries

using UI (if you prefer that way)

202409
 BMIT2023 Web and Mobile Systems Slide 14

…
NOTE: We can click the light bulb icon to uninstall or check for updates.

202409
 BMIT2023 Web and Mobile Systems Slide 15

Demo: Create a Layout File

Right-click Views folder. Select Add > New Folder.
Name the folder Shared  must follow this name.

202409
 BMIT2023 Web and Mobile Systems Slide 16

…
Right-click Shared folder. Select Add > View.
Select Razor View – Empty.

202409
 BMIT2023 Web and Mobile Systems Slide 17

…
Enter the name _Layout.cshtml  can ignore the file extension.

202409
 BMIT2023 Web and Mobile Systems Slide 18

…
We can then write the code for layout here.

202409
 BMIT2023 Web and Mobile Systems Slide 19

…
Code for layout:

202409
 BMIT2023 Web and Mobile Systems Slide 20

…
Continue:

202409
 BMIT2023 Web and Mobile Systems Slide 21

…
NOTE: The JS files must be imported in the following sequence:

Our own JS file

Due to dependency… jQuery

Depends on…
jQuery AJAX jQuery Validate
Unobtrusive
Depends on…
jQuery Validation
Unobtrusive
202409
 BMIT2023 Web and Mobile Systems Slide 22

RenderBody and RenderSection

Render the main content from view.

Name Required

Define a named section in the layout. Can be any name.

false = means the section is not required.
Render the section content from view.

202409
 BMIT2023 Web and Mobile Systems Slide 23

RenderBody and RenderSection …

Example: Use the layout file
named _Layout
_Layout.cshtml

202409
 BMIT2023 Web and Mobile Systems Slide 24

Demo: Using Layout

We can specify which layout to use in individual views.
For example:

We can also specify the default layout to be used by all views.

Making use of a special file named _ViewStart.cshtml.

202409
 BMIT2023 Web and Mobile Systems Slide 25

…
Right-click Views folder. Select Add > View.
Select Razor View – Empty.
Enter file name _ViewStart.cs.
Modify the code:

NOTE: Codes in _ViewStart.cs run before each view.

We can load default layout, provide default value to
variables, or execute common view startup logic here

202409
 BMIT2023 Web and Mobile Systems Slide 26

…
For individual views:

202409
 BMIT2023 Web and Mobile Systems Slide 27

…
Run the project. Result:

202409
 BMIT2023 Web and Mobile Systems Slide 28

Override Common Layout

If a common layout has been set in _ViewStart.cshtml…

Individual views can override it…

Do not use any layout Use a different layout

202409
 BMIT2023 Web and Mobile Systems Slide 29

Override Common Layout …

We can also provide specific layout for specific folder…

Views in Admin
folder use this layout

Default layout used

by all views

202409
 BMIT2023 Web and Mobile Systems Slide 30

_ViewStart.cshtml is Hierarchical
Recall that _ViewStart.cshtml file can be used to:
Load default layout
Provide default values to variables  ViewBag
Execute common view startup logic
And _ViewStart.cshtml is hierarchical.
We can also add separated _ViewStart.cshtml file for
each individual view folder.
The outer one will run first. The inner one will run next
and override any duplicated settings.
Finally, the individual view is executed.

202409
 BMIT2023 Web and Mobile Systems Slide 31

_ViewStart.cshtml is Hierarchical …
Example: Assume that we visit /Home/Index…

Put common settings for

(2) Run next… all views in this folder
(3) Run last…

(1) Run first… Put common settings

for all views

202409
 BMIT2023 Web and Mobile Systems Slide 32

Tag Helpers
Tag helpers extend the functionality of HTML elements
by supporting non-standard custom HTML attributes.
Enable server-side code to participate in creating and
rendering HTML elements in views.
Tag helpers are processed at server-side and rendered
into standard HTML elements and attributes which
browsers can understand.

ASP.NET provides a set of built-in tag helpers. Additional

tag helpers can also be installed via NuGet packages.
https://learn.microsoft.com/aspnet/core/mvc/views/tag-helpers/built-in

202409
 BMIT2023 Web and Mobile Systems Slide 33

Tag Helpers …
Example:
Import built-in tag helpers to a view:

Standard HTML anchor: No tag helper

involves in this case

Anchor tag helper:

Note that the element is

Render to standard HTML anchor bolded and colored

202409
 BMIT2023 Web and Mobile Systems Slide 34

Tag Helpers …
NOTE:
Not all HTML elements are supported by tag helpers.
Built-in tag helper attributes always start with "asp".
VS2022 auto code completion will suggest the supported tag
helper attributes if you start an attribute with "asp".

202409
 BMIT2023 Web and Mobile Systems Slide 35

Demo: Import and Using Tag Helpers

Right-click Views folder. Select Add > View.
Select Razor View – Empty.
Enter file name _ViewImports.cshtml.
Modify the code:

NOTE: Instead of importing built-in tag helpers in individual

views, we globally import it in the _ViewImport.cshtml file
 this affects all views directly

202409
 BMIT2023 Web and Mobile Systems Slide 36

…
Open _Layout.cshtml.
Modify the <link> element that imports app.css:

Modify the <script> element that imports app.js:

NOTE:
This tag helper attribute append a version string (hash) to the end of the URL.
If the file content changes, the version string changes.
This prevent browsers from loading outdated file from cache.
This tag helper attribute also works on <img> element.

202409
 BMIT2023 Web and Mobile Systems Slide 37

…
Run the project.
On browser, right-click and select View Page Source.

Examine the <link> element  version string added.

Examine the <script> element  version string added.

202409
 BMIT2023 Web and Mobile Systems Slide 38

Tag Helpers vs. HTML Helpers

The following codes generate the same hyperlink using
different approaches:

Standard HTML

Tag Helper

HTML Helper

Link Text Action Controller

202409
 BMIT2023 Web and Mobile Systems Slide 39

Tag Helpers vs. HTML Helpers …

Tag Helpers HTML Helper
Written as HTML elements with Written as C# methods. Work like
custom non-standard attributes function calls with parameters
Codes are more readable as they Codes are less readable as HTML
resemble typical HTML syntax and C# codes are mixed together
Codes are clean, concise and Codes are usually more verbose
easier to understand and slightly complicated
Friendly to web designers who Natural to web developers who
know little about programming familiar with programming syntax
Efficient in performance as they Introduce minor overhead as they
are compiled as part of the view are executed as C# codes

** HTML helpers are still used for scenarios that cannot be handled by tag helpers
202409
 BMIT2023 Web and Mobile Systems Slide 40

Part 2:
Partial View

202409
 BMIT2023 Web and Mobile Systems Slide 41

Partial View
Partial view is a reusable UI component used to render a
portion of a web page.
Commonly used to break down large views in smaller,
manageable and reusable parts.
Helps to avoid redundant codes by rendering shared
content in multiple places across an application.
Partial view is usually used together with AJAX
programming to support partial page reload.
NOTE: We will cover AJAX
programming in future
NOTE: A partial view
works like PHP include

202409
 BMIT2023 Web and Mobile Systems Slide 42

Partial View …
NOTE:
File name of partial view begins with an underscore (_) by
convention. For example: _Hello.cshtml.
Can be saved in the Shared folder (globally accessible) or the
specific controller view folder (accessible within the folder).

Partial view _B.cshtml

is accessible within the
Home folder

Partial view _A.cshtml

is globally accessible

202409
 BMIT2023 Web and Mobile Systems Slide 43

Demo: Creating a Simple Partial View

Right-click Views/Shared folder. Select Add > View.
Select Razor View – Empty.
Enter file name _Photo.cshtml.

202409
 BMIT2023 Web and Mobile Systems Slide 44

…
Modify the code of _Photo.cshtml:
CSS to style the elements.
Will be rendered together

NOTE: Partial view does

not has a layout. Hence
unable to inject codes
into layout sections

202409
 BMIT2023 Web and Mobile Systems Slide 45

…
Modify the code of Home/Page1.cshtml:

Use the <partial> tag helper to render a partial view.

No need provide file extension .cshtml for name

Render or import the

partial view here
Modify the code of Home/Page2.cshtml:

Reuse the same

partial view

202409
 BMIT2023 Web and Mobile Systems Slide 46

…
Result:

From partial view From partial view

202409
 BMIT2023 Web and Mobile Systems Slide 47

Partial View with Parameters

We can pass parameters to partial view (as model data).
We can also include simple UI rendering logic.

NOTE:
Partial view is a fast and easy approach to create reusable UI
component. However, it is not backed by a C# class, hence
unable support complex backend logic.
View Component is a more powerful way to create reusable UI
component with complex backend logic. We do not cover View
Component. Find out more from the following reference:
https://learn.microsoft.com/aspnet/core/mvc/views/view-components

202409
 BMIT2023 Web and Mobile Systems Slide 48

Demo: Create a Partial View with Parameters

Right-click Views/Shared folder. Select Add > View.
Select Razor View – Empty.
Enter file name _RepeatText.cshtml.

202409
 BMIT2023 Web and Mobile Systems Slide 49

…
Modify the code of _RepeatText.cshtml:

Use @model directive to define The model data is a tuple contains 2

the data type of the model data fields: Text (string) and Count (int)

Access to Count

Access to Text

202409
 BMIT2023 Web and Mobile Systems Slide 50

…
Modify the code of Home/Index.cshtml:

NOTE: Single quote is used here Value for Text Value for Count
so that it does not conflict with
the double quote for string
202409
 BMIT2023 Web and Mobile Systems Slide 51

…
Result:

From partial view

202409
 BMIT2023 Web and Mobile Systems Slide 52

Self-Check Questions
1. What are the advantages of using reusable layout in ASP.NET
MVC web applications?

2. What are tag helpers?

3. Differentiate between tag helpers and HTML helpers.

4. What are partial views?

202409
 BMIT2023 Web and Mobile Systems Slide 53

THE END!!!

202409