สร้างโปรเจ็กส์ Blazor
> dotnet new blazorserver -o BlazorApp --no-https
รันโปรเจ็กส์ด้วยคำสั่ง dotnet run
> cd BlazorApp
> dotnet run
หรือ แก้ไขหน้า Page ดูผลการแก้ไขได้เลย
> dotnet watch run
ติดตั้ง System.Data.SqlClient
> dotnet add package System.Data.SqlClient --version 4.8.2
เพิ่ม Config ที่ไฟล์ appsettings.json
{
"Logging": {
"LogLevel": {
"Default": "Information",
"Microsoft": "Warning",
"Microsoft.Hosting.Lifetime": "Information"
}
},
"DbConfig": {
"ServerName": "localhost",
"DatabaseName": "myDatabase",
"UserName": "myUsername",
"Password": "myPassword"
},
"AllowedHosts": "*"
}
เพิ่มไฟล์ Data.Student.cs
using System;
namespace BlazorApp.Data
{
public class Student
{
public int id { get; set; }
public string firstname { get; set; }
public string lastname { get; set; }
public string email { get; set; }
public string mobile { get; set; }
}
}
เพิ่มไฟล์ Data.StudentService.cs
using Microsoft.Extensions.Configuration;
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Threading.Tasks;
namespace BlazorApp.Data
{
public class StudentService
{
private IConfiguration config;
public StudentService(IConfiguration configuration)
{
config = configuration;
}
private string ConnectionString
{
get
{
string _server = config.GetValue<string>("DbConfig:ServerName");
string _database = config.GetValue<string>("DbConfig:DatabaseName");
string _username = config.GetValue<string>("DbConfig:UserName");
string _password = config.GetValue<string>("DbConfig:Password");
return ($"Server={_server};Database={_database};User ID={_username};Password={_password};Trusted_Connection=False;MultipleActiveResultSets=true;");
}
}
public async Task<List<Student>> GetStudent()
{
List<Student> students = new List<Student>();
DataTable dt = new DataTable();
SqlConnection con = new SqlConnection(ConnectionString);
string sql = @"
SELECT *
FROM Student
ORDER BY id";
SqlDataAdapter da = new SqlDataAdapter(sql, con);
da.Fill(dt);
foreach (DataRow row in dt.Rows)
{
Student std = new Student();
std.id = Convert.ToInt32(row["id"]);
std.firstname = row["Firstname"] as string;
std.lastname = row["Lastname"] as string;
std.email = row["Email"] as string;
std.mobile = row["mobile"] as string;
students.Add(std);
}
return await Task.FromResult(students);
}
} // end class
}
สร้าง Razor Page ชื่อ Pages/StudentList.razor
@page "/student-list"
@using BlazorApp.Data
@inject StudentService stdService
<h1>Student</h1>
@if (students == null)
{
<div>There is no student</div>
}
else
{
foreach (Student std in students)
{
<div style="padding:15px;border-bottom:solid 1px #0094ff;">
@std.id | @std.firstname | @std.lastname | @std.email | @std.mobile
</div>
}
}
@code {
private List<Student> students;
protected override async Task OnInitializedAsync()
{
students = await stdService.GetStudent();
}
}
Register service ใน Startup.cs
public void ConfigureServices(IServiceCollection services)
{
services.AddRazorPages();
services.AddServerSideBlazor();
services.AddSingleton<WeatherForecastService>();
services.AddSingleton<StudentService>();
}
รันและเรียกไปที่ http://localhost:5000/student-list
หรือแปะไว้หน้า index โดยแก้ไขไฟล์ Pages/index.razor
@page "/"
<h1>Hello, world!</h1>
Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />
<StudentList />