Views Layout and partial views

Model-View-Controller (MVC) Pattern

"Model-View-Controller" (MVC) is an architectural pattern that separates application

code into three main components: Models, Views and Controllers.
Responsibilities of Model-View-Controller

Controller
Controller invokes Business Model.
Controller creates object of View Model.
Controller invokes View.
Receives HTTP request data.
Invoke business model to execute business logic.
Creates object of ViewModel and files data into its properties.
Selects a view & invokes it & also passes the object of ViewModel to the view.

Business Model
Receives input data from the controller.
Performs business operations such as retrieving / inserting data from database.
Sends data of the database back to the controller.

View
Receives the object of ViewModel from the controller.
Accesses properties of ViewModel to render data in html code.
After the view renders, the rendered view result will be sent as response.

Benefits / Goals of MVC architectural pattern

• Clean separation of concerns

• Each component (model, view and controller) performs single responsibility.
• Identifying and fixing errors will be easy.
• Each component (model, view and controller) can be developed independently.
• Model doesn't depend on neither view nor the controller.
• This separation allows the model to be built and tested independently.
• Unit testing each individual component is easier.

Views

View is a web page (.cshtml) that is responsible for containing presentation logic that
merges data along with static design code (HTML).
• Controller creates an object of ViewModel and fills data in its properties.
• Controller selects an appropriate view and invokes the same view & supplies
object of ViewModel to the View.
• View access the ViewModel.
• View contains HTML markup with Razor markup (C# code in view to render
dynamic content).

Razor is the view engine that defines syntax to write C# code in the view.
@ is the syntax of Razor syntax.
View is NOT supposed to have lots of C# code. Any code written in the view should
relate to presenting the content (presentation logic).

Razor View Engine

Razor Code Block

@{

C# / html code here

}
Razor code block is a C# code block that contains one or more lines of C# code
that can contain any statements and local functions.

Razor Expressions
@Expression
--or--
@(Expression)
Razor expression is a C# expression (accessing a field, property or method call)
that returns a value.

Razor - If
@if (condition) {
C# / html code here
}

Razor - if…else
@if (condition) {
C# / html code here
}
else {
C# / html code here
}
Else…if and nested-if also supported.

Razor - Switch
@switch (variable) {
case value1: C# / html code here; break;
case value2: C# / html code here; break;
default: C# / html code here; break;
}

Razor - foreach
@foreach (var variable in collection ) {
C# / html code here
}

Razor - for
@for (initialization; condition; iteration) {
C# / html code here
}

Razor - Literal
<text>static text</text>

Razor - Local Functions

@{
return_type method_name(arguments) {
C# / html code here
}
}
The local functions are callable within the same view.

Razor - Members
Razor - Methods, Properties, Fields
@functions {
return_type method_name(arguments) {
C# / html code here
}

data_type field_name;

data_type property_name
{
set { … }
get { … }
}
}

The members of razor view can be accessible within the same view.

Html.Raw( )
@{
string variable = "html code";
}

@Html.Raw(variable) //prints the html markup without encoding (converting html

tags into plain text)

ViewData

ViewData is a dictionary object that is automatically created up on receiving a request

and will be automatically deleted before sending response to the client.
It is mainly used to send data from controller to view.
ViewData is a property of Microsoft.AspNetCore.Mvc.Controller class and
Microsoft.AspNetCore.Mvc.Razor.RazorPage class.

It is of Microsoft.AspNet.Mvc.ViewFeatures.ViewDataDictionary type.

namespace Microsoft.AspNetCore.Mvc
{
public abstract class Controller : ControllerBase
{
public ViewDataDictionary ViewData { get; set; }
}
}

It is derived from IDictionary<KeyValuePair<string, object>> type.

That means, it acts as a dictionary of key/value pairs.
Key is of string type.
Value is of object type.

ViewData - Properties and Methods

int Count { get; set; } //gets the number of elements.

[string Key] //Gets or sets an element.
Add(string key, object value) //Adds a new element.
ContainsKey(string key) //Determines whether the specified key exists or not.
Clear() //Clears (removes) all elements.

ViewBag

ViewBag is a property of Controller and View, that is used to access the ViewData
easily.
ViewBag is 'dynamic' type.
ViewBag is a property of Microsoft.AspNetCore.Mvc.Controller class and
Microsoft.AspNetCore.Mvc.Razor.RazorPageBase class.

namespace Microsoft.AspNetCore.Mvc
{
public abstract class Controller : ControllerBase
{
public dynamic ViewBag { get; set; }
}
}

The 'dynamic' type similar to 'var' keyword. But, it checks the data type and at run
time, rather than at compilation time.
If you try to access a non-existing property in the ViewBag, it returns null.

Benefits of 'ViewBag' over ViewData

• ViewBag's syntax is easier to access its properties than ViewData.

Eg: ViewBag.property [vs] ViewData["key"]
• You need NOT type-cast the values while reading it.
Eg: ViewBag.object_name.property
[vs]
(ViewData["key"] as ClassName).Property
 Strongly Typed Views

Strongly Typed View is a view that is bound to a specified model class.

It is mainly used to access the model object / model collection easily in the view.

Benefits of Strongly Typed Views

• You will get Intellisense while accessing model properties in strongly typed views,
since the type of model class was mentioned at @model directive.
• Property names are compile-time checked; and shown as errors in case of
misspelled / non-existing properties in strongly typed views.
• You will have only one model per one view in strongly typed views.
• Easy to identify which model is being accessed in the view.
• Helper methods in Controller to invoke a View
• return View( ); //View name is the same name as the current action method.
• return View(object Model ); //View name is the same name as the current action
method & the view can be a strongly-typed view to receive the supplied model
object.
• return View(string ViewName); //View name is explicitly specified.
• return View(string ViewName, object Model ); //View name is explicitly specified
& the view can be a strongly-typed view to receive the supplied model object.
 ViewImports.cshtml

ViewImports.cshtml is a special file in the "Views" folder or its subfolder, which

executes automatically before execution of a view.
It is mainly used to import common namespaces that are to imported in a view.
 Shared Views

Shared views are placed in "Shared" folder in "Views" folder.

They are accessible from any controller, if the view is NOT present in the
"Views\ControllerName" folder.
 Layout Views

Layout View is a web page (.cshtml) that is responsible for containing presentation
logic template (commonly the html template with header, sidebar, footer etc.)
• The @RenderBody() method presents only in layout view to represent the place
where exactly the content from the view has to be rendered.
• The "Layout" property of the view specifies path of the layout view.
• It can be dynamically set in the view.
• Both View and Layout View shares the same ViewData object.
• So it is possible to send data from view to layout, since the view executes first.
• The css files / js files imported in layout view will be applicable to view also,
because the content of view will be merged into the layout view at run time.

Order of Views Execution

 Partial Views

Partial view is a razor markup file (.cshtml) that can't be invoked individually from
the controller; but can be invoked from any view within the same web application.

Invoking Partial Views

<partial name="partial view name" />

Returns the content to the parent view.
@await Html.PartialAsync("partial view name")
Returns the content to the parent view.
@{ await Html.RenderPartialAsync("partial view name"); }
Streams the content to the browser.

Partial Views with ViewData

When partial view is invoked, it receives a copy of the parent view's ViewData
object.
So, any changes made in the ViewData in the partial view, do NOT effect the
ViewData of the parent view.
Optionally, you can supply a custom ViewData object to the partial view, if you don't
want the partial view to access the entire ViewData of the parent view.

Invoking Partial Views with View Data

@{ await Html.RenderPartialAsync("partial view name", ViewData); }

-- or --
<partial name="partial view name" view-data="ViewData" />
 Strongly Typed Partial Views

Strongly Typed Partial View is a partial view that is bound to a specified model class.
So, it gets all the benefits of a strongly typed view.

Invoking Strongly-Typed Partial View

@{ await Html.RenderPartialAsync("partial view name", Model); }

-- or --
<partial name="partial view name" model="Model" />

PartialViewResult

PartialViewResult can represent the content of a partial .

Generally useful to fetch partial view's content into the browser, by making an
asynchronous request (XMLHttpRequest / fetch request) from the browser.
return new PartialViewResult() { ViewName = "partial view name", Model =
model };
[or]
return PartialView("partial view name", model);