Skip to content

Commit a12547d

Browse files
ShubhamVerma-DeveloperShubhamVerma-Developer
committed
Build web apps with Blazor
1 parent 1115516 commit a12547d

File tree

194 files changed

+6420
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

194 files changed

+6420
-0
lines changed

‎.vscode/settings.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"dotnet.defaultSolution": "BlazorApp.sln"
3+
}

‎Build web apps with Blazor/unit 1 Introduction.md

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Introduction
2+
3+
Get ready to build your first Blazor web app! If you're looking to get started with web development using the power and flexibility of the .NET platform, then you're at the right place. Blazor is a modern frontend web framework based on HTML, CSS, and C# that helps you build web apps fast.
4+
5+
To get started building with Blazor, you first need to set up your development environment by installing the .NET SDK and a preferred code editor. You can then create your first Blazor web app project and start to learn the fundamentals of working with Blazor components.
6+
7+
In this module, you'll learn everything you need to know to set up your .NET development environment and get your first Blazor created and running in just a few minutes. You'll learn how to create and use components, how to turn a component into a page, and how to do basic event handling and data binding. You'll then use everything you learned to build a basic to-do list app.
8+
9+
By the end of this module you should have a working Blazor development environment, a basic understanding of Blazor components, and a running Blazor web app that you built yourself.

‎Build web apps with Blazor/unit 2 Configure your development environment.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Configure your development environment
2+
3+
- Configure your development environment

‎Build web apps with Blazor/unit 3 Exercise - Create and run a Blazor web app/.vs/unit 3 Exercise - Create and run a Blazor web app/DesignTimeBuild/.dtbcache.v2

144 KB
Binary file not shown.

‎Build web apps with Blazor/unit 3 Exercise - Create and run a Blazor web app/.vs/unit 3 Exercise - Create and run a Blazor web app/FileContentIndex/f6c87752-c1ef-444a-b120-a3d951c52042.vsidx

244 KB
Binary file not shown.

‎Build web apps with Blazor/unit 3 Exercise - Create and run a Blazor web app/.vs/unit 3 Exercise - Create and run a Blazor web app/config/applicationhost.config

+962
Large diffs are not rendered by default.

‎Build web apps with Blazor/unit 3 Exercise - Create and run a Blazor web app/.vs/unit 3 Exercise - Create and run a Blazor web app/v17/.futdcache.v2

221 Bytes
Binary file not shown.

‎Build web apps with Blazor/unit 3 Exercise - Create and run a Blazor web app/.vs/unit 3 Exercise - Create and run a Blazor web app/v17/.suo

17 KB
Binary file not shown.

‎Build web apps with Blazor/unit 3 Exercise - Create and run a Blazor web app/Components/App.razor

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<base href="/" />
8+
<link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
9+
<link rel="stylesheet" href="app.css" />
10+
<link href="~/app.css" rel="stylesheet" />
11+
<link rel="stylesheet" href="unit 3 Exercise - Create and run a Blazor web app.styles.css" />
12+
<link rel="icon" type="image/png" href="favicon.png" />
13+
<HeadOutlet />
14+
</head>
15+
16+
<body>
17+
<Routes />
18+
<script src="_framework/blazor.web.js"></script>
19+
</body>
20+
21+
</html>

‎Build web apps with Blazor/unit 3 Exercise - Create and run a Blazor web app/Components/Layout/MainLayout.razor

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
@inherits LayoutComponentBase
2+
3+
<div class="page">
4+
<div class="sidebar">
5+
<NavMenu />
6+
</div>
7+
8+
<main>
9+
<div class="top-row px-4">
10+
<a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
11+
</div>
12+
13+
<article class="content px-4">
14+
@Body
15+
</article>
16+
</main>
17+
</div>
18+
19+
<div id="blazor-error-ui">
20+
An unhandled error has occurred.
21+
<a href="" class="reload">Reload</a>
22+
<a class="dismiss">🗙</a>
23+
</div>

‎Build web apps with Blazor/unit 3 Exercise - Create and run a Blazor web app/Components/Layout/MainLayout.razor.css

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
.page {
2+
position: relative;
3+
display: flex;
4+
flex-direction: column;
5+
}
6+
7+
main {
8+
flex: 1;
9+
}
10+
11+
.sidebar {
12+
background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
13+
}
14+
15+
.top-row {
16+
background-color: #f7f7f7;
17+
border-bottom: 1px solid #d6d5d5;
18+
justify-content: flex-end;
19+
height: 3.5rem;
20+
display: flex;
21+
align-items: center;
22+
}
23+
24+
.top-row ::deep a, .top-row ::deep .btn-link {
25+
white-space: nowrap;
26+
margin-left: 1.5rem;
27+
text-decoration: none;
28+
}
29+
30+
.top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
31+
text-decoration: underline;
32+
}
33+
34+
.top-row ::deep a:first-child {
35+
overflow: hidden;
36+
text-overflow: ellipsis;
37+
}
38+
39+
@media (max-width: 640.98px) {
40+
.top-row {
41+
justify-content: space-between;
42+
}
43+
44+
.top-row ::deep a, .top-row ::deep .btn-link {
45+
margin-left: 0;
46+
}
47+
}
48+
49+
@media (min-width: 641px) {
50+
.page {
51+
flex-direction: row;
52+
}
53+
54+
.sidebar {
55+
width: 250px;
56+
height: 100vh;
57+
position: sticky;
58+
top: 0;
59+
}
60+
61+
.top-row {
62+
position: sticky;
63+
top: 0;
64+
z-index: 1;
65+
}
66+
67+
.top-row.auth ::deep a:first-child {
68+
flex: 1;
69+
text-align: right;
70+
width: 0;
71+
}
72+
73+
.top-row, article {
74+
padding-left: 2rem !important;
75+
padding-right: 1.5rem !important;
76+
}
77+
}
78+
79+
#blazor-error-ui {
80+
background: lightyellow;
81+
bottom: 0;
82+
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
83+
display: none;
84+
left: 0;
85+
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
86+
position: fixed;
87+
width: 100%;
88+
z-index: 1000;
89+
}
90+
91+
#blazor-error-ui .dismiss {
92+
cursor: pointer;
93+
position: absolute;
94+
right: 0.75rem;
95+
top: 0.5rem;
96+
}

‎Build web apps with Blazor/unit 3 Exercise - Create and run a Blazor web app/Components/Layout/NavMenu.razor

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<div class="top-row ps-3 navbar navbar-dark">
2+
<div class="container-fluid">
3+
<a class="navbar-brand" href="">unit 3 Exercise - Create and run a Blazor web app</a>
4+
</div>
5+
</div>
6+
7+
<input type="checkbox" title="Navigation menu" class="navbar-toggler" />
8+
9+
<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
10+
<nav class="flex-column">
11+
<div class="nav-item px-3">
12+
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
13+
<span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
14+
</NavLink>
15+
</div>
16+
17+
<div class="nav-item px-3">
18+
<NavLink class="nav-link" href="counter">
19+
<span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Counter
20+
</NavLink>
21+
</div>
22+
23+
<div class="nav-item px-3">
24+
<NavLink class="nav-link" href="weather">
25+
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Weather
26+
</NavLink>
27+
</div>
28+
</nav>
29+
</div>
30+

‎Build web apps with Blazor/unit 3 Exercise - Create and run a Blazor web app/Components/Layout/NavMenu.razor.css

+105
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
.navbar-toggler {
2+
appearance: none;
3+
cursor: pointer;
4+
width: 3.5rem;
5+
height: 2.5rem;
6+
color: white;
7+
position: absolute;
8+
top: 0.5rem;
9+
right: 1rem;
10+
border: 1px solid rgba(255, 255, 255, 0.1);
11+
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
12+
}
13+
14+
.navbar-toggler:checked {
15+
background-color: rgba(255, 255, 255, 0.5);
16+
}
17+
18+
.top-row {
19+
height: 3.5rem;
20+
background-color: rgba(0,0,0,0.4);
21+
}
22+
23+
.navbar-brand {
24+
font-size: 1.1rem;
25+
}
26+
27+
.bi {
28+
display: inline-block;
29+
position: relative;
30+
width: 1.25rem;
31+
height: 1.25rem;
32+
margin-right: 0.75rem;
33+
top: -1px;
34+
background-size: cover;
35+
}
36+
37+
.bi-house-door-fill-nav-menu {
38+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
39+
}
40+
41+
.bi-plus-square-fill-nav-menu {
42+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
43+
}
44+
45+
.bi-list-nested-nav-menu {
46+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
47+
}
48+
49+
.nav-item {
50+
font-size: 0.9rem;
51+
padding-bottom: 0.5rem;
52+
}
53+
54+
.nav-item:first-of-type {
55+
padding-top: 1rem;
56+
}
57+
58+
.nav-item:last-of-type {
59+
padding-bottom: 1rem;
60+
}
61+
62+
.nav-item ::deep .nav-link {
63+
color: #d7d7d7;
64+
background: none;
65+
border: none;
66+
border-radius: 4px;
67+
height: 3rem;
68+
display: flex;
69+
align-items: center;
70+
line-height: 3rem;
71+
width: 100%;
72+
}
73+
74+
.nav-item ::deep a.active {
75+
background-color: rgba(255,255,255,0.37);
76+
color: white;
77+
}
78+
79+
.nav-item ::deep .nav-link:hover {
80+
background-color: rgba(255,255,255,0.1);
81+
color: white;
82+
}
83+
84+
.nav-scrollable {
85+
display: none;
86+
}
87+
88+
.navbar-toggler:checked ~ .nav-scrollable {
89+
display: block;
90+
}
91+
92+
@media (min-width: 641px) {
93+
.navbar-toggler {
94+
display: none;
95+
}
96+
97+
.nav-scrollable {
98+
/* Never collapse the sidebar for wide screens */
99+
display: block;
100+
101+
/* Allow sidebar to scroll for tall menus */
102+
height: calc(100vh - 3.5rem);
103+
overflow-y: auto;
104+
}
105+
}

‎Build web apps with Blazor/unit 3 Exercise - Create and run a Blazor web app/Components/Pages/Counter.razor

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
@page "/counter"
2+
@rendermode InteractiveServer
3+
4+
<PageTitle>Counter</PageTitle>
5+
6+
<h1>Counter</h1>
7+
8+
<p role="status">Current count: @currentCount</p>
9+
10+
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
11+
12+
@code {
13+
private int currentCount = 0;
14+
15+
private void IncrementCount()
16+
{
17+
currentCount++;
18+
}
19+
}

‎Build web apps with Blazor/unit 3 Exercise - Create and run a Blazor web app/Components/Pages/Error.razor

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
@page "/Error"
2+
@using System.Diagnostics
3+
4+
<PageTitle>Error</PageTitle>
5+
6+
<h1 class="text-danger">Error.</h1>
7+
<h2 class="text-danger">An error occurred while processing your request.</h2>
8+
9+
@if (ShowRequestId)
10+
{
11+
<p>
12+
<strong>Request ID:</strong> <code>@RequestId</code>
13+
</p>
14+
}
15+
16+
<h3>Development Mode</h3>
17+
<p>
18+
Swapping to <strong>Development</strong> environment will display more detailed information about the error that occurred.
19+
</p>
20+
<p>
21+
<strong>The Development environment shouldn't be enabled for deployed applications.</strong>
22+
It can result in displaying sensitive information from exceptions to end users.
23+
For local debugging, enable the <strong>Development</strong> environment by setting the <strong>ASPNETCORE_ENVIRONMENT</strong> environment variable to <strong>Development</strong>
24+
and restarting the app.
25+
</p>
26+
27+
@code{
28+
[CascadingParameter]
29+
private HttpContext? HttpContext { get; set; }
30+
31+
private string? RequestId { get; set; }
32+
private bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
33+
34+
protected override void OnInitialized() =>
35+
RequestId = Activity.Current?.Id ?? HttpContext?.TraceIdentifier;
36+
}

‎Build web apps with Blazor/unit 3 Exercise - Create and run a Blazor web app/Components/Pages/Home.razor

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@page "/"
2+
3+
<PageTitle>Home</PageTitle>
4+
5+
<h1>Hello, world!</h1>
6+
7+
Welcome to your new app.

0 commit comments

Comments
 (0)