Murach: An introduction to web programming with ASP.NET Core MVC

Chapter 1
An introduction to web programming with ASP.NET Core MVC..

Objectives:
 web apps.
 ASP.NET Core MVC.
 Tools for working with ASP.NET Core MVC apps .
 How an ASP.NET Core MVC app works .

The components of a web app:
 The web apps consist of clients and a web
server..
 The clients are the computers and mobile
devices that use the web apps.
 The web server holds the files that generate
the pages of a web app.

The components of an HTTP URL
A URL consists of the protocol (usually, HTTPS), domain name, path, and filename.
If you omit the protocol, HTTPS is assumed. If you omit the filename, the web
server typically looks for a file named index.html, index.htm, default.html, or
default.htm…

How static web pages are processed:
How a web server processes a dynamic web page:

An introduction to the MVC pattern:
The MVC (Model-View-Controller) pattern is commonly used to structure web
apps that have significant processing requirements. Most modern web
development frameworks today use some form of the MVC pattern. As you’ll
learn in this book, ASP.NET Core provides extensive support for the MVC
pattern.
The MVC pattern:

Components of the MVC pattern
 The model consists of the code that
provides the data access and business
logic.
 The view consists of the code that
generates the user interface and
presents it to the user.
 The controller consists of the code that
receives requests from users, gets the
appropriate data and stores it in the
model
Benefits of the MVC pattern:
 Makes it easier to have different
members of a team work on different
components.
 Makes it possible to automate testing of
individual components.
 Makes it possible to swap out one
component for another component.

An introduction to ASP.NET Core MVC..
Now that you understand some concepts that apply to most web apps, you’re
ready to learn some concepts that are more specific to ASP.NET Core MVC
apps.
ASP.NET Web Forms:
 Released in 2002, Provides for RAD (Rapid Application Development) by
letting developers build web pages by working with a design surface in a way
that’s similar to Windows Forms.
 Uses the ASP.NET Framework, which is proprietary and only runs on Windows
ASP.NET MVC:
 Released in 2007, Uses the MVC pattern that’s used by many other web
development platforms.
 Uses the same proprietary, Windows-only ASP.NET Framework as Web Forms.
ASP.NET Core MVC:
 Released in 2015, Uses a service to implement the MVC pattern.
 Is built on the open-source ASP.NET Core platform that can run on multiple
platforms including Windows, macOS, and Linux.

Some web components of .NET and .NET Core:
There are several important differences between .NET and .NET Core.
Specifically, the .NET Core platform is open source and supports multiple
operating systems including Windows, macOS, and Linux. By contrast, the .NET
Framework is proprietary and only supports the Windows operating system. On
the other hand, the .NET Framework supports all three programming models
described in the previous figure. However, of these three programming
models, the .NET Core platform only supports ASP.NET Core MVC.
Some web components of .NET and .NET Core:

An introduction to ASP.NET Core middleware:
 An ASP.NET Core app allows you to configure the middleware components
that are in the HTTP request and response pipeline. This gives developers a
lot of flexibility in how an app works. Each middleware component can
modify the HTTP request before passing it on to the next component in the
pipeline. Similarly, each middleware component can modify the HTTP
response before passing it to the next component in the pipeline.
 If the authorization middleware determines that the client is not authorized
to make the request, it short circuits the request by passing a response back
to the web server. Along the way, the authentication middleware can edit
the content of the response.

A request that makes it through all middleware in the pipeline:
A request that’s short circuited by a middleware component in the
pipeline:

Concepts
•State refers to the current status of the properties, variables, and other data
maintained by an app for a single user.
• HTTP is a stateless protocol. That means that it doesn’t keep track of state between
round trips. Once a browser makes a request and receives a response, the app
terminates and its state is lost
Why state is difficult to track in a web app

Description
• ASP.NET Web Forms attempted to hide the stateless nature of a web app from
developers by automatically maintaining state. This led to poor performance.
• ASP.NET Core MVC does not attempt to hide the stateless nature of a web app
from developers. Instead, it provides features to handle state in a way that gives
developers control over each HTTP request and response.

Tools for working with ASP.NET Core MVC apps:
Now that you know some of the concepts behind ASP.NET Core MVC, you’re
ready to learn more about the tools that you can use to develop ASP.NET Core
MVC apps. Some developers prefer to use an integrated development
environment (IDE), which is a tool that provides all of the functionality that you
need for developing an app in one place. Other developers prefer to use a code
editor to enter and edit code and a command line to compile and run it. There
are pros and cons to each approach. Fortunately, an excellent IDE and code
editor are both available for free to ASP.NET Core MVC developers.

 An introduction to Visual Studio :
Visual Studio, also known just as VS, is the most popular IDE for developing
ASP.NET Core apps. Microsoft provides a Community Edition that’s available for
free and runs on Windows, as well as a free version that runs on macOS. Figure
1-9 shows Visual Studio after it has opened an ASP.NET Core MVC app and
displayed the code for one of its controllers. In addition, this figure lists some of
the features provided by Visual Studio. For example, you can compile and run
an app with a single keystroke. Visual Studio is an established product that has
been around for decades, and it’s a great tool for learning. That’s why we
present it throughout this book, starting in the next chapter. 04/07/2020 - tp-
9df69004-78a4-11ea-a123-024 (temp temp) - Murach's ASP.NET Core MV

Visual Studio with an ASP.NET Core MVC app :

Features
 IntelliSense code completion makes it easy to enter code. • Automatic
compilation allows you to compile and run an app with a single keystroke.
 Integrated debugger makes it easy to find and fix bugs.
 Runs on Windows and macOS

Description
 An Integrated Development Environment (IDE) is a tool that provides all of
the functionality that you need for developing web apps.
 Visual Studio, also known as VS, is the most popular IDE for ASP.NET Core
web development.
 Starting in the next chapter, this book shows how to use Visual Studio to
develop ASP.NET Core MVC apps.

An introduction to Visual Studio Code
Visual Studio Code, also known as VS Code, is a code editor that’s becoming
popular with Microsoft developers. Like Visual Studio, VS Code can be used to
develop all types of .NET apps, including ASP.NET Core apps. Since it doesn’t
provide as many features as an IDE like Visual Studio, some developers find VS
Code easier to use. In addition, VS Code typically starts and runs faster than
Visual Studio, especially on slower computers. Figure 1-10 shows VS Code after it
has opened the same app as the previous figure. If you compare these two
figures, you’ll see that they look very similar. In short, both provide an Explorer
window that lets you navigate through the files for an app, and both provide a
code editor for editing the code for an app. The main difference is that Visual
Studio provides more features than VS Code. That’s either good or bad,
depending on how you look at it. This figure also lists some of the features
provided by VS Code. If you compare this list of features with the list of features
in the previous figure, you’ll see that they’re mostly the same. The main
difference is that VS Code runs on Linux, and Visual Studio does not. So, even
though Visual Studio provides more features, VS Code provides all of the most
essential features that make it easy to develop ASP.NET Core apps.

 Visual Studio Code with an ASP.NET Core MVC app :

Features :
 IntelliSense code completion makes it easy to enter code.
 Automatic compilation allows you to compile and run an app with a single
keystroke.
 Integrated debugger makes it easy to find and fix bugs.
 Runs everywhere (Windows, macOS, and Linux).
Description:
 Visual Studio Code, also known as VS Code, is a code editor that you can use
to work with ASP.NET Core apps.
 When you use VS Code, you can use its Terminal window to use a command
line to enter and execute the commands that build and run an app.
 VS Code has a less restrictive license than the Community Edition of Visual
Studio and adheres to a truly open-source, open-use model.
 Chapter 17 shows how to use VS Code to develop ASP.NET Core MVC apps..

 How an ASP.NET Core MVC app works:
Now that you’ve been introduced to some general concepts and tools for
working with ASP.NET Core MVC, you’re ready to learn more about how an
ASP.NET Core MVC app works. To do that, the next few figures present the
overall structure of an ASP.NET Core MVC app as well as some key snippets of
code. This should give you a general idea of how an ASP.NET Core MVC app
works. Then, in the next chapter, you’ll learn all of the details for coding such
an app.

How coding by convention work
ASP.NET Core MVC uses a software design paradigm known as convention
over configuration, or coding by convention. This reduces the amount of
configuration that developers need to do if they follow certain conventions.
That’s why figure 1-11 shows some of the folders and files for an MVC web app
that follows the standard MVC conventions. And that’s why this figure lists
some of these conventions. To start, the top-level folder for a web app is
known as its root folder, also known as the root directory. In this figure, the
Guitar Shop folder is the root folder. Within the root folder, you typically use .cs
files to store the C# classes that define controllers and models. All controller
classes should be stored in a folder named Controllers or one of its subfolders.
In this figure, the Controllers folder contains the files for two classes named
Home Controller and Product Controller. Both of these classes have a suffix of
“Controller”. This isn’t required for controllers to work, but it’s a standard
convention that makes it easy for other programmers to quickly identify these
classes as controller classes. All model classes should be stored in a folder
named Models or one of its subfolders. In this figure, the Models folder contains
a single file for a model class named Product

Some of the folders and files for a web app:
 GuitarShop
 /Controllers
 /HomeController.cs
 /ProductController.cs
 /Product.cs
 /Views /Home
 /About.cshthml
 /Index.cshthml
 /Product
 /Detail.cshthml
 /List.cshthm
 /wwwroot

Some naming conventions for an ASP.NET Core MVC app :
 All controller classes should be stored in a folder named Controllers or one of its
subfolders.
 All model classes should be stored in a folder named Models or one of its
subfolders
 . All view files should be stored in a folder named Views or one of its subfolders.
 All static files such as image files, CSS files, and JavaScript files should be stored
in a folder named www nroot or one of its subfolders.
 All controller classes should have a suffix of “Controller”

Description:
 ASP.NET Core MVC uses a software design paradigm known as
convention over configuration, or coding by convention. This reduces the
amount of configuration that developers need to do if they follow certain
conventions.
 The top-level folder for a web app is known as its root folder or root
directory.
 You typically use C# classes (.cs files) to define controllers and models.
 You typically use Razor views (.cshtml files) to define views.
 The static files for an app can include CSS libraries such as Bootstrap or
JavaScript libraries such as jQuery. In addition, they can include custom
CSS or JavaScript files that override the code in these libraries

 How a controller passes a model to a view:
In ASP.NET Core MVC, a model is a C# class that defines the data objects
and business rules for the app. Figure 1-12 begins by showing the code for a
model named Product. This class is stored in the GuitarShop.Models
namespace, and it defines a simple Product object. In the Product class, you
shouldn’t have any trouble understanding the ID, Name, and Price properties.
However, the Slug property is a read-only property that’s created by replacing
all spaces in the product’s name with dashes. This property can be used in the
URL that’s used to display the product. You’ll learn more about using slugs in
chapter 4.

The code for a model class named Produc:

 The code for a controller class named ProductController:

Description :
 A model is a C# class that defines the data objects and business rules for
the app.
 With ASP.NET Core MVC, a controller is a C# class that typically inherits the
Microsoft.AspNetCore.Mvc.Controller class.
 With ASP.NET Core MVC, an action is a method of a controller that returns
an action result.
 An action method can use the View() method to return a type of action
result known as a view result that’s created by merging the model (if there
is one) into the corresponding view file

 How a view uses Razor code, tag helpers, and Bootstrap
CSS classes:
Most of a typical view file consists of HTML elements. In figure 1-13, for
example, the code uses an element to display a level-1 heading. It uses the
<table>, <tr>,and <td> elements to display a table that has three rows with two
columns. And it uses an element to display a link that’s formatted to look
like a button..

 The code for a view file named Product/Detail.cshtml :

The view displayed in a browser :
Description :
 Most of a typical view file consists of standard HTML elements.
 The @model directive specifies the class for the model, and the @Model property
allows you to access the model object that’s passed to the view from the controller.
 The @ sign followed by braces ({}) identifies a block of C# statements. Within the block,
you can code one or more C# statements.
 All HTML attributes that start with “asp-” are tag helpers. Tag helpers are defined by
C# classes and make it easier to work with HTML elements. Many tag helpers are built
into ASP.NET Core MVC.
 The class attribute of an HTML element can specify CSS classes from Bootstrap, a
popular open-source CSS library that’s often used with ASP.NET Core MVC.

The Startup.cs file
How request URLs map to controllers and actions by default

Description :
 The Startup.cs file contains the code that configures the middleware that’s
used by the app. In other words, it builds the middleware pipeline for the
app.
 The ConfigureServices() method contains the code that adds services to
the app.
 The Configure() method contains the code that identifies which services to
use and provides additional configuration if necessary.
 By convention, the routing system identifies the Home controller as the
default controller and the Index() action method as the default action

Perspective:
Now that you’ve read this chapter, you should have a general understanding
of how ASP.NET Core MVC apps work and what software you need for
developing these apps. With that as background, you’re ready to gain
valuable hands-on experience by learning how to develop an ASP.NET Core
MVC app as shown in the next chapter..

Murach: An introduction to web programming with ASP.NET Core MVC

Summary:
 A web app, also known as a web application, consists of a set of web pages
that are run by clients, a web server, and a network. Clients often use web
browsers to request web pages from the web server. The web server returns the
requested pages.
 A local area network (LAN), or intranet, connects computers that are near
each other. By contrast, the Internet consists of many wide area networks
(WANs).
 One way to access a web page is to type a URL (Uniform Resource Locator)
into the address area of a browser and press Enter. A URL consists of the
protocol (usually, HTTPS), domain name, path, and filename.
 To request a web page, the web browser sends an HTTP request to the web
server. Then, the web server gets the HTML/CSS/JavaScript for the requested
page and sends it back to the browser in an HTTP response. Last, the browser
renders the HTML/CSS/JavaScript into a web page

 Exercise 1-1 Use Visual Studio to run the Guitar Shop app
In this exercise, you’ll run the Guitar Shop app. This will test whether you’ve
successfully installed the software and source code for this book.
Start Visual Studio and open the Guitar Shop app
1.Start Visual Studio.
2. From the menu system, select the File Open Project/Solution item. Or, if you
are in the Start window for Visual Studio, you can click the “Open a project or
solution” button. In the dialog box that’s displayed, navigate to this folder:
/aspnet_core_mvc/book_apps/Ch01GuitarShop Then, select the
Ch01GuitarShop.sln file and click the Open button.
3. If you get any error messages, click on the appropriate buttons to fix them. VS
Code should be able to do this for you.

 Run the Guitar Shop app:
4. Press Ctrl+F5 to run the app. That should display the Home page for the
Guitar Shop app in Visual Studio’s default web browser. If you get messages
about trusting and installing an SSL certificate, you can click Yes. And if a web
page is displayed indicating that the connection is not private, you can click
the link to proceed.
5. Click the “View Fender Stratocaster” link. This should display the Product
Detail page for that product.
6. Click the Home button to return to the Home page.
7. Click the “View Products” link. This should display a list of products.
8. Click the View link for the product named Gibson Les Paul. This should
display the Product Detail page for that product.
9. Close the browser tab or window for the app, and then switch back to
Visual Studio.

10. In the Solution Explorer, expand the Controllers, Models, and Views folders
and review some of the code
Close the Guitar Shop app and exit Visual Studio:
11. Use the File Close Solution command to close the solution.
12. Exit Visual Studio

Murach: An introduction to web programming with ASP.NET Core MVC

Recommended

More Related Content

What's hot (20)

Similar to Murach: An introduction to web programming with ASP.NET Core MVC (20)

More from MahmoudOHassouna (8)

Recently uploaded (20)

Murach: An introduction to web programming with ASP.NET Core MVC