USE MASTER
GO       -- 1) Check for the Database Exists .If the database is exist then drop and create new DB
IF EXISTS (SELECT [name] FROM sys.databases WHERE [name] = 'CustDB' )
DROP DATABASE CustDB
GO       CREATE DATABASE CustDB
GO       USE CustDB
GO       -- 1)  Customer Masters    IF EXISTS ( SELECT [name] FROM sys.tables WHERE [name] = 'CustomerMaster' )
DROP TABLE CustomerMaster
GO       CREATE TABLE [dbo].[CustomerMaster](       [CustCd] [varchar](20) NOT NULL ,         [CustName] [varchar](100) NOT NULL,          [Email]  [nvarchar](100) NOT NULL,        [PhoneNo] [varchar](100) NOT NULL,           [InsertBy] [varchar](100) NOT NULL,   PRIMARY KEY (CustCd)
)       -- insert sample data to Student Master table
INSERT INTO [CustomerMaster]   (CustCd,CustName,Email,PhoneNo,InsertBy)       VALUES ('C001','ACompany','acompany@gmail.com','01000007860','Shanun')       INSERT INTO [CustomerMaster]   (CustCd,CustName,Email,PhoneNo,InsertBy)       VALUES ('C002','BCompany','bcompany@gmail.com','0100000001','Afraz')  INSERT INTO [CustomerMaster]   (CustCd,CustName,Email,PhoneNo,InsertBy)       VALUES ('C003','CCompany','ccompany@gmail.com','01000000002','Afreen')  INSERT INTO [CustomerMaster]   (CustCd,CustName,Email,PhoneNo,InsertBy)       VALUES ('C004','DCompany','dcompany@gmail.com','01000001004','Asha')  select * from CustomerMaster

第2步-创建ASP.NET Core Blazor服务器应用程序

<h1>My Blozor Code part</h1>My Name is : @myName   <br /><button @onclick="ClickMe">Click Me</button>

请注意：所有C＃代码部分和函数都可以在@code {}部分下编写。
我们添加方法ClickMe并声明属性以将名称绑定到@Code部分中

[Parameter]public string myName { get; set; }
private void ClickMe(){myName="Shanu";}

完整的Coutner Component页面代码将像这样。

"ConnectionStrings": {"DefaultConnection": "Server= DBServerName;Database=CustDB;user id= SQLID;-password=SQLPWD;Trusted_Connection=True;MultipleActiveResultSets=true"},

[Key]public string CustCd { get; set; }public string CustName { get; set; }public string Email { get; set; }public string PhoneNo { get; set; }public string InsertBy { get; set; }

创建dbConext类

public class SqlDbContext:DbContext{public SqlDbContext(DbContextOptions<SqlDbContext> options): base(options){}public DbSet<BlazorCrudA1.Data.CustomerMaster> CustomerMaster { get; set; }}

在Startup中添加DbContext

services.AddDbContext<SqlDbContext>(options => options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));

请注意，在ConfigureServices方法中我们还可以看到已添加了weatherforecast服务。如果我们创建了一个新服务，则需要在ConfigureServices方法中以下面的代码添加该服务。

services.AddSingleton<WeatherForecastService>();

创建用于CRUD操作的Web API

endpoints.MapControllers();

在Configure方法中，我们在UseEndpoints中添加如下代码。

app.UseEndpoints(endpoints =>{endpoints.MapControllers();endpoints.MapBlazorHub();endpoints.MapFallbackToPage("/_Host");});

现在再次运行，并检查/api/CustomerMasters/以查看数据库中的Json数据。

@page "/customerentry"
@using BlazorCrudA1.Data
@using System.Net.Http
@inject HttpClient Http
@using Microsoft.Extensions.Logging

为服务器端Blazor注册HTTPClient

services.AddResponseCompression(opts =>{opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(new[] { "application/octet-stream" });});// Server Side Blazor doesn't register HttpClient by defaultif (!services.Any(x => x.ServiceType == typeof(HttpClient))){// Setup HttpClient for server side in a client side compatible fashionservices.AddScoped<HttpClient>(s =>{// Creating the URI helper needs to wait until the JS Runtime is initialized, so defer it.      var uriHelper = s.GetRequiredService<NavigationManager>();return new HttpClient{BaseAddress = new Uri(uriHelper.BaseUri)};});}

HTML设计和数据绑定部分

<h1> ASP.NET Core BLAZOR CRUD demo for Customers</h1>
<hr />
<table width="100%" style="background:#05163D;color:honeydew"><tr><td width="20"> </td><td><h2> Add New Customer Details</h2></td><td> </td><td align="right"><button class="btn btn-info" @onclick="@AddNewCustomer">Add New Customer</button></td><td width="10"> </td></tr><tr><td colspan="2"></td></tr>
</table>
<hr />
@if (showAddrow == true)
{<form><table class="form-group"><tr><td><label for="Name" class="control-label">Customer Code</label></td><td><input type="text" class="form-control" @bind="@custObj.CustCd" /></td><td width="20"> </td><td><label for="Name" class="control-label">Customer Name</label></td><td><input type="text" class="form-control" @bind="@custObj.CustName" /></td></tr><tr><td><label for="Email" class="control-label">Email</label></td><td><input type="text" class="form-control" @bind="@custObj.Email" /></td><td width="20"> </td><td><label for="Name" class="control-label">Phone</label></td><td><input type="text" class="form-control" @bind="@custObj.PhoneNo" /></td></tr><tr><td><label for="Name" class="control-label">Insert By</label></td><td><input type="text" class="form-control" @bind="@custObj.InsertBy" /></td><td width="20"> </td><td></td><td><button type="submit" class="btn btn-success" @onclick="@AddCustomer" style="width:220px;">Save</button></td></tr></table></form>
}
<table width="100%" style="background:#0A2464;color:honeydew"><tr><td width="20"> </td><td><h2>Customer List</h2></td></tr><tr><td colspan="2"></td></tr>
</table> @if (custs == null)
{<p><em>Loading...</em></p>
}
else
{<table class="table"><thead><tr><th>Customer Code</th><th>Customerr Name</th><th>Email</th><th>Phone</th><th>Inserted By</th></tr></thead><tbody>@foreach (var cust in custs){<tr><td>@cust.CustCd</td><td>@cust.CustName</td><td>@cust.Email</td><td>@cust.PhoneNo</td><td>@cust.InsertBy</td><td><button class="btn btn-primary" @onclick="@(async () => await EditCustomer(cust.CustCd))" style="width:110px;">Edit</button></td><td><button class="btn btn-danger" @onclick="@(async () => await DeleteCustomer(cust.CustCd))">Delete</button></td></tr>}</tbody></table>
}

功能部分

@code {private CustomerMaster[] custs;CustomerMaster custObj = new CustomerMaster();string ids = "0";bool showAddrow = false;bool loadFailed;protected override async Task OnInitializedAsync(){ids = "0";custs = await Http.GetJsonAsync<CustomerMaster[]>("/api/CustomerMasters/");}void AddNewCustomer(){ids = "0";showAddrow = true;custObj = new CustomerMaster();}// Add New Customer Details Methodprotected async Task AddCustomer(){if (ids == "0"){await Http.SendJsonAsync(HttpMethod.Post, "/api/CustomerMasters/", custObj);custs = await Http.GetJsonAsync<CustomerMaster[]>("/api/CustomerMasters/");}else{await Http.SendJsonAsync(HttpMethod.Put, "/api/CustomerMasters/" + custObj.CustCd, custObj);custs = await Http.GetJsonAsync<CustomerMaster[]>("/api/CustomerMasters/");}showAddrow = false;}// Edit Methodprotected async Task EditCustomer(string CustomerID){showAddrow = true;ids = "1";//try//{loadFailed = false;ids = CustomerID.ToString();custObj = await Http.GetJsonAsync<CustomerMaster>("/api/CustomerMasters/" + CustomerID);string s = custObj.CustCd;showAddrow = true;//    }//catch (Exception ex)//{//    loadFailed = true;//    Logger.LogWarning(ex, "Failed to load product {ProductId}", CustomerID);//}}// Delte Methodprotected async Task DeleteCustomer(string CustomerID){showAddrow = false;ids = CustomerID.ToString();await Http.DeleteAsync("/api/CustomerMasters/" + CustomerID);custs = await Http.GetJsonAsync<CustomerMaster[]>("/api/CustomerMasters/");}}

导航菜单

<li class="nav-item px-3"><NavLink class="nav-link" href="CustomerEntry"><span class="oi oi-list-rich" aria-hidden="true"></span> Customer Master</NavLink></li>

生成并运行应用程序