Scribd
Upload
36 views33 pages

Hello Word

This document provides an introduction to web programming with ASP.NET Core MVC. It describes the components of a web application, the MVC pattern, and ASP.NET Core MVC. It also discusses state management, IDEs like Visual Studio and Visual Studio Code, and coding conventions.

Uploaded by

hageb23042
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
36 views33 pages

Hello Word

This document provides an introduction to web programming with ASP.NET Core MVC. It describes the components of a web application, the MVC pattern, and ASP.NET Core MVC. It also discusses state management, IDEs like Visual Studio and Visual Studio Code, and coding conventions.

Uploaded by

hageb23042
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 33

Chapter 1

An introduction
to web programming
with ASP.NET Core
MVC

© 2020, Mike Murach & Associates, Inc.


Murach's ASP.NET Core MVC C1, Slide 1
Objectives (part 1)
Knowledge
1. Describe the components of a web app.
2. Describe the four components of a URL.
3. Distinguish between static and dynamic web pages, with the focus
on the web server, application server, and database server.
4. Distinguish between the Internet and an intranet.
5. Describe these terms: HTTP request, HTTP response, and round
trip.
6. Describe the model, view, and controller of the MVC pattern.
7. Explain how using the MVC pattern can improve app development.
8. Describe three programming models that can be used for developing
ASP.NET apps.
9. Distinguish between .NET Framework and .NET Core.

© 2020, Mike Murach & Associates, Inc.


Murach's ASP.NET Core MVC C1, Slide 2
Objectives (part 2)
10.Describe how an ASP.NET Core app allows a developer to
configure the middleware components in the HTTP request and
response pipeline.
11. Define state and describe why it’s hard to track in a web app.
12.Distinguish between the Visual Studio IDE and the code editor
known as Visual Studio Code.
13.Describe how coding by convention works and how it can benefit
developers.

© 2020, Mike Murach & Associates, Inc.


Murach's ASP.NET Core MVC C1, Slide 3
The components of a web app

© 2020, Mike Murach & Associates, Inc.


Murach's ASP.NET Core MVC C1, Slide 4
The components of an HTTP URL

© 2020, Mike Murach & Associates, Inc.


Murach's ASP.NET Core MVC C1, Slide 5
How a web server processes a static web page

© 2020, Mike Murach & Associates, Inc.


Murach's ASP.NET Core MVC C1, Slide 6
A simple HTTP request
GET / HTTP/1.1
Host: www.example.com

A simple HTTP response


HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 136
Server: Apache/2.2.3

<html>
<head>
<title>Example Web Page</title>
</head>
<body>
<p>This is a sample web page</p>
</body>
</html>

© 2020, Mike Murach & Associates, Inc.


Murach's ASP.NET Core MVC C1, Slide 7
Three protocols that web apps depend upon
 Hypertext Transfer Protocol (HTTP) is the protocol that web
browsers and web servers use to communicate. It sets the
specifications for HTTP requests and responses.
 Hypertext Transfer Protocol Secure (HTTPS) is an extension of
the Hypertext Transfer Protocol (HTTP). It is used for secure
communication over a network.
 Transmission Control Protocol/Internet Protocol (TCP/IP) is a
suite of protocols that let two computers communicate over a
network.

© 2020, Mike Murach & Associates, Inc.


Murach's ASP.NET Core MVC C1, Slide 8
How a web server processes a dynamic web page

© 2020, Mike Murach & Associates, Inc.


Murach's ASP.NET Core MVC C1, Slide 9
The MVC (Model-View-Controller) pattern

© 2020, Mike Murach & Associates, Inc.


Murach's ASP.NET Core MVC C1, Slide 10
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, and
passes the model to the appropriate view.

© 2020, Mike Murach & Associates, Inc.


Murach's ASP.NET Core MVC C1, Slide 11
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.
 Makes the app easier to maintain.

Drawbacks of the MVC pattern


 Requires more work to set up.

© 2020, Mike Murach & Associates, Inc.


Murach's ASP.NET Core MVC C1, Slide 12
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.
 Has many problems including poor performance, inadequate
separation of concerns, lack of support for automated testing, and
limited control over the HTML/CSS/JavaScript that’s returned to
the browser.
 Uses the ASP.NET Framework, which is proprietary and only
runs on Windows.

© 2020, Mike Murach & Associates, Inc.


Murach's ASP.NET Core MVC C1, Slide 13
ASP.NET MVC
 Released in 2007.
 Uses the MVC pattern that’s used by many other web
development platforms.
 Fixes many of the perceived problems with web forms to provide
better performance, separation of concerns, support for
automated testing, and a high degree of control over the
HTML/CSS/JavaScript that’s returned to the browser.
 Uses the same proprietary, Windows-only ASP.NET Framework
as Web Forms.

© 2020, Mike Murach & Associates, Inc.


Murach's ASP.NET Core MVC C1, Slide 14
ASP.NET Core MVC
 Released in 2015.
 Uses a service to implement the MVC pattern that’s used by
many other web development platforms.
 Provides all of the functionality of ASP.NET MVC but with
better performance, more modularity, and cleaner code.
 Is built on the open-source ASP.NET Core platform that can run
on multiple platforms including Windows, macOS, and Linux.

© 2020, Mike Murach & Associates, Inc.


Murach's ASP.NET Core MVC C1, Slide 15
Some web components of .NET and .NET Core

© 2020, Mike Murach & Associates, Inc.


Murach's ASP.NET Core MVC C1, Slide 16
A request that makes it through all middleware
in the pipeline

© 2020, Mike Murach & Associates, Inc.


Murach's ASP.NET Core MVC C1, Slide 17
A request that’s short circuited
by a middleware component in the pipeline

© 2020, Mike Murach & Associates, Inc.


Murach's ASP.NET Core MVC C1, Slide 18
Middleware can…
 Generate the content for a response
 Edit the content of a request
 Edit the content of a response
 Short circuit a request

© 2020, Mike Murach & Associates, Inc.


Murach's ASP.NET Core MVC C1, Slide 19
Why state is difficult to track in a web app

© 2020, Mike Murach & Associates, Inc.


Murach's ASP.NET Core MVC C1, Slide 20
State 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.

© 2020, Mike Murach & Associates, Inc.


Murach's ASP.NET Core MVC C1, Slide 21
Visual Studio with an ASP.NET Core MVC app

© 2020, Mike Murach & Associates, Inc.


Murach's ASP.NET Core MVC C1, Slide 22
Features of Visual Studio
 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.

© 2020, Mike Murach & Associates, Inc.


Murach's ASP.NET Core MVC C1, Slide 23
VS Code with an ASP.NET Core MVC app

© 2020, Mike Murach & Associates, Inc.


Murach's ASP.NET Core MVC C1, Slide 24
Features of Visual Studio Code
 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).

© 2020, Mike Murach & Associates, Inc.


Murach's ASP.NET Core MVC C1, Slide 25
Some of the folders and files for a web app
GuitarShop
/Controllers
/HomeController.cs
/ProductController.cs
/Models
/Product.cs
/Views
/Home
/About.cshthml
/Index.cshthml
/Product
/Detail.cshthml
/List.cshthml
/wwwroot
/css
custom.css
/images
/js
custom.js
/lib
/boostrap
/jquery
/Startup.cs

© 2020, Mike Murach & Associates, Inc.


Murach's ASP.NET Core MVC C1, Slide 26
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
shold be stored in a folder named wwwroot or one of its
subfolders.
 All controller classes should have a suffix of “Controller”.

© 2020, Mike Murach & Associates, Inc.


Murach's ASP.NET Core MVC C1, Slide 27
The code for a model class named Product
namespace GuitarShop.Models
{
public class Product
{
public int ProductID { get; set; }
public string Name { get; set; }
public decimal Price { get; set; }
public string Slug => Name.Replace(' ', '-');
}
}

© 2020, Mike Murach & Associates, Inc.


Murach's ASP.NET Core MVC C1, Slide 28
The code for the ProductController class
using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
using GuitarShop.Models;

namespace GuitarShop.Controllers
{
public class ProductController : Controller
{
public IActionResult Detail(string id)
{
Product product = DB.GetProduct(id);
return View(product);
}

public IActionResult List()


{
List<Product> products = DB.GetProducts();
return View(products);
}
}
}

© 2020, Mike Murach & Associates, Inc.


Murach's ASP.NET Core MVC C1, Slide 29
The code for the Product/Detail.cshtml view
@model Product
@{
ViewBag.Title = "Product Detail";
}
<h1>Product Detail</h1>
<table class="table table-bordered table-striped">
<tr>
<td>ID</td><td>@Model.ProductID</td>
</tr>
<tr>
<td>Name</td><td>@Model.Name</td>
</tr>
<tr>
<td>Price</td><td>@Model.Price.ToString("C2")</td>
</tr>
</table>
<a asp-controller="Home" asp-action="Index"
class="btn btn-primary">Home</a>

© 2020, Mike Murach & Associates, Inc.


Murach's ASP.NET Core MVC C1, Slide 30
The view displayed in a browser

© 2020, Mike Murach & Associates, Inc.


Murach's ASP.NET Core MVC C1, Slide 31
The Startup.cs file
using Microsoft.AspNetCore.Builder;
using Microsoft.Extensions.DependencyInjection;

namespace GuitarShop
{
public class Startup
{
public void ConfigureServices(IServiceCollection services)
{
services.AddControllersWithViews();
}

public void Configure(IApplicationBuilder app)


{
app.UseDeveloperExceptionPage();
app.UseStaticFiles();
app.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
});
}
}
}

© 2020, Mike Murach & Associates, Inc.


Murach's ASP.NET Core MVC C1, Slide 32
How request URLs map to controllers and actions
by default
Request URL Controller Action
http://localhost Home Index
http://localhost/Home Home Index
http://localhost/Home/About Home About
http://localhost/Product/List Product List
http://localhost/Product/Detail Product Detail

© 2020, Mike Murach & Associates, Inc.


Murach's ASP.NET Core MVC C1, Slide 33

You might also like