Dealing with Views in ASP.

NET Core

Assistant Lecturer

Harith Abbas Kadhim

harith.abbas@itnet.uobabylon.edu.iq
 Views in ASP.NET Core
❖ All views are stored in the Views folder in the
root of the application.

❖ Each action methods in the HomeController gets

their own view file about.cshtml & index.cshtml
and stored in the Views/Home Folder. Similarly,
the action methods of CustomerController goes
to the Views/Customer folder.

❖ The View is responsible for rendering the model

or data to the Users.
 Layout View

❖ The layouts page in ASP.NET Core helps us to define the common user
interface elements like header, footer & navigation menu etc on the page
at one place and use it everywhere else.

@RenderBody()
 Create a New Layout
❖ Right Click on the Shared folder and ❖ This is simple HTML markup, with three
click on Add View. sections Header, Content, and Footer.

❖ This will create the _Layout.cshtml The Content is a place where we want

under the Views/Shared the views to be inserted.

 Create a New Layout

❖ The RenderBody is a special method that marks the location where

views using this layout will have their content rendered. This
basically acts as a placeholder for the Views.

❖ By default, every layout must call RenderBody. Wherever the call to

RenderBody is placed, the contents of the view will be rendered.

❖ The only one RenderBody method can exist in a Layout page.

 Specifying _Layout to Use in the View

❖ Index.cshtml ❖ HomeController.cs
 Specifying _Layout to Use in the View

❖ AboutUs.cshtml ❖ HomeController.cs
 Partial View
❖ Partial view is a reusable view, which can be used as a child view in
multiple other views. It eliminates duplicate coding by reusing same partial
view in multiple places. You can use the partial view in the layout view, as
well as other content views.

Politic
@Html.Partial()
Sport
@Html.Partial()
News News

Technology Weather
@Html.Partial()
News
@Html.Partial() News
 Create a New Partial View
❖ @Html.Partial() helper method renders
the specified partial view. It accept
partial view name as a string parameter

1 and returns MvcHtmlString.

_SportPartial.cshtml _PoliticPartial.cshtml

❖ Index.cshtml
2
_TechnologyPartial.cshtml _WeatherPartial.cshtml

3
 _ViewStart
❖ Defining the layout in every view is harder to maintain. The simpler way
is to define the layout in the _ViewStart.html file.

❖ The purpose of the _ViewStart.cshtml is to set up default values to the

other Views in the folder and its subfolders.

❖ There are circumstances where you may not want to use a layout or
may want to use another layout for a specific page. In such cases just
add the Layout back and set it to Null Or set it to Some other Layout.
 ViewData and ViewBag in ASP.NET Core

❖ The Views needs to get the data from the controller. One of the ways
in which to pass the data to the view is using the ViewData or
ViewBag object.

ViewData
Controller View
ViewBag
 What is ViewData?
❖ The ViewData is a property of the Controller Base class, which returns a
ViewDataDictionary object.

❖ The ViewDataDictionary as the name suggests is a dictionary object which

allows us to store key-value pairs.

❖ When you invoke the View method in the Controller Action method, the
ViewData is automatically passed to the View.

❖ In the View, you can access the value stored in the Viewdata using the key.

❖ The data stored in the ViewData object exists only during the current
request. As soon as the view is generated and sent to the client, the
Viewdata object is cleared.
How to Use ViewData?

❖ HomeController.cs

❖ Index.cshtml

Output = Hey!
 Passing the Object using ViewData

❖ HomeController.cs ❖ Index.cshtml
 What is ViewBag?
❖ ViewBag is lightweight method of transferring values to Views from
Controllers.

❖ The ViewBag uses the dynamic feature that was added in C# 4.0. It is
a wrapper around the ViewData and provides the dynamic properties
for the underlying ViewData collection.

❖ HomeController.cs ❖ Index.cshtml

Output = Hello World

 Passing the Object using ViewBag

❖ HomeController.cs ❖ Index.cshtml
 The difference between ViewData and ViewBag
❖ The ViewData uses the dictionary syntax to access the values, while ViewBag uses the
property syntax.

❖ ViewData derives from ViewDataDictionary, so it has dictionary properties that can be

useful, such as ContainsKey, Add, Remove, and Clear.

❖ ViewBag derives from DynamicViewData, so it allows the creation of dynamic

properties using dot notation (@ViewBag.SomeKey = <value or object>).

❖ ViewData requires typecasting for data type other than string, while ViewBag doesn’t
require casting.

Important: The Drawback of ViewData/ViewBag is that they are resolved dynamically at the
runtime. They do not offer any compile-time type checking, Hence more error prone.
Thank You