Lesson 6 Introduction and First ASP.net Applications (1)
Lesson 6 Introduction and First ASP.net Applications (1)
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
4. MVC Architecture:
5. Web API:
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:
8. Cross-Platform:
Page 1 of 39
9. Performance and Scalability:
2. ASP.NET MVC:
4. ASP.NET Core:
Page 2 of 39
Before we move on to creating projects, let’s get to know ASP.NET MVC and
the code base more manageable. It provides developers with the flexibility to
components. ASP.NET Core MVC stands out with its ability to work on
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:
3. View Engine:
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:
Example:
@model List<string>
<h1>Book List</h1>
<ul>
@foreach (var book in Model)
Page 4 of 39
{
<li>@book</li>
</ul>
Blazor
Overview:
Key Features:
1. Component-Based Architecture:
5. File Extensions:
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
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)
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.
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 AddBook method adds a new book to the list and clears the input fields.
3. Controller (BooksController.cs)
Page 12 of 39
Explanation:
The Add action calls the AddBook method on the ViewModel to handle
adding a new book.
4.View (Index.cshtml):
Explanation:
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
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 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.”
Page 21 of 39
🌟🌟🌟 Step 14: “Hello World”
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?
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
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);
}
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>
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.
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>
We do not have the title previously on the page by Default, so it is necessary to add
it.
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
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”
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
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>
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
https://www.youtube.com/watch?v=ZX12X-ALwGA&t=86s
Page 39 of 39