ASP.NET Core - halvorsen.blog...ASP.NET Different Programming models: •ASP.NET Web Forms...

27
ASP.NET Core Hans-Petter Halvorsen https://www.halvorsen.blog

Transcript of ASP.NET Core - halvorsen.blog...ASP.NET Different Programming models: •ASP.NET Web Forms...

Page 1: ASP.NET Core - halvorsen.blog...ASP.NET Different Programming models: •ASP.NET Web Forms •ASP.NET MVC (Model-View-Controller) •ASP.NET Razor Pages –Razor Single Page Model

ASP.NET Core

Hans-Petter Halvorsen

https://www.halvorsen.blog

Page 2: ASP.NET Core - halvorsen.blog...ASP.NET Different Programming models: •ASP.NET Web Forms •ASP.NET MVC (Model-View-Controller) •ASP.NET Razor Pages –Razor Single Page Model

Table of Contents• Introduction to ASP.NET Core • ASP.NET Core in Visual Studio• ASP.NET Core - Hello World Application• ASP.NET Core - Fundamentals• ASP.NET Core Razor

2

Page 3: ASP.NET Core - halvorsen.blog...ASP.NET Different Programming models: •ASP.NET Web Forms •ASP.NET MVC (Model-View-Controller) •ASP.NET Razor Pages –Razor Single Page Model

ASP.NET Core Introduction

Page 4: ASP.NET Core - halvorsen.blog...ASP.NET Different Programming models: •ASP.NET Web Forms •ASP.NET MVC (Model-View-Controller) •ASP.NET Razor Pages –Razor Single Page Model

ASP.NETDifferent Programming models:• ASP.NET Web Forms• ASP.NET MVC (Model-View-Controller)• ASP.NET Razor Pages– Razor Single Page Model (comparable to PHP but using

C# syntax instead)– Razor with Page Model (Code and Layout are separated

in different Files)– Razor with MVC

4

Page 5: ASP.NET Core - halvorsen.blog...ASP.NET Different Programming models: •ASP.NET Web Forms •ASP.NET MVC (Model-View-Controller) •ASP.NET Razor Pages –Razor Single Page Model

ASP.NET RazorDifferent Types• Razor Page (Single Page Model)– Test1.cshtml

• Razor Page (with Page Model)– Test2.cshtml + Test2.cshtml.cs

• Razor with MVC5

Page 6: ASP.NET Core - halvorsen.blog...ASP.NET Different Programming models: •ASP.NET Web Forms •ASP.NET MVC (Model-View-Controller) •ASP.NET Razor Pages –Razor Single Page Model

Razor PagesEach Razor page is a pair of files:• A .cshtml file that contains HTML markup with

C# code using Razor syntax.• A .cshtml.cs file that contains C# code that

handles page events.

6

Page 7: ASP.NET Core - halvorsen.blog...ASP.NET Different Programming models: •ASP.NET Web Forms •ASP.NET MVC (Model-View-Controller) •ASP.NET Razor Pages –Razor Single Page Model

ASP.NET Core Visual Studio

Page 8: ASP.NET Core - halvorsen.blog...ASP.NET Different Programming models: •ASP.NET Web Forms •ASP.NET MVC (Model-View-Controller) •ASP.NET Razor Pages –Razor Single Page Model

8

Page 9: ASP.NET Core - halvorsen.blog...ASP.NET Different Programming models: •ASP.NET Web Forms •ASP.NET MVC (Model-View-Controller) •ASP.NET Razor Pages –Razor Single Page Model

Folders an Files• appSettings.json

– Contains configuration data, such as connection strings

• Program.cs– Contains the entry point for the program

• Startup.cs– Contains code that configures app behavior.

• wwwroot folder– Contains static files, such as HTML files, JavaScript files, and CSS files

• Pages folder– You may put your ASP.NET web pages here 9

Page 10: ASP.NET Core - halvorsen.blog...ASP.NET Different Programming models: •ASP.NET Web Forms •ASP.NET MVC (Model-View-Controller) •ASP.NET Razor Pages –Razor Single Page Model

Supporting FilesSupporting files have names that begin with an underscore (_).• _Layout.cshtml file configures UI elements

common to all pages. You can use this file to set up the navigation menu at the top of thepage

10

Page 11: ASP.NET Core - halvorsen.blog...ASP.NET Different Programming models: •ASP.NET Web Forms •ASP.NET MVC (Model-View-Controller) •ASP.NET Razor Pages –Razor Single Page Model

ASP.NET CoreHello World Application

Page 12: ASP.NET Core - halvorsen.blog...ASP.NET Different Programming models: •ASP.NET Web Forms •ASP.NET MVC (Model-View-Controller) •ASP.NET Razor Pages –Razor Single Page Model

Hello World Application

12

Page 13: ASP.NET Core - halvorsen.blog...ASP.NET Different Programming models: •ASP.NET Web Forms •ASP.NET MVC (Model-View-Controller) •ASP.NET Razor Pages –Razor Single Page Model

ASP.NET CoreFundamentals

Page 14: ASP.NET Core - halvorsen.blog...ASP.NET Different Programming models: •ASP.NET Web Forms •ASP.NET MVC (Model-View-Controller) •ASP.NET Razor Pages –Razor Single Page Model

• appSettings.json– Contains configuration data, such as

connection strings• Program.cs

– Contains the entry point for the program• Startup.cs

– Contains code that configures app behavior.• wwwroot folder

– Contains static files, such as HTML files, JavaScript files, and CSS files

• Pages folder– You may put your ASP.NET web pages here

• Models folder– Here you create your Classe

Page 15: ASP.NET Core - halvorsen.blog...ASP.NET Different Programming models: •ASP.NET Web Forms •ASP.NET MVC (Model-View-Controller) •ASP.NET Razor Pages –Razor Single Page Model

Folders an Files• appSettings.json

– Contains configuration data, such as connection strings• Program.cs

– Contains the entry point for the program• Startup.cs

– Contains code that configures app behavior.• wwwroot folder

– Contains static files, such as HTML files, JavaScript files, and CSS files

• Pages folder– You may put your ASP.NET web pages here

• Models folder– Here you create your Classes

15

Page 16: ASP.NET Core - halvorsen.blog...ASP.NET Different Programming models: •ASP.NET Web Forms •ASP.NET MVC (Model-View-Controller) •ASP.NET Razor Pages –Razor Single Page Model

Supporting FilesSupporting files have names that begin with an underscore (_).• _Layout.cshtml file configures UI elements

common to all pages. You can use this file to set up the navigation menu at the top of thepage

16

Page 17: ASP.NET Core - halvorsen.blog...ASP.NET Different Programming models: •ASP.NET Web Forms •ASP.NET MVC (Model-View-Controller) •ASP.NET Razor Pages –Razor Single Page Model

Pages Folder• You should put your ASP.NET web pages here

17

Page 18: ASP.NET Core - halvorsen.blog...ASP.NET Different Programming models: •ASP.NET Web Forms •ASP.NET MVC (Model-View-Controller) •ASP.NET Razor Pages –Razor Single Page Model

Models Folder• Here you should create your Classes

18

Page 19: ASP.NET Core - halvorsen.blog...ASP.NET Different Programming models: •ASP.NET Web Forms •ASP.NET MVC (Model-View-Controller) •ASP.NET Razor Pages –Razor Single Page Model

appSettings.json

19

{"Logging": {"LogLevel": {"Default": "Information","Microsoft": "Warning","Microsoft.Hosting.Lifetime": "Information"

}},"AllowedHosts": "*",

"ConnectionStrings": {"ConnectionString": "DATA SOURCE=xxx;UID=xxx;PWD=xxx;DATABASE=xxx"

}

}

Page 20: ASP.NET Core - halvorsen.blog...ASP.NET Different Programming models: •ASP.NET Web Forms •ASP.NET MVC (Model-View-Controller) •ASP.NET Razor Pages –Razor Single Page Model

ASP.NET CoreRazor

Page 21: ASP.NET Core - halvorsen.blog...ASP.NET Different Programming models: •ASP.NET Web Forms •ASP.NET MVC (Model-View-Controller) •ASP.NET Razor Pages –Razor Single Page Model

Razor• Razor is a markup syntax for embedding server-based

code into webpages. • The Razor syntax consists of Razor markup, C#, and

HTML. Files containing Razor generally have a .cshtmlfile extension.

• The default Razor language is HTML. Rendering HTML from Razor markup is no different than rendering HTML from an HTML file. HTML markup in .cshtmlRazor files is rendered by the server unchanged.

21

Page 22: ASP.NET Core - halvorsen.blog...ASP.NET Different Programming models: •ASP.NET Web Forms •ASP.NET MVC (Model-View-Controller) •ASP.NET Razor Pages –Razor Single Page Model

ASP.NET RazorDifferent Types• Razor Page (Single Page Model)– Test1.cshtml

• Razor Page (with Page Model)– Test2.cshtml + Test2.cshtml.cs

• Razor with MVC22

Page 23: ASP.NET Core - halvorsen.blog...ASP.NET Different Programming models: •ASP.NET Web Forms •ASP.NET MVC (Model-View-Controller) •ASP.NET Razor Pages –Razor Single Page Model

Razor PagesEach Razor page is a pair of files:• A .cshtml file that contains HTML markup with

C# code using Razor syntax.• A .cshtml.cs file that contains C# code that

handles page events.

23

Page 24: ASP.NET Core - halvorsen.blog...ASP.NET Different Programming models: •ASP.NET Web Forms •ASP.NET MVC (Model-View-Controller) •ASP.NET Razor Pages –Razor Single Page Model

Razor Syntax

24

• Razor supports C# and uses the @ symbol to transition from HTML to C#.

• Razor evaluates C# expressions and renders them in the HTML output.

• All code blocks must appear within @{ ... } brackets.

Page 25: ASP.NET Core - halvorsen.blog...ASP.NET Different Programming models: •ASP.NET Web Forms •ASP.NET MVC (Model-View-Controller) •ASP.NET Razor Pages –Razor Single Page Model

Razor Syntax@{

<Here goes your Razor Code> }<div><h1>Hello World</h1></div>

25

HTML Code

Razor Code

Page 26: ASP.NET Core - halvorsen.blog...ASP.NET Different Programming models: •ASP.NET Web Forms •ASP.NET MVC (Model-View-Controller) •ASP.NET Razor Pages –Razor Single Page Model

ASP.NET CoreDatabase Communication

Page 27: ASP.NET Core - halvorsen.blog...ASP.NET Different Programming models: •ASP.NET Web Forms •ASP.NET MVC (Model-View-Controller) •ASP.NET Razor Pages –Razor Single Page Model

Hans-Petter Halvorsen

University of South-Eastern Norwaywww.usn.no

E-mail: [email protected]: https://www.halvorsen.blog