├── BlazorCrud
    ├── Pages
    │   ├── Layouts
    │   │   ├── EmptyLayout.razor
    │   │   └── MainLayout.razor
    │   ├── Components
    │   │   ├── NavMenu.razor
    │   │   ├── RandomNumber.razor
    │   │   └── FlashMessages.razor
    │   ├── Routes.razor
    │   ├── _Imports.razor
    │   ├── App.razor
    │   ├── Contacts
    │   │   ├── List.razor
    │   │   ├── Create.razor
    │   │   ├── ContactsTable.razor
    │   │   └── Edit.razor
    │   └── Home
    │   │   └── Index.razor
    ├── wwwroot
    │   ├── favicon.png
    │   └── app.css
    ├── appsettings.Development.json
    ├── appsettings.json
    ├── BlazorCrud.csproj
    ├── Lib
    │   └── Extensions
    │   │   └── SessionExtensions.cs
    ├── Data
    │   └── Database.cs
    ├── Program.cs
    └── Properties
    │   └── launchSettings.json
├── BlazorCrud.sln
├── .gitattributes
└── .gitignore


/BlazorCrud/Pages/Layouts/EmptyLayout.razor:
--------------------------------------------------------------------------------
1 | @inherits LayoutComponentBase
2 | 
3 | @Body


--------------------------------------------------------------------------------
/BlazorCrud/wwwroot/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/westonwalker/BlazorSsrCrud/HEAD/BlazorCrud/wwwroot/favicon.png


--------------------------------------------------------------------------------
/BlazorCrud/appsettings.Development.json:
--------------------------------------------------------------------------------
1 | {
2 |   "Logging": {
3 |     "LogLevel": {
4 |       "Default": "Information",
5 |       "Microsoft.AspNetCore": "Warning"
6 |     }
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/BlazorCrud/appsettings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "Logging": {
 3 |     "LogLevel": {
 4 |       "Default": "Information",
 5 |       "Microsoft.AspNetCore": "Warning"
 6 |     }
 7 |   },
 8 |   "AllowedHosts": "*"
 9 | }
10 | 


--------------------------------------------------------------------------------
/BlazorCrud/Pages/Components/NavMenu.razor:
--------------------------------------------------------------------------------
1 | <div class="w-full bg-white px-12 py-4">
2 |     <div class="flex justify-between items-center w-full max-w-6xl mx-auto">
3 |         <a href="/" class="text-sm font-medium">Contact Manager</a>
4 |         <p class="text-sm">John Doe</p>
5 |     </div>
6 | </div>


--------------------------------------------------------------------------------
/BlazorCrud/Pages/Routes.razor:
--------------------------------------------------------------------------------
1 | <Router AppAssembly="@typeof(Program).Assembly">
2 |     <Found Context="routeData">
3 |         <RouteView RouteData="@routeData" DefaultLayout="@typeof(Layouts.MainLayout)" />
4 |         <FocusOnNavigate RouteData="@routeData" Selector="h1" />
5 |     </Found>
6 | </Router>
7 | 


--------------------------------------------------------------------------------
/BlazorCrud/Pages/Layouts/MainLayout.razor:
--------------------------------------------------------------------------------
 1 | @inherits LayoutComponentBase
 2 | 
 3 | <div class="bg-gray-100 flex flex-col h-screen">
 4 |     <NavMenu />
 5 |     <div class="flex flex-grow py-20 px-12">
 6 |         <div class="max-w-6xl mx-auto  w-full">
 7 |             @Body
 8 |         </div>
 9 |     </div>
10 | </div>


--------------------------------------------------------------------------------
/BlazorCrud/Pages/Components/RandomNumber.razor:
--------------------------------------------------------------------------------
 1 | @page "/components/random-number"
 2 | @layout EmptyLayout
 3 | 
 4 | <div hx-get="/components/random-number" hx-trigger="every 2s" hx-swap="outerHTML">
 5 | 	<h4 class="text-orange-500 font-medium">Random Number is @Num</h4>
 6 | </div>
 7 | 
 8 | @code {
 9 | 	private int Num { get; set; }
10 | 
11 | 	protected override void OnInitialized()
12 | 	{
13 | 		Random rnd = new Random();
14 | 		Num = rnd.Next();
15 | 	}
16 | }


--------------------------------------------------------------------------------
/BlazorCrud/BlazorCrud.csproj:
--------------------------------------------------------------------------------
 1 | <Project Sdk="Microsoft.NET.Sdk.Web">
 2 | 
 3 |   <PropertyGroup>
 4 |     <TargetFramework>net8.0</TargetFramework>
 5 |     <Nullable>enable</Nullable>
 6 |     <ImplicitUsings>enable</ImplicitUsings>
 7 |   </PropertyGroup>
 8 | 
 9 |   <ItemGroup>
10 |     <None Remove="Pages\Home\Index.razor.js" />
11 |   </ItemGroup>
12 | 
13 |   <ItemGroup>
14 |     <Content Include="Pages\Home\Index.razor.js" />
15 |   </ItemGroup>
16 | 
17 | </Project>
18 | 


--------------------------------------------------------------------------------
/BlazorCrud/Pages/_Imports.razor:
--------------------------------------------------------------------------------
 1 | @using System.Net.Http
 2 | @using System.Net.Http.Json
 3 | @using Microsoft.AspNetCore.Components.Forms
 4 | @using Microsoft.AspNetCore.Components.Routing
 5 | @using Microsoft.AspNetCore.Components.Web
 6 | @using static Microsoft.AspNetCore.Components.Web.RenderMode
 7 | @using Microsoft.AspNetCore.Components.Web.Virtualization
 8 | @using Microsoft.JSInterop
 9 | @using BlazorCrud
10 | @using BlazorCrud.Pages
11 | @using BlazorCrud.Pages.Components
12 | @using BlazorCrud.Pages.Layouts
13 | @using BlazorCrud.Data
14 | @using System.ComponentModel.DataAnnotations
15 | @using BlazorCrud.Lib.Extensions
16 | 


--------------------------------------------------------------------------------
/BlazorCrud/Pages/App.razor:
--------------------------------------------------------------------------------
 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="app.css" />
 9 |     <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
10 |     <script src="https://unpkg.com/htmx.org@1.9.9"></script>
11 |     <link rel="icon" type="image/png" href="favicon.png" />
12 |     <HeadOutlet />
13 | </head>
14 | 
15 | <body hx-boost="true">
16 |     <Routes />
17 |   @*   <script src="_framework/blazor.web.js"></script> *@
18 | </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/BlazorCrud/Lib/Extensions/SessionExtensions.cs:
--------------------------------------------------------------------------------
 1 | namespace BlazorCrud.Lib.Extensions;
 2 | 
 3 | public static class SessionExtensions
 4 | {
 5 | 	public static void SetFlash(this HttpContext context, string key, string value)
 6 | 	{
 7 | 		context.Session.SetString(key, value);
 8 | 	}
 9 | 
10 | 	public static string? GetFlash(this HttpContext context, string key)
11 | 	{
12 | 		string? message = context.Session.GetString(key);
13 | 		context.Session.Remove(key);
14 | 		return message;
15 |     }
16 | 
17 |     public static bool HasKey(this HttpContext context, string key)
18 |     {
19 |         string? message = context.Session.GetString(key);
20 |         return string.IsNullOrEmpty(message) ? false : true;
21 |     }
22 | }
23 | 


--------------------------------------------------------------------------------
/BlazorCrud/Data/Database.cs:
--------------------------------------------------------------------------------
 1 | using System.ComponentModel.DataAnnotations;
 2 | 
 3 | namespace BlazorCrud.Data;
 4 | 
 5 | public static class Database
 6 | {
 7 |     public static List<Contact> Contacts = new()
 8 |     { 
 9 |         new Contact { Id = 1, Name = "Kramer", Email = "kramer@gmail.com", City = "New York", Phone = "3927374545" },
10 | 		new Contact { Id = 2, Name = "Jerry", Email = "Jerry@gmail.com", City = "Queens", Phone = "3954563237" }
11 | 	};
12 | 
13 | }
14 | 
15 | public class Contact
16 | {
17 |     public int Id { get; set; }
18 |     [Required] public string Name { get; set; }
19 | 	[Required] public string Email { get; set; }
20 | 	[Required] public string City { get; set; }
21 | 	[Required] public string Phone { get; set; }
22 | }
23 | 


--------------------------------------------------------------------------------
/BlazorCrud/Pages/Contacts/List.razor:
--------------------------------------------------------------------------------
 1 | @page "/contacts"
 2 | <PageTitle>Contacts</PageTitle>
 3 | 
 4 | <h1 class="mb-8 text-3xl font-bold">
 5 | 	Contacts
 6 | </h1>
 7 | <div class="flex items-center justify-between mb-6">
 8 | 	<div class="">
 9 | 		<input type="text" class="relative px-6 py-3 w-full rounded shadow focus:shadow-outline border-none" name="ContactSearch" id="ContactSearch" placeholder="Search..." hx-get="/contacts/search" hx-target="#contact-list" hx-trigger="keyup delay:500ms changed" />
10 | 	</div>
11 | 	<a href="/contacts/create" class="px-4 py-3 font-medium rounded bg-blue-500 hover:bg-blue-600 text-white transition">Add contact</a>
12 | </div>
13 | 
14 | <div>
15 | 	<div id="contact-list">
16 | 		<ContactsTable />
17 | 	</div>
18 | </div>
19 | 


--------------------------------------------------------------------------------
/BlazorCrud/Program.cs:
--------------------------------------------------------------------------------
 1 | using BlazorCrud.Pages;
 2 | 
 3 | var builder = WebApplication.CreateBuilder(args);
 4 | 
 5 | // Add services to the container.
 6 | builder.Services.AddRazorComponents();
 7 | builder.Services.AddDistributedMemoryCache();
 8 | builder.Services.AddSession(options => {
 9 |     options.Cookie.Name = ".blazorcrud";
10 |     options.IdleTimeout = TimeSpan.FromMinutes(1);
11 | });
12 | 
13 | var app = builder.Build();
14 | 
15 | // Configure the HTTP request pipeline.
16 | if (!app.Environment.IsDevelopment())
17 | {
18 | 	app.UseExceptionHandler("/Error", createScopeForErrors: true);
19 | 	// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
20 | 	app.UseHsts();
21 | }
22 | 
23 | app.UseHttpsRedirection();
24 | 
25 | app.UseStaticFiles();
26 | app.UseSession();
27 | app.UseAntiforgery();
28 | 
29 | app.MapRazorComponents<App>();
30 | 
31 | app.Run();
32 | 


--------------------------------------------------------------------------------
/BlazorCrud/Pages/Components/FlashMessages.razor:
--------------------------------------------------------------------------------
 1 | @code {
 2 |     [CascadingParameter]
 3 |     public HttpContext Context { get; set; }
 4 | }
 5 | @if (Context.HasKey("success"))
 6 | {
 7 |     <div class="my-6 p-6 bg-green-100 font-medium text-green-700 border border-green-700 rounded max-w-3xl">
 8 |         @Context.GetFlash("success")
 9 |     </div>
10 | }
11 | @if (Context.HasKey("info"))
12 | {
13 |     <div class="my-6 p-6 bg-blue-100 font-medium text-blue-700 border border-blue-700 rounded max-w-3xl">
14 |         @Context.GetFlash("info")
15 |     </div>
16 | }
17 | @if (Context.HasKey("warning"))
18 | {
19 |     <div class="my-6 p-6 bg-yellow-100 font-medium text-yellow-700 border border-yellow-700 rounded max-w-3xl">
20 |         @Context.GetFlash("warning")
21 |     </div>
22 | }
23 | @if (Context.HasKey("error"))
24 | {
25 |     <div class="my-6 p-6 bg-red-100 font-medium text-red-700 border border-red-700 rounded max-w-3xl">
26 |         @Context.GetFlash("error")
27 |     </div>
28 | }


--------------------------------------------------------------------------------
/BlazorCrud.sln:
--------------------------------------------------------------------------------
 1 | 
 2 | Microsoft Visual Studio Solution File, Format Version 12.00
 3 | # Visual Studio Version 17
 4 | VisualStudioVersion = 17.8.34316.72
 5 | MinimumVisualStudioVersion = 10.0.40219.1
 6 | Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BlazorCrud", "BlazorCrud\BlazorCrud.csproj", "{8655E485-64A7-400F-8D91-06651A828D58}"
 7 | EndProject
 8 | Global
 9 | 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
10 | 		Debug|Any CPU = Debug|Any CPU
11 | 		Release|Any CPU = Release|Any CPU
12 | 	EndGlobalSection
13 | 	GlobalSection(ProjectConfigurationPlatforms) = postSolution
14 | 		{8655E485-64A7-400F-8D91-06651A828D58}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
15 | 		{8655E485-64A7-400F-8D91-06651A828D58}.Debug|Any CPU.Build.0 = Debug|Any CPU
16 | 		{8655E485-64A7-400F-8D91-06651A828D58}.Release|Any CPU.ActiveCfg = Release|Any CPU
17 | 		{8655E485-64A7-400F-8D91-06651A828D58}.Release|Any CPU.Build.0 = Release|Any CPU
18 | 	EndGlobalSection
19 | 	GlobalSection(SolutionProperties) = preSolution
20 | 		HideSolutionNode = FALSE
21 | 	EndGlobalSection
22 | 	GlobalSection(ExtensibilityGlobals) = postSolution
23 | 		SolutionGuid = {AE5767F3-19F2-4218-AB8C-C1AB74480062}
24 | 	EndGlobalSection
25 | EndGlobal
26 | 


--------------------------------------------------------------------------------
/BlazorCrud/Properties/launchSettings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "http://json.schemastore.org/launchsettings.json",
 3 |     "iisSettings": {
 4 |       "windowsAuthentication": false,
 5 |       "anonymousAuthentication": true,
 6 |       "iisExpress": {
 7 |         "applicationUrl": "http://localhost:7170",
 8 |         "sslPort": 44360
 9 |       }
10 |     },
11 |     "profiles": {
12 |       "http": {
13 |         "commandName": "Project",
14 |         "dotnetRunMessages": true,
15 |         "launchBrowser": true,
16 |         "applicationUrl": "http://localhost:5118",
17 |         "environmentVariables": {
18 |           "ASPNETCORE_ENVIRONMENT": "Development"
19 |         }
20 |       },
21 |       "https": {
22 |         "commandName": "Project",
23 |         "dotnetRunMessages": true,
24 |         "launchBrowser": true,
25 |         "applicationUrl": "https://localhost:7001;http://localhost:5118",
26 |         "environmentVariables": {
27 |           "ASPNETCORE_ENVIRONMENT": "Development"
28 |         }
29 |       },
30 |       "IIS Express": {
31 |         "commandName": "IISExpress",
32 |         "launchBrowser": true,
33 |         "environmentVariables": {
34 |           "ASPNETCORE_ENVIRONMENT": "Development"
35 |         }
36 |       }
37 |     }
38 |   }
39 | 


--------------------------------------------------------------------------------
/BlazorCrud/wwwroot/app.css:
--------------------------------------------------------------------------------
 1 | .validation-message {
 2 |     color: #e50000;
 3 | }
 4 | 
 5 | .blazor-error-boundary {
 6 |     background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
 7 |     padding: 1rem 1rem 1rem 3.7rem;
 8 |     color: white;
 9 | }
10 | 
11 | .blazor-error-boundary::after {
12 |     content: "An error has occurred."
13 | }
14 | 
15 | .darker-border-checkbox.form-check-input {
16 |     border-color: #929292;
17 | }
18 | 


--------------------------------------------------------------------------------
/BlazorCrud/Pages/Home/Index.razor:
--------------------------------------------------------------------------------
 1 | @page "/"
 2 | 
 3 | <PageTitle>Home</PageTitle>
 4 | 
 5 | <div class="space-y-4">
 6 | 	<h1 class="text-3xl font-bold">
 7 | 		Welcome to the contact manager
 8 | 	</h1>
 9 | 	<p>This is a demo on how to use Minimal APIs + Razor Components + HTMX to create dynamic server side rendered apps.</p>
10 | 	<a href="/contacts" class="text-blue-500 hover:underline">Explore the crud example</a>
11 | 	<p>
12 | 		You can check out the repo <a class="text-blue-500 hover:underline" href="https://github.com/westonwalker/BlazorMinimalAPI" target="_blank">here</a>
13 | 	</p>
14 | 	<p>
15 | 		Using Minimal APIs and Razor components is possible because of a new class in .NET 8: <span class="font-bold">RazorComponentResult</span>
16 | 	</p>
17 | 	<p>This returns an IResult after initializing a Razor component, making it possible to use Razor components in Minimal APIs.</p>
18 | 	<h3 class="text-lg font-bold">
19 | 		Requirements
20 | 	</h3>
21 | 	<p>
22 | 		Requires .NET 8 RC1 installed.
23 | 	</p>
24 | 	<h2 class="text-xl font-bold">
25 | 		Partial page reload on navigation with hx-boost
26 | 	</h2>
27 | 	<p>
28 | 		The HTMX attribute hx-boost turns internal links into ajax calls. This speeds up site speed since there are no full page reloads. You can opt in and out of this behavior on a link by link basis.
29 | 	</p>
30 | 	<p>
31 | 		This app uses hx-boost on the body tag, turning on this functionality for all links.
32 | 	</p>
33 | 	<h2 class="text-xl font-bold">
34 | 		Get and Post requests with hx-get and hx-post
35 | 	</h2>
36 | 	<p>
37 | 		The HTMX attributes hx-get and hx-post sets up ajax calls to endpoints and swaps html on the page with what was returned.
38 | 	</p>
39 | 	<p>
40 | 		This is useful for submitting forms, searching tables, and modifying the dom from a user interaction on the page.
41 | 	</p>
42 | 	<h2 class="text-xl font-bold">
43 | 		Polling
44 | 	</h2>
45 | 	<p>
46 | 		The HTMX attribute hx-trigger can be used to poll the server. This can setup ajax calls to endpoints at an interval and swap html on the page with what was returned.
47 | 	</p>
48 | 	<p>
49 | 		Below is random number generator.
50 | 	</p>
51 | 	<RandomNumber />
52 | 	<p>
53 | 		HTMX calls <span class="font-medium">/random-number</span> every 2s and replaces the html with the html returned by the endpoint.
54 | 	</p>
55 | </div>
56 | 


--------------------------------------------------------------------------------
/BlazorCrud/Pages/Contacts/Create.razor:
--------------------------------------------------------------------------------
 1 | @page "/contacts/create"
 2 | 
 3 | <PageTitle>Add contacts</PageTitle>
 4 | 
 5 | <h1 class="mb-8 text-3xl font-bold">
 6 | 	<a href="/contacts" class="text-blue-500 hover:text-blue-600">
 7 | 		Contacts
 8 | 	</a>
 9 | 	<span class="text-blue-500 font-medium">/</span>
10 | 	Create
11 | </h1>
12 | <FlashMessages />
13 | 
14 | <div class="max-w-3xl bg-white rounded-md shadow overflow-hidden">
15 | 	<h2 class="text-lg font-semibold pt-8 pl-8">Create Contact</h2>
16 | 	<EditForm method="post" Model="Form" OnValidSubmit="CreateContact" FormName="test" Enhance>
17 | 		<DataAnnotationsValidator />
18 | 		<div class="flex flex-wrap -mb-8 -mr-6 p-8">
19 | 			<div class="pb-8 pr-6 w-full lg:w-1/2 space-y-2">
20 | 				<label for="name">Title</label>
21 | 				<InputText id="name" @bind-Value="Form.Name" class="relative px-6 py-3 w-full rounded border-gray-300" />
22 | 				<ValidationMessage For="() => Form.Name" />
23 | 			</div>
24 | 			<div class="pb-8 pr-6 w-full lg:w-1/2 space-y-2">
25 | 				<label for="email">Email</label>
26 | 				<InputText type="email" id="email" @bind-Value="Form.Email" class="relative px-6 py-3 w-full rounded border-gray-300" />
27 | 				<ValidationMessage For="() => Form.Email" />
28 | 			</div>
29 | 			<div class="pb-8 pr-6 w-full lg:w-1/2 space-y-2">
30 | 				<label for="city">City</label>
31 | 				<InputText id="city" @bind-Value="Form.City" class="relative px-6 py-3 w-full rounded border-gray-300" />
32 | 				<ValidationMessage For="() => Form.City" />
33 | 			</div>
34 | 			<div class="pb-8 pr-6 w-full lg:w-1/2 space-y-2">
35 | 				<label for="phone">Phone</label>
36 | 				<InputText id="phone" @bind-Value="Form.Phone" class="relative px-6 py-3 w-full rounded border-gray-300" />
37 | 				<ValidationMessage For="() => Form.Phone" />
38 | 			</div>
39 | 		</div>
40 | 		<div class="flex items-center justify-end px-8 py-4 bg-gray-50 border-t border-gray-100">
41 | 			<button class="px-4 py-2 font-medium rounded bg-blue-500 hover:bg-blue-600 text-white transition" type="submit">
42 | 				Save
43 | 			</button>
44 | 		</div>
45 | 	</EditForm>
46 | </div>
47 | 
48 | @code {
49 | 	[SupplyParameterFromForm]
50 | 	public Contact Form { get; set; } = new();
51 | 	[Inject]
52 | 	public NavigationManager Nav { get; set; }
53 | 	[CascadingParameter]
54 | 	public HttpContext Context { get; set; }
55 | 
56 | 	public void CreateContact()
57 | 	{
58 | 		Form.Id = Database.Contacts.Count() + 1;
59 | 		Database.Contacts.Add(Form);
60 | 		Context.SetFlash("success", "Contact created");
61 | 		Nav.NavigateTo("/contacts/create");
62 | 	}
63 | }


--------------------------------------------------------------------------------
/BlazorCrud/Pages/Contacts/ContactsTable.razor:
--------------------------------------------------------------------------------
 1 | @page "/contacts/search"
 2 | @layout EmptyLayout
 3 | @code {
 4 |     [SupplyParameterFromQuery]
 5 |     public string? ContactSearch { get; set; } = "";
 6 | 
 7 |     private List<Contact> Contacts { get; set; } = new();
 8 | 
 9 |     protected override void OnInitialized()
10 |     {
11 |         if (string.IsNullOrEmpty(ContactSearch))
12 |         {
13 |             Contacts = Database.Contacts;
14 |         }
15 |         else
16 |         {
17 |             Contacts = Database.Contacts
18 |                 .Where(x => x.Name.Contains(ContactSearch, StringComparison.OrdinalIgnoreCase))
19 |                 .ToList();
20 |         }
21 |     }
22 | }
23 | 
24 | <div class="bg-white rounded-md shadow overflow-x-auto">
25 |     <table class="w-full whitespace-nowrap">
26 |         <tr class="text-left font-bold">
27 |             <th class="pb-4 pt-6 px-6 w-1/4">Name</th>
28 |             <th class="pb-4 pt-6 px-6 w-1/4">Email</th>
29 |             <th class="pb-4 pt-6 px-6 w-1/4">City</th>
30 |             <th class="pb-4 pt-6 px-6 w-1/4">Phone</th>
31 |         </tr>
32 |         @if (Contacts.Count <= 0)
33 |         {
34 |             <tr class="hover:bg-gray-100 focus-within:bg-gray-100">
35 |                 <td class="px-6 py-4 border-t" colspan="4">No contacts with that name found.</td>
36 |             </tr>
37 |         }
38 |         @foreach (var contact in Contacts)
39 |         {
40 |             <tr class="hover:bg-gray-100 focus-within:bg-gray-100">
41 |                 <td class="border-t">
42 |                     <a class="flex items-center px-6 py-4 focus:text-indigo-500" href="/contacts/@contact.Id/edit">
43 |                         @contact.Name
44 |                     </a>
45 |                 </td>
46 |                 <td class="border-t">
47 |                     <a class="flex items-center px-6 py-4 focus:text-indigo-500" href="/contacts/@contact.Id/edit">
48 |                         @contact.Email
49 |                     </a>
50 |                 </td>
51 |                 <td class="border-t">
52 |                     <a class="flex items-center px-6 py-4 focus:text-indigo-500" href="/contacts/@contact.Id/edit">
53 |                         @contact.City
54 |                     </a>
55 |                 </td>
56 |                 <td class="border-t">
57 |                     <a class="flex items-center px-6 py-4 focus:text-indigo-500" href="/contacts/@contact.Id/edit">
58 |                         @contact.Phone
59 |                     </a>
60 |                 </td>
61 |             </tr>
62 |         }
63 |     </table>
64 | </div>


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
 1 | ###############################################################################
 2 | # Set default behavior to automatically normalize line endings.
 3 | ###############################################################################
 4 | * text=auto
 5 | 
 6 | ###############################################################################
 7 | # Set default behavior for command prompt diff.
 8 | #
 9 | # This is need for earlier builds of msysgit that does not have it on by
10 | # default for csharp files.
11 | # Note: This is only used by command line
12 | ###############################################################################
13 | #*.cs     diff=csharp
14 | 
15 | ###############################################################################
16 | # Set the merge driver for project and solution files
17 | #
18 | # Merging from the command prompt will add diff markers to the files if there
19 | # are conflicts (Merging from VS is not affected by the settings below, in VS
20 | # the diff markers are never inserted). Diff markers may cause the following 
21 | # file extensions to fail to load in VS. An alternative would be to treat
22 | # these files as binary and thus will always conflict and require user
23 | # intervention with every merge. To do so, just uncomment the entries below
24 | ###############################################################################
25 | #*.sln       merge=binary
26 | #*.csproj    merge=binary
27 | #*.vbproj    merge=binary
28 | #*.vcxproj   merge=binary
29 | #*.vcproj    merge=binary
30 | #*.dbproj    merge=binary
31 | #*.fsproj    merge=binary
32 | #*.lsproj    merge=binary
33 | #*.wixproj   merge=binary
34 | #*.modelproj merge=binary
35 | #*.sqlproj   merge=binary
36 | #*.wwaproj   merge=binary
37 | 
38 | ###############################################################################
39 | # behavior for image files
40 | #
41 | # image files are treated as binary by default.
42 | ###############################################################################
43 | #*.jpg   binary
44 | #*.png   binary
45 | #*.gif   binary
46 | 
47 | ###############################################################################
48 | # diff behavior for common document formats
49 | # 
50 | # Convert binary document formats to text before diffing them. This feature
51 | # is only available from the command line. Turn it on by uncommenting the 
52 | # entries below.
53 | ###############################################################################
54 | #*.doc   diff=astextplain
55 | #*.DOC   diff=astextplain
56 | #*.docx  diff=astextplain
57 | #*.DOCX  diff=astextplain
58 | #*.dot   diff=astextplain
59 | #*.DOT   diff=astextplain
60 | #*.pdf   diff=astextplain
61 | #*.PDF   diff=astextplain
62 | #*.rtf   diff=astextplain
63 | #*.RTF   diff=astextplain
64 | 


--------------------------------------------------------------------------------
/BlazorCrud/Pages/Contacts/Edit.razor:
--------------------------------------------------------------------------------
 1 | @page "/contacts/{Id:int}/edit"
 2 | 
 3 | @code {
 4 | 	[SupplyParameterFromForm]
 5 | 	public Contact Form { get; set; }
 6 | 	[Parameter]
 7 | 	public int Id { get; set; }
 8 | 	[CascadingParameter]
 9 | 	public HttpContext Context { get; set; }
10 | 	[Inject]
11 | 	public NavigationManager Nav { get; set; }
12 | 
13 | 	protected override void OnInitialized()
14 | 	{
15 | 		Form ??= Database.Contacts.Where(x => x.Id == Id).First();
16 | 	}
17 | 
18 | 	public void UpdateContact()
19 | 	{
20 | 		// Normally this removal wouldn't need to happen but were working with static data so yeah...
21 | 		var oldContact = Database.Contacts.First(x => x.Id == Id);
22 | 		Database.Contacts.Remove(oldContact);
23 | 
24 | 		// set id from url and save
25 | 		Form.Id = Id;
26 | 		Database.Contacts.Add(Form);
27 | 
28 | 		Context.SetFlash("success", "Contact updated");
29 | 		Nav.NavigateTo($"/contacts/{Id}/edit");
30 | 	}
31 | 
32 | 	public void DeleteContact()
33 | 	{
34 | 		var contact = Database.Contacts.First(x => x.Id == Id);
35 | 		Database.Contacts.Remove(contact);
36 | 		Nav.NavigateTo($"/contacts");
37 | 	}
38 | }
39 | 
40 | <PageTitle>Edit contact</PageTitle>
41 | 
42 | <h1 class="mb-8 text-3xl font-bold">
43 | 	<a class="text-blue-500 hover:text-blue-600" href="/contacts">
44 | 		Contacts
45 | 	</a>
46 | 	<span class="text-blue-500 font-medium">/</span>
47 | 	@Form.Name
48 | </h1>
49 | <FlashMessages />
50 | 
51 | <div class="max-w-3xl bg-white rounded-md shadow overflow-hidden">
52 | 	<h2 class="text-lg font-semibold pt-8 pl-8">Edit Contact</h2>
53 | 	<EditForm method="post" Model="Form" OnValidSubmit="UpdateContact" FormName="updatecontact" Enhance>
54 | 		<DataAnnotationsValidator />
55 | 		<div class="flex flex-wrap p-8">
56 | 			<div class="pb-8 pr-6 w-full lg:w-1/2 space-y-2">
57 | 				<label for="name">Title</label>
58 | 				<InputText id="name" @bind-Value="Form.Name" class="relative px-6 py-3 w-full rounded border-gray-300" />
59 | 				<ValidationMessage For="() => Form.Name" />
60 | 			</div>
61 | 			<div class="pb-8 pr-6 w-full lg:w-1/2 space-y-2">
62 | 				<label for="email">Email</label>
63 | 				<InputText type="email" id="email" @bind-Value="Form.Email" class="relative px-6 py-3 w-full rounded border-gray-300" />
64 | 				<ValidationMessage For="() => Form.Email" />
65 | 			</div>
66 | 			<div class="pb-8 pr-6 w-full lg:w-1/2 space-y-2">
67 | 				<label for="city">City</label>
68 | 				<InputText id="city" @bind-Value="Form.City" class="relative px-6 py-3 w-full rounded border-gray-300" />
69 | 				<ValidationMessage For="() => Form.City" />
70 | 			</div>
71 | 			<div class="pb-8 pr-6 w-full lg:w-1/2 space-y-2">
72 | 				<label for="phone">Phone</label>
73 | 				<InputText id="phone" @bind-Value="Form.Phone" class="relative px-6 py-3 w-full rounded border-gray-300" />
74 | 				<ValidationMessage For="() => Form.Phone" />
75 | 			</div>
76 | 		</div>
77 | 
78 | 		<div class="flex items-center justify-end px-8 py-4 bg-gray-50 border-t border-gray-100">
79 | 			<button type="submit" class="px-4 py-2 font-medium rounded bg-blue-500 hover:bg-blue-600 text-white transition">
80 | 				Save
81 | 			</button>
82 | 		</div>
83 | 	</EditForm>
84 | </div>
85 | <div class="max-w-3xl bg-white rounded-md shadow overflow-hidden mt-8">
86 | 	<div class="flex justify-between p-8">
87 | 		<h2 class="text-lg font-semibold">Delete Contact</h2>
88 | 		<EditForm method="post" Model="Form" OnSubmit="DeleteContact" FormName="deletecontact" Enhance>
89 | 			<button type="submit" class="px-4 py-2 font-medium rounded bg-red-500 hover:bg-red-600 text-white transition">
90 | 				Delete
91 | 			</button>
92 | 		</EditForm>
93 | 	</div>
94 | </div>


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
  1 | ## Ignore Visual Studio temporary files, build results, and
  2 | ## files generated by popular Visual Studio add-ons.
  3 | ##
  4 | ## Get latest from https://github.com/github/gitignore/blob/master/VisualStudio.gitignore
  5 | 
  6 | # User-specific files
  7 | *.rsuser
  8 | *.suo
  9 | *.user
 10 | *.userosscache
 11 | *.sln.docstates
 12 | 
 13 | # User-specific files (MonoDevelop/Xamarin Studio)
 14 | *.userprefs
 15 | 
 16 | # Mono auto generated files
 17 | mono_crash.*
 18 | 
 19 | # Build results
 20 | [Dd]ebug/
 21 | [Dd]ebugPublic/
 22 | [Rr]elease/
 23 | [Rr]eleases/
 24 | x64/
 25 | x86/
 26 | [Ww][Ii][Nn]32/
 27 | [Aa][Rr][Mm]/
 28 | [Aa][Rr][Mm]64/
 29 | bld/
 30 | [Bb]in/
 31 | [Oo]bj/
 32 | [Oo]ut/
 33 | [Ll]og/
 34 | [Ll]ogs/
 35 | 
 36 | # Visual Studio 2015/2017 cache/options directory
 37 | .vs/
 38 | # Uncomment if you have tasks that create the project's static files in wwwroot
 39 | #wwwroot/
 40 | 
 41 | # Visual Studio 2017 auto generated files
 42 | Generated\ Files/
 43 | 
 44 | # MSTest test Results
 45 | [Tt]est[Rr]esult*/
 46 | [Bb]uild[Ll]og.*
 47 | 
 48 | # NUnit
 49 | *.VisualState.xml
 50 | TestResult.xml
 51 | nunit-*.xml
 52 | 
 53 | # Build Results of an ATL Project
 54 | [Dd]ebugPS/
 55 | [Rr]eleasePS/
 56 | dlldata.c
 57 | 
 58 | # Benchmark Results
 59 | BenchmarkDotNet.Artifacts/
 60 | 
 61 | # .NET Core
 62 | project.lock.json
 63 | project.fragment.lock.json
 64 | artifacts/
 65 | 
 66 | # ASP.NET Scaffolding
 67 | ScaffoldingReadMe.txt
 68 | 
 69 | # StyleCop
 70 | StyleCopReport.xml
 71 | 
 72 | # Files built by Visual Studio
 73 | *_i.c
 74 | *_p.c
 75 | *_h.h
 76 | *.ilk
 77 | *.meta
 78 | *.obj
 79 | *.iobj
 80 | *.pch
 81 | *.pdb
 82 | *.ipdb
 83 | *.pgc
 84 | *.pgd
 85 | *.rsp
 86 | *.sbr
 87 | *.tlb
 88 | *.tli
 89 | *.tlh
 90 | *.tmp
 91 | *.tmp_proj
 92 | *_wpftmp.csproj
 93 | *.log
 94 | *.vspscc
 95 | *.vssscc
 96 | .builds
 97 | *.pidb
 98 | *.svclog
 99 | *.scc
100 | 
101 | # Chutzpah Test files
102 | _Chutzpah*
103 | 
104 | # Visual C++ cache files
105 | ipch/
106 | *.aps
107 | *.ncb
108 | *.opendb
109 | *.opensdf
110 | *.sdf
111 | *.cachefile
112 | *.VC.db
113 | *.VC.VC.opendb
114 | 
115 | # Visual Studio profiler
116 | *.psess
117 | *.vsp
118 | *.vspx
119 | *.sap
120 | 
121 | # Visual Studio Trace Files
122 | *.e2e
123 | 
124 | # TFS 2012 Local Workspace
125 | $tf/
126 | 
127 | # Guidance Automation Toolkit
128 | *.gpState
129 | 
130 | # ReSharper is a .NET coding add-in
131 | _ReSharper*/
132 | *.[Rr]e[Ss]harper
133 | *.DotSettings.user
134 | 
135 | # TeamCity is a build add-in
136 | _TeamCity*
137 | 
138 | # DotCover is a Code Coverage Tool
139 | *.dotCover
140 | 
141 | # AxoCover is a Code Coverage Tool
142 | .axoCover/*
143 | !.axoCover/settings.json
144 | 
145 | # Coverlet is a free, cross platform Code Coverage Tool
146 | coverage*.json
147 | coverage*.xml
148 | coverage*.info
149 | 
150 | # Visual Studio code coverage results
151 | *.coverage
152 | *.coveragexml
153 | 
154 | # NCrunch
155 | _NCrunch_*
156 | .*crunch*.local.xml
157 | nCrunchTemp_*
158 | 
159 | # MightyMoose
160 | *.mm.*
161 | AutoTest.Net/
162 | 
163 | # Web workbench (sass)
164 | .sass-cache/
165 | 
166 | # Installshield output folder
167 | [Ee]xpress/
168 | 
169 | # DocProject is a documentation generator add-in
170 | DocProject/buildhelp/
171 | DocProject/Help/*.HxT
172 | DocProject/Help/*.HxC
173 | DocProject/Help/*.hhc
174 | DocProject/Help/*.hhk
175 | DocProject/Help/*.hhp
176 | DocProject/Help/Html2
177 | DocProject/Help/html
178 | 
179 | # Click-Once directory
180 | publish/
181 | 
182 | # Publish Web Output
183 | *.[Pp]ublish.xml
184 | *.azurePubxml
185 | # Note: Comment the next line if you want to checkin your web deploy settings,
186 | # but database connection strings (with potential passwords) will be unencrypted
187 | *.pubxml
188 | *.publishproj
189 | 
190 | # Microsoft Azure Web App publish settings. Comment the next line if you want to
191 | # checkin your Azure Web App publish settings, but sensitive information contained
192 | # in these scripts will be unencrypted
193 | PublishScripts/
194 | 
195 | # NuGet Packages
196 | *.nupkg
197 | # NuGet Symbol Packages
198 | *.snupkg
199 | # The packages folder can be ignored because of Package Restore
200 | **/[Pp]ackages/*
201 | # except build/, which is used as an MSBuild target.
202 | !**/[Pp]ackages/build/
203 | # Uncomment if necessary however generally it will be regenerated when needed
204 | #!**/[Pp]ackages/repositories.config
205 | # NuGet v3's project.json files produces more ignorable files
206 | *.nuget.props
207 | *.nuget.targets
208 | 
209 | # Microsoft Azure Build Output
210 | csx/
211 | *.build.csdef
212 | 
213 | # Microsoft Azure Emulator
214 | ecf/
215 | rcf/
216 | 
217 | # Windows Store app package directories and files
218 | AppPackages/
219 | BundleArtifacts/
220 | Package.StoreAssociation.xml
221 | _pkginfo.txt
222 | *.appx
223 | *.appxbundle
224 | *.appxupload
225 | 
226 | # Visual Studio cache files
227 | # files ending in .cache can be ignored
228 | *.[Cc]ache
229 | # but keep track of directories ending in .cache
230 | !?*.[Cc]ache/
231 | 
232 | # Others
233 | ClientBin/
234 | ~$*
235 | *~
236 | *.dbmdl
237 | *.dbproj.schemaview
238 | *.jfm
239 | *.pfx
240 | *.publishsettings
241 | orleans.codegen.cs
242 | 
243 | # Including strong name files can present a security risk
244 | # (https://github.com/github/gitignore/pull/2483#issue-259490424)
245 | #*.snk
246 | 
247 | # Since there are multiple workflows, uncomment next line to ignore bower_components
248 | # (https://github.com/github/gitignore/pull/1529#issuecomment-104372622)
249 | #bower_components/
250 | 
251 | # RIA/Silverlight projects
252 | Generated_Code/
253 | 
254 | # Backup & report files from converting an old project file
255 | # to a newer Visual Studio version. Backup files are not needed,
256 | # because we have git ;-)
257 | _UpgradeReport_Files/
258 | Backup*/
259 | UpgradeLog*.XML
260 | UpgradeLog*.htm
261 | ServiceFabricBackup/
262 | *.rptproj.bak
263 | 
264 | # SQL Server files
265 | *.mdf
266 | *.ldf
267 | *.ndf
268 | 
269 | # Business Intelligence projects
270 | *.rdl.data
271 | *.bim.layout
272 | *.bim_*.settings
273 | *.rptproj.rsuser
274 | *- [Bb]ackup.rdl
275 | *- [Bb]ackup ([0-9]).rdl
276 | *- [Bb]ackup ([0-9][0-9]).rdl
277 | 
278 | # Microsoft Fakes
279 | FakesAssemblies/
280 | 
281 | # GhostDoc plugin setting file
282 | *.GhostDoc.xml
283 | 
284 | # Node.js Tools for Visual Studio
285 | .ntvs_analysis.dat
286 | node_modules/
287 | 
288 | # Visual Studio 6 build log
289 | *.plg
290 | 
291 | # Visual Studio 6 workspace options file
292 | *.opt
293 | 
294 | # Visual Studio 6 auto-generated workspace file (contains which files were open etc.)
295 | *.vbw
296 | 
297 | # Visual Studio LightSwitch build output
298 | **/*.HTMLClient/GeneratedArtifacts
299 | **/*.DesktopClient/GeneratedArtifacts
300 | **/*.DesktopClient/ModelManifest.xml
301 | **/*.Server/GeneratedArtifacts
302 | **/*.Server/ModelManifest.xml
303 | _Pvt_Extensions
304 | 
305 | # Paket dependency manager
306 | .paket/paket.exe
307 | paket-files/
308 | 
309 | # FAKE - F# Make
310 | .fake/
311 | 
312 | # CodeRush personal settings
313 | .cr/personal
314 | 
315 | # Python Tools for Visual Studio (PTVS)
316 | __pycache__/
317 | *.pyc
318 | 
319 | # Cake - Uncomment if you are using it
320 | # tools/**
321 | # !tools/packages.config
322 | 
323 | # Tabs Studio
324 | *.tss
325 | 
326 | # Telerik's JustMock configuration file
327 | *.jmconfig
328 | 
329 | # BizTalk build output
330 | *.btp.cs
331 | *.btm.cs
332 | *.odx.cs
333 | *.xsd.cs
334 | 
335 | # OpenCover UI analysis results
336 | OpenCover/
337 | 
338 | # Azure Stream Analytics local run output
339 | ASALocalRun/
340 | 
341 | # MSBuild Binary and Structured Log
342 | *.binlog
343 | 
344 | # NVidia Nsight GPU debugger configuration file
345 | *.nvuser
346 | 
347 | # MFractors (Xamarin productivity tool) working folder
348 | .mfractor/
349 | 
350 | # Local History for Visual Studio
351 | .localhistory/
352 | 
353 | # BeatPulse healthcheck temp database
354 | healthchecksdb
355 | 
356 | # Backup folder for Package Reference Convert tool in Visual Studio 2017
357 | MigrationBackup/
358 | 
359 | # Ionide (cross platform F# VS Code tools) working folder
360 | .ionide/
361 | 
362 | # Fody - auto-generated XML schema
363 | FodyWeavers.xsd


--------------------------------------------------------------------------------