Lesson 6: Introduction to ASP.NET in.

NET Technologies
ASP.NET is a powerful, open-source web framework developed by Microsoft,
designed for building dynamic web applications and services. Here’s a detailed
overview of what ASP.NET is and its significance in web development.
Key Features of ASP.NET

1. Framework for Web Development:

 ASP.NET provides a robust platform for developing web applications,

ranging from simple websites to complex enterprise-level applications.

2. Supports Multiple Programming Languages:

 You can use various programming languages, including C# and

VB.NET, to build ASP.NET applications.

3. Rich Tooling Support:

 Integrated with Microsoft Visual Studio, ASP.NET offers a rich set of
development tools, including debugging, IntelliSense, and project
templates.

4. MVC Architecture:

 ASP.NET supports the MVC (Model-View-Controller) design pattern,

allowing for a clean separation of concerns in application architecture.

5. Web API:

 ASP.NET allows developers to create RESTful APIs that can be

consumed by various clients, including web browsers, mobile apps,
and desktop applications.

6. Razor Pages:

 A newer feature that simplifies the process of building web pages with
a focus on page-based scenarios. It uses a page-centric programming
model.

7. Security Features:

 Built-in security features like authentication and authorization, data

protection, and anti-forgery measures help protect applications from
common vulnerabilities.

8. Cross-Platform:

 With the introduction of ASP.NET Core, developers can build

applications that run on Windows, macOS, and Linux.

Page 1 of 39
 9. Performance and Scalability:

 ASP.NET applications are designed for high performance and can be

easily scaled to handle large numbers of users and requests.

10. Dependency Injection:

 ASP.NET Core has built-in support for dependency injection, which

promotes loosely coupled code and improves testability.
Components of ASP.NET

1. ASP.NET Web Forms:

 A component-based framework for building dynamic web

applications. It uses a drag-and-drop interface and event-driven
programming for rapid application development.

2. ASP.NET MVC:

 A framework for building web applications using the MVC pattern,

providing more control over HTML and a cleaner separation of
concerns.

3. ASP.NET Web API:

 A framework for building RESTful services that can be consumed by a

variety of clients, including browsers and mobile devices.

4. ASP.NET Core:

 A cross-platform, high-performance framework for building modern

cloud-based web applications. It is a redesign of ASP.NET that is
modular, lightweight, and optimized for the cloud.
Use Cases

 Enterprise Applications: Building large-scale applications for businesses that

require complex functionalities and integrations.

 E-Commerce Sites: Developing online stores with robust shopping cart

functionalities and secure payment processing.

 Web Services: Creating APIs that can be consumed by various applications,

enabling data exchange and integration.

 Content Management Systems (CMS): Building websites that require easy

content management and updates.

Page 2 of 39
 Before we move on to creating projects, let’s get to know ASP.NET MVC and

ASP.NET Core MVC a little more:

 ⏩ ASP.NET MVC: It is a framework for developing web applications. This

framework is designed to organize different parts of the application and make

the code base more manageable. It provides developers with the flexibility to

manage business logic, user interface, and user interactions as separate

components. This modular structure enables easier maintenance,

development, and extension of applications.

 ⏩ ASP.NET Core MVC: It is a modern and flexible web application

framework developed by Microsoft on the .NET Core platform. Based on the

Model-View-Controller (MVC) architecture, this framework organizes the

application’s business logic, user interface, and user interactions as separate

components. ASP.NET Core MVC stands out with its ability to work on

various platforms, providing developers with flexibility in developing

applications on different operating systems such as Linux, macOS, and

Windows. Additionally, it offers advantages such as scalability, performance,

and compliance with modern web standards, enabling developers to create

fast, reliable, and powerful web applications.

Page 3 of 39
Razor and Blazor technologies developed by Microsoft for building web
applications

Razor and Blazor are both technologies developed by Microsoft for building web
applications, but they serve different purposes and operate in distinct ways.
Here’s a detailed comparison of Razor and Blazor:
Razor

Overview:

 Razor is a markup syntax used in ASP.NET for creating dynamic web content.
It allows developers to embed C# code within HTML to generate dynamic
web pages.

Key Features:

1. Markup Syntax:

 Razor uses a simple syntax that combines HTML and C#. It starts with
the @ symbol to denote code blocks.

2. Server-Side Execution:

 Razor is primarily used in server-side rendering scenarios, such as in

ASP.NET MVC or ASP.NET Core MVC applications.

3. View Engine:

 Razor acts as a view engine, generating HTML content on the server

and sending it to the client browser.

4. Integration:

 Razor integrates seamlessly with ASP.NET Core MVC, allowing for the
creation of views that respond to user actions via controllers.

5. File Extensions:

 Razor files typically have the .cshtml extension.

Example:

@model List<string>

<h1>Book List</h1>

<ul>
@foreach (var book in Model)

Page 4 of 39
 {

<li>@book</li>

</ul>
Blazor

Overview:

 Blazor is a framework for building interactive web applications using C#

instead of JavaScript. It allows developers to create rich web UIs with a
component-based architecture.

Key Features:

1. Component-Based Architecture:

 Blazor applications are built using reusable components, making it

easy to create complex UIs.

2. Client-Side and Server-Side:

 Blazor offers two hosting models:

 Blazor WebAssembly: Runs client-side in the browser using

WebAssembly.

 Blazor Server: Runs on the server and handles UI interactions

over a SignalR connection.

3. C# for Frontend Development:

 Blazor allows developers to write both client-side and server-side code

in C#, eliminating the need for JavaScript in many cases.

4. Two-Way Data Binding:

 Blazor supports two-way data binding, making it easier to synchronize

UI elements with data models.

5. File Extensions:

 Blazor component files typically have the .razor extension.

Razor format

@page "/books"

@code {

Page 5 of 39
 private List<string> books = new List<string> { "Book 1", "Book 2", "Book 3"
};
}

<h1>Book List</h1>
<ul>
@foreach (var book in books)
{
<li>@book</li>
}
</ul>

Key Differences

Feature Razor Blazor

Dynamic HTML Building interactive web

Purpose
generation with C# applications with C#

Server-side Client-side (WebAssembly)

Execution Model
rendering or server-side (SignalR)

Component No component Component-based

Architecture model, uses views architecture

File Extensions .cshtml .razor

Limited data Full two-way data binding

Data Binding
binding capabilities capabilities

Page 6 of 39
MVC (Model-View-Controller)

Page 7 of 39
Overview:
MVC is a design pattern that separates an application into three main components:

 Model: Represents the data and business logic of the application.(handles all
data)

 component interacting with the database (implemented using

Encapsulation)

 It needs to be understood that Model is

not the Database, it is a combination of Data and Business Logic
needed
to perform the actions on the DB. MVC takes it for granted that the
Model already has a data access layer.

 View: Displays the data (user interface) and sends user commands to the
controller.
 Controller: Handles user input, interacts with the model, and updates the
view.

Example: Book Management Application using MVC

1. Model (Book.cs):

Page 8 of 39
Explanation: This class serves as the data structure representing a book.

2. Controller (BooksController.cs):

Explanation:
 Index: Retrieves the list of books and passes it to the view.
 Add: Accepts a new book and adds it to the list, with validation to ensure the
model state is valid.

3. View (Index.cshtml)

Page 9 of 39
Explanation:

 The view displays the list of books and provides a form for adding new
books. The form posts back to the controller when submitted.

MVVM (Model-View-ViewModel)

Overview:
MVVM standards for Model-View-ViewModel

it’s a design pattern that is commonly used not just in Android development,
but software development in general.
The purpose of any design pattern is to increase code understandability and
maintainability in the long-run through the reduction of tight coupling.
MVVM prevents memory licks – by Avoid using static variables for views or
context-related references
 Model (M): Holds the data that we display in the View. Often times,
this comes in the form of a database.
 View (V): Contains the UI of the application. Sends user requests to
the ViewModel and observes the ViewModel for any changes in the

Page 10 of 39
 application’s data—in Android, LiveData is the ViewModel’s data
storage that the View observes.
 ViewModel (VM): Connects the Model to the View and pulls and
updates data from the Model.
Example: Book Management Application using MVVM

1. Model (Book.cs):

Explanation: Same as in the MVC example, this class represents the data structure
for a book.

2. ViewModel (BooksViewModel.cs):

Page 11 of 39
Explanation:

 The BooksViewModel class manages the state of the view and

implements INotifyPropertyChanged to notify the view of changes.

 The AddBook method adds a new book to the list and clears the input fields.

3. Controller (BooksController.cs)

Page 12 of 39
Explanation:

 The BooksController initializes the BooksViewModel and returns it to the

view.

 The Add action calls the AddBook method on the ViewModel to handle
adding a new book.

4.View (Index.cshtml):

Explanation:

 The view binds to the properties of the BooksViewModel, allowing automatic

updates when properties change.

 When the form is submitted, the ViewModel's properties are used to add a
new book.

Summary of Differences

Page 13 of 39
 Feature MVC MVVM

Three components (Model, View,

Three distinct components
Structure ViewModel) with automatic
(Model, View, Controller)
binding

Data Manual updates of the view Automatic binding through the

Binding from the controller ViewModel

Common in ASP.NET web Useful in applications with rich UIs

Usage
applications (e.g., Blazor)

Can become complex with Easier to manage complex UI states

Complexity
multiple controllers with data binding

creating a project with ASP.NET MVC as a priority.

Example 1: using MVM (writing hello world)

🌟 Step 1: Open Visual Studio and select “Create a new project.”

Page 14 of 39
🌟 Step 2: Choose “ASP.NET Web Application (.NET Framework)” on the opened
screen.

🌟 Step 3: Specify the project name, location to save, solution name, and .NET
Framework version to be used.

Page 15 of 39
🌟 Step 4: Select MVC on the opened screen.

🌟🌟 Step 5: Now, an ASP.NET MVC project has been created.

🌟 Step 6: Right-click on the Controller folder in the Solution Explorer. Select Add ->
Controller.

Page 16 of 39
🌟 Step 7: Choose “MVC Controller Empty” on the opened screen.

Page 17 of 39
🌟 Step 8: Give a name to the Controller to be created. Click “Add” to proceed.

🌟🌟 Step 9: Our controller with the default Index action is now created.

Page 18 of 39
🌟 Step 10: Right-click on Index and select “Add View.”

Page 19 of 39
🌟 Step 11: Choose “MVC View” option.

Page 20 of 39
🌟 Step 12: Specify the properties of the view to be created and click “Add.”

🌟🌟 Step 13: Index View is now created.

Page 21 of 39
🌟🌟🌟 Step 14: “Hello World”

Example 2: using MVVM in ASP.NET framework

MVVM is a pattern to separate the logic of the app from the view. So you can, for
example, write the logic compatible with Android, IOS and web separately and use
the same view for all of them.
..and what is DotVVM?

DotVVM is a ASP.NET framework that allows us to create web applications using

the MVVM (Model-View-Viewmodel) design pattern with C# and HTML.

In DotVVM, every page consists of two files:

 a view, which is based on the HTML syntax and describes what the page will
look like, and…
 a viewmodel, which is a C# class that describes the state of the page (e.g.
values in the form fields) and handles user interactions (e.g. button clicks).

Page 22 of 39
DotVVM was originally designed to be used only with ASP.NET together with
Microsoft Framework, but given the appearance of .NET Core, DotVVM was
adapted in its version 2.0 to be used together with .NET Core.
Pre-Requisites

 Visual Studio 2019 16.4 or later with the ASP.NET and web
development workload

 .NET Core 3.1 SDK or later

 DotVVM 2.0 or later

Step 1: Open Visual Studio and Create DotVVM Web Application (.Net Core)

Step 2: Select the last .NET Core version and click on “Create Project”

You can see that you have the options to add boostrap and jquery styles and you
even have example CRUD projects. For the purposes of this introduction, we will not
use them, but we will see them later in other tutorials.

Page 23 of 39
You will see that in project there is the ViewModels folder, with the models, a
masterpage and a view.

Page 24 of 39
Step 2: Add/Update a Model Class

In this case, for the example we are going to create a two number sum calculator. We
are going to modify the DefaultViewModel by adding three parameters, two for the
numbers and one for the result. We also added a function that performs the addition,
allowing the user to specify its precision, that is, the decimals of the sum.

public double Number1 { get; set;}public double Number2 { get; set; }public double
Result { get; set; }public void Calculate(int precision)
{
Result = Math.Round(Number1 + Number2, precision);
}

Step 2: Add/Update a View

We add the textbox for the user to enter the numbers, the possibility of displaying
the result, calling the Result variable and a button to execute the operation, in this
case with precision 2.

Page 25 of 39
<form>
<span>
<dot:TextBox Text="{{value: Number1}}" ValueType="Number" />

+
<dot:TextBox Text="{{value: Number2}}" ValueType="Number" />
=
{{value: Result}}</span>
<dot:Button Text="Calculate" Click="{command: Calculate(2)}" />
</form>

Step 3: Compile, Run and Test

If you run it and test it, you can see that it does the addition without problems, but it
doesn’t look like a website itself. For this, it is necessary to update the MasterPage.

Step 3: Update the MasterPage.dotmaster

Add a header with an image logo (extenally reference works better than intenal
reference) and a navigation manu, containing the default page of the sum calculator
and we are going to add the “About” page for later. Also, add a container for the
title and a footer. The main content is already present.

<body>
<header>
<img src="https://www.quadiontech.com/img/logoNav.svg"/><nav>
<dot:RouteLink RouteName="Default" Text="Sum
Calculator"></dot:RouteLink>
<dot:RouteLink RouteName="About" Text="About"></dot:RouteLink>
</nav>
</header>

Page 26 of 39
 <main>
<h1>
<dot:ContentPlaceHolder ID="TitleContent" />
</h1>
<section>
<dot:ContentPlaceHolder ID="MainContent" />
</section>
</main>
<footer>
Sum Calculator @QuadionTech
</footer>
</body>

Step 3: Update the Title in the Default view

We do not have the title previously on the page by Default, so it is necessary to add
it.

<dot:Content ContentPlaceHolderID="TitleContent"> Sum

Calculator</dot:Content>

Step 4: Add the “About” view

Page 27 of 39
To add a DoVMM view, got to Views > Add > New Element

Search for the DotVMM Content, select DotVVM Page. Put the name “About” and
click on “Add”

Click Embed in Master Page and select Views / MasterPage.dotmaster in the Master
Page File option, to inherit its properties. Then click OK

Page 28 of 39
Add the Title and you can add your name in the Content

Step 5: Add Style to your site

First, we are going to add a Resources Folder in the project, for the style sheet. go the
the project, right click Add>New Folder and call it “Resources”.

Page 29 of 39
Second, do into Resource folder and add a new folder called “Stylesheets”. Then,
add a CSS sheet called “style.css”

Add this style to your style.css file

Page 30 of 39
@import
url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700&subset=l
atin-ext");
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
}* {
box-sizing: border-box;
transition: 0.4s ease;
}html {
font-size: 14px;
line-height: 1.5em;
height: 100%;
}body {
font-family: "Roboto", sans-serif;
color: #222;
margin: 0;
display: flex;
flex-flow: column wrap;
min-height: 100%;
background-color: #fff;
}body header {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px 20px;
background: #fff;
}body header > * {
margin-right: 0;

Page 31 of 39
 margin-bottom: 30px;
}body header > *:last-child {
margin-right: 0;
margin-bottom: 0;
}body main {
display: flex;
flex-direction: column;
flex: 1 0 auto;
align-items: center;
padding: 20px 20px;
}body main > * {
margin-right: 0;
margin-bottom: 30px;
}body main > *:last-child {
margin-right: 0;
margin-bottom: 0;
}body main > section {
display: flex;
flex-direction: column;
align-items: center;
}body main > section > * {
margin-right: 0;
margin-bottom: 20px;
}body main > section > *:last-child {
margin-right: 0;
margin-bottom: 0;
}body footer {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px 20px;
background: #f2f2f2;
border-top: 1px solid #ccc;
}body footer > * {
margin-right: 0;
margin-bottom: 10px;
}body footer > *:last-child {
margin-right: 0;
margin-bottom: 0;
}ol, ul {
list-style: none;
}table {
border-collapse: collapse;

Page 32 of 39
 border-spacing: 0;
}caption, th, td {
text-align: left;
font-weight: 200;
vertical-align: middle;
}q, blockquote {
quotes: none;
}q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none;
}a img {
border: none;
}h1 {
font-size: 24px;
font-family: "Roboto", sans-serif;
}h2 {
font-size: 18px;
font-family: "Roboto", sans-serif;
}h3 {
font-size: 15px;
font-family: "Roboto", sans-serif;
}h4 {
font-size: 18px;
font-family: "Roboto", sans-serif;
font-weight: 200;
}p, span {
font-family: "Roboto", sans-serif;
line-height: 1.5em;
}button, input[type=button], a {
min-width: 140px;
padding: 10px 15px;
background: #27bf89;
border: 0;
border-radius: 5px;
text-align: center;
color: #f2f2f2;
font-size: 14px;
text-decoration: none;
transition-property: background;
}button:hover, input[type=button]:hover, a:hover {
background: #2cd498;
}form {
display: flex;

Page 33 of 39
 flex-direction: column;
align-items: center;
}form > * {
margin-right: 0;
margin-bottom: 20px;
}form > *:last-child {
margin-right: 0;
margin-bottom: 0;
}input[type=text] {
border: 1px solid #ccc;
padding: 5px;
}label {
padding-right: 10px;
}table {
width: 400px;
border: 1px solid #ccc;
border-collapse: collapse;
}table th, table td {
border: 1px solid #ccc;
padding: 2.5px 5px;
}table th img, table td img {
width: 40px;
height: 40px;
}table th {
font-weight: bold;
}table + ul {
display: flex;
flex-direction: row;
}table + ul > * {
margin-right: 5px;
margin-bottom: 0;
}table + ul > *:last-child {
margin-right: 0;
margin-bottom: 0;
}table + ul li.disabled a {
background-color: #adadad;
}table + ul li.active span {
padding: 10px 15px;
background: #3176bb;
border: 0;
border-radius: 5px;
text-align: center;
color: #f2f2f2;

Page 34 of 39
 font-size: 14px;
text-decoration: none;
transition-property: background;
}nav {
display: flex;
flex-direction: row;
align-items: center;
padding: 10px 20px;
color: #f2f2f2;
font-weight: 500;
}nav > * {
margin-right: 20px;
margin-bottom: 0;
}nav > *:last-child {
margin-right: 0;
margin-bottom: 0;
}nav > * {
display: flex;
flex-direction: column;
justify-content: stretch;
}

Third, Add the file resource location for the style.css file in the dotvvmStartup inside
the ConfigureResource method

config.Resources.Register("style", new StylesheetResource(new

FileResourceLocation("~/Resources/Stylesheets/style.css")));

Fourth, add the Resource Required in the Head into the Master Page to use it.

<head>
<meta charset="utf-8" />
<title>DotvvmApp</title>
Page 35 of 39
 <dot:RequiredResource Name="style" />
</head></head>

Step 6: Compile, Run and Test your app

Page 36 of 39
Page 37 of 39
Reference materials

https://learn.microsoft.com/en-us/visualstudio/get-started/csharp/tutorial-
aspnet-core?view=vs-2022

Page 38 of 39
How to Create a Simple Login Form in ASP.NET using Visual Studio 2022? [With
Source Code]

https://www.youtube.com/watch?v=3XCBkpN1U40

CREATE and CONNECT DATABASES in ASP.NET\

https://www.youtube.com/watch?v=ZX12X-ALwGA&t=86s

Page 39 of 39