ASP.

NET CORE

Let’s learn about ASP.NET CORE MVC

.NET Framework Architecture Diagram
• It will help to understand the relationship of ASP.NET with
.NET framework.
Diagrammatic difference between
.NET and .NET Core
 What is ASP.NET Core?
• ASP.NET Core is a cross-platform, high-performance,
open-source framework for building modern, cloud-
based, Internet-connected applications.
• With ASP.NET Core, you can:

• Build web apps and services, IoT apps, and mobile

backends.
• Use your favorite development tools on Windows,
macOS, and Linux.
• Deploy to the cloud or on-premises.
• Run on .NET Core or .NET Framework.
Why should one use ASP.NET Core?
• Millions of developers have used (and continue to use) ASP.NET 4.x to create web
apps. ASP.NET Core is a redesign of ASP.NET 4.x, with architectural changes that
result in a leaner, more modular framework.

• ASP.NET Core provides the following benefits:

• A unified story for building web UI and web APIs.

• Integration of modern, client-side frameworks and development workflows.
• A cloud-ready, environment-based configuration system.
• Built-in dependency injection.
• A lightweight, high-performance, and modular HTTP request pipeline.
• Ability to host on IIS, Nginx, Apache, Docker, or self-host in your own process.
• Side-by-side app versioning when targeting .NET Core.
• Tooling that simplifies modern web development.
• Ability to build and run on Windows, macOS, and Linux.
• Open-source and community-focused.
• This was all about the theoretical intro
regarding why and whats of ASP.NET CORE.
• Let’s dive into the main stuff: ASP.NET CORE
MVC.
• Roadmap of .NET CORE:
• https://github.com/dotnet/core/blob/master/
roadmap.md
 Build web APIs and web UI using
ASP.NET Core MVC
• ASP.NET Core MVC provides features to build web APIs and web apps:

• The Model-View-Controller (MVC) pattern helps make your web APIs and
web apps testable.
• Razor markup provides a productive syntax for Razor Pages and MVC
views.
• Tag Helpers enable server-side code to participate in creating and
rendering HTML elements in Razor files.
• Built-in support for multiple data formats and content negotiation lets
your web APIs reach a broad range of clients, including browsers and
mobile devices.
• Model binding automatically maps data from HTTP requests to action
method parameters.
• Model validation automatically performs client- and server-side validation.
 Client-side development

• ASP.NET Core integrates seamlessly with

popular client-side frameworks and libraries,
including Angular, React, and Bootstrap
 MVC
• The Model-View-Controller (MVC) architectural pattern separates an app into three main
components: Model, View, and Controller. The MVC pattern helps you create apps that are more
testable and easier to update than traditional monolithic apps. MVC-based apps contain:

• Models: Classes that represent the data of the app. The model classes use validation logic to
enforce business rules for that data. Typically, model objects retrieve and store model state in a
database. In this tutorial, a Movie model retrieves movie data from a database, provides it to the
view or updates it. Updated data is written to a database.

• Views: Views are the components that display the app's user interface (UI). Generally, this UI
displays the model data.

• Controllers: Classes that handle browser requests. They retrieve model data and call view templates
that return a response. In an MVC app, the view only displays information; the controller handles
and responds to user input and interaction. For example, the controller handles route data and
query-string values, and passes these values to the model. The model might use these values to
query the database. For example, http://localhost:1234/Home/Abouthas route data of Home (the
controller) and About (the action method to call on the home
controller). http://localhost:1234/Movies/Edit/5 is a request to edit the movie with ID=5 using the
movie controller. We'll talk about route data later in the tutorial.
• The MVC pattern helps you create apps that
separate the different aspects of the app (input
logic, business logic, and UI logic), while providing
a loose coupling between these elements. The
pattern specifies where each kind of logic should
be located in the app. The UI logic belongs in the
view. Input logic belongs in the controller.
Business logic belongs in the model. This
separation helps you manage complexity when
you build an app, because it enables you to work
on one aspect of the implementation at a time
without impacting the code of another.
 Lets create a MVC project
• The process of creating a MVC project using
ASP.NET Core will look something as below:
Create a solution
Pick up templates
Solution Explorer with a Core 2.1 MVC
project
 Application startup in ASP.NET Core

• ASP.NET Core apps use a Startup class, which

is named Startup by convention.
• The Startup class:
• Must include a Configure method to create
the app's request processing pipeline.
• ConfigureServices and Configure are called by
the runtime when the app starts.
Startup.cs
Lets Add a New Controller
Scaffolding options while adding a
controller
SampleController created with a
default Index method
 Lets start debugging
• Press F5, the IIS Express will launch a browser,
giving a random port number onto which the
current app is loaded.
 Random Port Number: Where is it
defined?
• Right click on the project->Properties->Debug
Tab->The port number is defined in App URL.
 How does MVC know which page to
propel?
• It does so by Routing.
• A default route is evident in the Startup.cs file:
• app.UseMvc(routes =>
• {
• routes.MapRoute(
• name: "default",
• template:
"{controller=Home}/{action=Index}/{id?}");
• });
 Lets try to propel our Sample
Controller
• Lets browse the URL:
http://localhost:62133/Sample
• Sample being our controller name
• An error is encountered which says view Index
is not found.
 Why did the error happen?
• Since our URL was http://localhost:62133/Sample
• MVC knew the controller being requested was Sample, and the
method being requested was Index, because the default route tells
us, if no action method is provided, try to get the Index method.
• Now, the Index action method of the Sample Controller had just a
line of code, return View(), MVC searched for a view named
Index.cshtml under the Views->Sample directory, but since we
haven’t created an Index view for the Sample controller, the error
was thrown.
• MVC first searches for a relevant view under the relevant controller
named folder, if not found there, it searches in the Shared Views
folder, if not found there as well, it doesn’t have any option but to
return us an error.
Lets add an Index view for Sample
Controller
An Index View is Added
• Click F5, try to browse to the Index method of
the Sample Controller, we won’t get an error,
rather the Index view.
Let’s try to do some dynamic stuffs
• Let’s try to send some value from the
controller to the view.
• We can achieve this by:
• ViewData
• ViewBag
• Strongly Typed Models
 View Data
• View Data is basically a ViewDataDictionary, which stores key-value
pairs.
• The key needs to be a string.
• public class ViewDataDictionary : IDictionary<string, object>
• An example is:
• ViewData["Sitcom"] = "Two And A Half Men!!!";
• The above is being set at the controller level.
• To get/receive it at the View level, we need to leverage the Razor
syntax, and write as :
• @ViewData["Sitcom"]
• Views are basically HTML files, to receive server side stuffs, the
MVC needs to differentiate between HTML code and server side
code, here Razor syntax comes to rescue.
• Whatever comes after @ is basically server side code.
 View Bag
• The ViewBag is a dynamic type property of Controller
class.
• We provide a dynamic name to the ViewBag, assign
data which we want to transfer to the View level, and
access the ViewBag using the same dynamic name.
• Set ViewBag at the controller level as below:
• ViewBag.Movie = "Pearl Harbour";
• Get/Receive the ViewBag at the view level using Razor
syntax:
• @ViewBag.Movie
• Internally, ViewBag is a wrapper around ViewData.
 Difference between View Data and
View Bag
• The ViewData uses the dictionary syntax to access the
values, while ViewBag uses the property syntax.
• The 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>), and no
casting is required. The syntax of ViewBag makes it
quicker to add to controllers and views.
 When to use ViewData or ViewBag

• The ViewData and ViewBag are equally good options

when you want to pass the small amount of data from
the controller to the View. The choice usually depends
on the personal preference
• 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
• The ViewData and ViewBag can pass data from the
Controller to View. It cannot be used to pass data from
One Controller to another controller.
 Strongly Typed Models
• Model is basically a class.
• We can create an object of the class, assign
data to its properties and then send this
object to the view.
• It is strongly typed, i.e. it gives us compile time
checking, if we type an incorrect property
name or even have a typo error, the compiler
will throw an error.
Let’s create a SampleModel
• It’s a good practice to segregate the code
using folders.
• Here, since we are dealing with Sample
controller and stuffs, a Sample folder has been
created under Models folder and a model,
namely SampleModel.cs has been added with
few properties.
 Further Essential Reading
• https://docs.microsoft.com/en-
us/aspnet/core/?view=aspnetcore-2.1