Blazor一个简单的示例让我们来起飞
2020-05-05 22:48
295 查看
Blazor
Blazor他是一个开源的Web框架,不,这不是重点，重点是它可以使c#开发在浏览器上运行Web应用程序.它其实也简化了SPA的开发过程.
Blazor = Browser + Razor
为什么选择Blazor?
Blazor可以让.NET附有全栈开发功能,它可以使Web开发变得轻松而高效.而且Blazor是开源的,它得到了社区的大力支持,而且发展速度会很快.
它还拥有SPA的一些功能比如：
- 路由
- 依赖注入
- 服务端渲染
- Layout 等等
创建应用
如果说无法在看到Blazor WebAssembly App那么执行如下命令即可.
dotnet new -i Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0-preview5.20216.8
项目结构如下所示
我们可以看到上图中的项目结构
- BlazorServerCRUDSample.Client:该项目工程中包含了客户端的相关代码页面等文件
- BlazorServerCRUDSample.Server:该项目工程中包含了webapi.
- BlazorServerCRUDSample.Shared:该类库中用于存放客户端和服务端之间的共享代码.
BlazorServerCRUDSample.Server
控制器代码如下所示
[Route("api/[controller]")]
public class StudentController : Controller
{
private readonly Shared.Data.AppContext _dbcontext;
public StudentController(Shared.Data.AppContext dbcontext)
{
this._dbcontext = dbcontext;
}
[HttpGet]
public async Task<List<Student>> Get()
{
return await _dbcontext.Students.AsQueryable().ToListAsync();
}
[HttpGet("{id}")]
public async Task<Student> Get(int id)
{
return await _dbcontext.Students.FindAsync(id);
}
[HttpPost]
public async Task Post([FromBody] Student student)
{
student.CreateTime = DateTime.Now;
if (ModelState.IsValid)
await _dbcontext.AddAsync(student);
await _dbcontext.SaveChangesAsync();
}
[HttpPut]
public void Put([FromBody] Student student)
{
if (ModelState.IsValid)
_dbcontext.Update(student);
_dbcontext.SaveChanges();
}
[HttpDelete("delete/{id}")]
public void Delete(int id)
{
var entity = _dbcontext.Students.Find(id);
_dbcontext.Students.Remove(entity);
_dbcontext.SaveChanges();
}
}
public class Program
{
public static void Main(string[] args)
{
BuildWebHost(args).Run();
}
public static IWebHost BuildWebHost(string[] args) =>
WebHost.CreateDefaultBuilder(args)
.UseConfiguration(new ConfigurationBuilder()
.AddCommandLine(args)
.Build())
.UseStartup<Startup>()
.Build();
}
对于Startup类,我们可以看到在开发模式下,启动Blazor调试,并且我们可以看到我们通过UseClientSideBlazorFiles来启动我们的客户端Startup
public class Startup
{
public Startup(IConfiguration configuration)
{
Configuration = configuration;
}
public IConfiguration Configuration { get; }
public void ConfigureServices(IServiceCollection services)
{
services.AddControllers();
services.AddResponseCompression();
services.AddDbContext<AppContext>(options =>
{
options.UseSqlServer("Data Source=.;Initial Catalog=BlazorServerCRUDSample;User ID=sa;Password=sa;MultipleActiveResultSets=true;");
});
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
app.UseResponseCompression();
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
app.UseBlazorDebugging();
}
app.UseStaticFiles();
app.UseClientSideBlazorFiles<Client.Startup>();
app.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapDefaultControllerRoute();
endpoints.MapFallbackToClientSideBlazor<Client.Startup>("index.html");
});
}
}
BlazorServerCRUDSample.Client
如下所示我创建了一个列表页面,在代码中我们可以看到@page他定义了该页面的url,当然在razor中也是这样的,而且下最下面我通过HttpClient进行我们的api调用,在这 System.Net.Http.Json这篇文章中我们也可以看到他简直就是为了我们blazor而生的大大减少了我们的代码量.
而且在我的代码中最后一部分有一个@functions片段,它包含了页面所有的业务逻辑,在我们页面初始化时我们通过OnInitializedAsync方法进行调用我们的api然后将其进行填充赋值并填充到我们的html中.
@page "/fetchstudent"
@inject HttpClient Http
@using BlazorServerCRUDSample.Shared.Models
<h1>Students</h1>
<p>
<a href="/addstudent">Create New</a>
</p>
@if (students == null)
{
<p><em>Loading...</em></p>
}
else
{
<table class='table'>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Description</th>
<th>CreateTime</th>
</tr>
</thead>
<tbody>
@foreach (var student in students)
{
<tr>
<td>@student.Id</td>
<td>@student.Name</td>
<td>@student.Description</td>
<td>@student.CreateTime</td>
<td>
<a href='/editstudent/@student.Id'>Edit</a> |
<a href='/delete/@student.Id'>Delete</a>
</td>
</tr>
}
</tbody>
</table>
}
@functions {
Student[] students;
protected override async Task OnInitializedAsync()
{
students = await Http.GetJsonAsync<Student[]>("api/student");
}
}
如下代码中我们还是对我们的页面提供了url,其中Id是将从url中的参数传递到我们的@functions代码中,在Id上面指定 [Parameter] 属性,该属性指定的就是url中的参数值.在这我们通过使用 @bind 来将我们的html组件和类对象进行双向绑定.
@page "/editstudent/{Id}"
@inject HttpClient Http
@using BlazorServerCRUDSample.Shared.Models
@inject Microsoft.AspNetCore.Components.NavigationManager Navigation
<h2>Edit Student</h2>
<hr />
<div class="row">
<div class="col-md-4">
<form @onsubmit="@(async () => await UpdateStudent())">
<div class="form-group">
<label for="Name" class="control-label">Name</label>
<input for="Name" class="form-control" @bind="@student.Name" />
</div>
<div class="form-group">
<label asp-for="Description" class="control-label">Description</label>
<textarea asp-for="Description" class="form-control" @bind="@student.Description"> </textarea>
</div>
<div class="form-group">
<input type="submit" value="Save" class="btn btn-primary" />
<input type="submit" value="Cancel" @onclick="@cancel" class="btn btn-warning" />
</div>
</form>
</div>
</div>
@functions {
[Parameter]
public string id { get; set; }
public Student student = new Student();
protected override async Task OnInitializedAsync()
{
student = await Http.GetJsonAsync<Student>("/api/Student/" + Convert.ToInt32(id));
}
protected async Task UpdateStudent()
{
await Http.SendJsonAsync(HttpMethod.Put, "api/Student", student);
Navigation.NavigateTo("/fetchstudent");
}
void cancel()
{
Navigation.NavigateTo("/fetchstudent");
}
}
在ConfigureServices方法中，可以在依赖项注入容器中注册本地服务。
public class Startup
{
public void ConfigureServices(IServiceCollection services)
{
}
public void Configure(IComponentsApplicationBuilder app)
{
app.AddComponent<App>("app");
}
}
BlazorWebAssemblyHost可以用于在DI容器中定义接口和实现。
public class Program
{
public static void Main(string[] args)
{
CreateHostBuilder(args).Build().Run();
}
public static IWebAssemblyHostBuilder CreateHostBuilder(string[] args) =>
BlazorWebAssemblyHost.CreateDefaultBuilder()
.UseBlazorStartup<Startup>();
}
Blazor可以基于服务端运行但是需要注意服务端的话需要为每一个客户端打开连接,并且我们必须一直与服务端保持连接才行.如果说切换到WebAssembly客户端版本,限制是完全不同的,但是目前来说的话他首次需要下载一些运行时文件到浏览器中.
通过如上代码我们可以看到一个简单的blazor应用程序的建立,详细代码的话大家可以看一下github仓库中的内容.通过源码的话直接启动BlazorServerCRUDSample.Server即可,希望可以通过本示例帮助到你~共同学习共同进步.
Reference
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- python实现一个简单的udp通信的示例代码
- 一个简单的学习示例
- 一个简单的小软件，解放我们的鼠标
- JavaSE8基础 继承一个抽象类的简单示例
- Chrome 插件 一 一个简单的插件示例
- TensorFlow入门（八）tensorboard 的一个简单示例
- Python爬虫系列之----Scrapy(四)一个简单的示例
- [ASP.NET 设计模式] 用Visual Studio2010搭建一个简单的分层结构示例Step by Step —— 03 服务层
- 正则表达式中环视的一个简单示例
- 一个简单的JS时间控件示例代码(JS时分秒时间控件)
- JAVA套接字（Socket）101七天系列—第四天【一个简单示例】
- 一个VC简单的UDP广播示例
- 【Eclipse RCP】1. 一个简单的RCP程序示例
- 循序渐进学java基础笔记(3)——一个简单的示例
- Skinned Mesh原理解析和一个最简单的实现示例
- .Net Attribute详解(上)-Attribute本质以及一个简单示例
- urllib库的简单使用 && 一个简单的Python爬虫示例
- 【自】JavaScript面向对象初探一：通过编写一个简单的Tab选项卡插件，让我们更直观的去认识面向对象的编程方式
- 用perl对文件中的字符串做处理的一个简单的示例
- c#操作axwebbrowser的一个简单示例