Membuat aplikasi Formulir Windows Blazor
Catatan
Ini bukan versi terbaru dari artikel ini. Untuk rilis saat ini, lihat versi .NET 8 dari artikel ini.
Peringatan
Versi ASP.NET Core ini tidak lagi didukung. Untuk informasi selengkapnya, lihat Kebijakan Dukungan .NET dan .NET Core. Untuk rilis saat ini, lihat versi .NET 8 dari artikel ini.
Penting
Informasi ini berkaitan dengan produk pra-rilis yang mungkin dimodifikasi secara substansial sebelum dirilis secara komersial. Microsoft tidak memberikan jaminan, tersirat maupun tersurat, sehubungan dengan informasi yang diberikan di sini.
Untuk rilis saat ini, lihat versi .NET 8 dari artikel ini.
Tutorial ini menunjukkan kepada Anda cara membuat dan menjalankan aplikasi Formulir WindowsBlazor. Anda akan mempelajari cara untuk:
- Membuat proyek aplikasi Formulir Windows Blazor
- Menjalankan aplikasi di Windows
Prasyarat
- Platform yang didukung (dokumentasi Formulir Windows)
- Visual Studio 2022 dengan beban kerja pengembangan desktop .NET
Beban kerja Visual Studio
Jika beban kerja pengembangan desktop .NET tidak diinstal, gunakan alat penginstal Visual Studio untuk menginstal beban kerja. Untuk informasi selengkapnya, lihat Memodifikasi beban kerja, komponen, dan paket bahasa Visual Studio.
Membuat proyek Formulir Windows Blazor
Luncurkan Visual Studio. Di Jendela Mulai, pilih Buat proyek baru:
Dalam dialog Buat proyek baru, filter dropdown Jenis proyek ke Desktop. Pilih templat proyek C# untuk aplikasi Formulir Windows dan pilih tombol Berikutnya:
Dalam dialog Konfigurasikan proyek baru Anda:
- Atur Nama proyek ke WinFormsBlazor.
- Pilih lokasi yang sesuai untuk proyek.
- Pilih tombol Berikutnya.
Dalam dialog Informasi tambahan, pilih versi kerangka kerja dengan daftar dropdown Kerangka Kerja. Pilih tombol Buat :
Gunakan NuGet Package Manager untuk menginstal Microsoft.AspNetCore.Components.WebView.WindowsForms
paket NuGet:
Di Penjelajah Solusi, klik kanan nama proyek, WinFormsBlazor, dan pilih Edit File Proyek untuk membuka file proyek (WinFormsBlazor.csproj
).
Di bagian atas file proyek, ubah SDK menjadi Microsoft.NET.Sdk.Razor
:
<Project Sdk="Microsoft.NET.Sdk.Razor">
Simpan perubahan ke file proyek (WinFormsBlazor.csproj
).
_Imports.razor
Tambahkan file ke akar proyek dengan direktif @using
untuk Microsoft.AspNetCore.Components.Web.
_Imports.razor
:
@using Microsoft.AspNetCore.Components.Web
Simpan file _Imports.razor
.
wwwroot
Tambahkan folder ke proyek.
index.html
Tambahkan file ke wwwroot
folder dengan markup berikut.
wwwroot/index.html
:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WinFormsBlazor</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="WinFormsBlazor.styles.css" rel="stylesheet" />
</head>
<body>
<div id="app">Loading...</div>
<div id="blazor-error-ui" data-nosnippet>
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.webview.js"></script>
</body>
</html>
wwwroot
Di dalam folder, buat css
folder untuk menyimpan lembar gaya.
app.css
Tambahkan lembar gaya ke wwwroot/css
folder dengan konten berikut.
wwwroot/css/app.css
:
html, body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
h1:focus {
outline: none;
}
a, .btn-link {
color: #0071c1;
}
.btn-primary {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
.valid.modified:not([type=checkbox]) {
outline: 1px solid #26b050;
}
.invalid {
outline: 1px solid red;
}
.validation-message {
color: red;
}
#blazor-error-ui {
background: lightyellow;
bottom: 0;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
display: none;
left: 0;
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
position: fixed;
width: 100%;
z-index: 1000;
}
#blazor-error-ui .dismiss {
cursor: pointer;
position: absolute;
right: 0.75rem;
top: 0.5rem;
}
wwwroot/css
Di dalam folder, buat bootstrap
folder. bootstrap
Di dalam folder, tempatkan salinan bootstrap.min.css
. Anda dapat memperoleh versi terbaru dari bootstrap.min.css
situs web Bootstrap. Ikuti tautan bilah navigasi ke Unduhan> Dokumen. Tautan langsung tidak dapat disediakan di sini karena semua konten di situs diberi versi dalam URL.
Tambahkan komponen berikut Counter
ke akar proyek, yang merupakan komponen default Counter
yang ditemukan dalam Blazor templat proyek.
Counter.razor
:
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
}
}
Counter
Simpan komponen (Counter.razor
).
Di Penjelajah Solusi, klik dua kali pada Form1.cs
file untuk membuka perancang:
Buka Kotak Alat dengan memilih tombol Kotak Alat di sepanjang tepi kiri jendela Visual Studio atau pilih perintah menu Kotak Alat Tampilan>.
Temukan kontrol di BlazorWebView
bawah Microsoft.AspNetCore.Components.WebView.WindowsForms
. BlazorWebView Seret dari Kotak Alat ke perancangForm1
. Berhati-hatilah untuk tidak secara tidak sengaja menyeret WebView2
kontrol ke dalam formulir.
Visual Studio memperlihatkan BlazorWebView kontrol dalam perancang formulir sebagai WebView2
dan secara otomatis memberi nama kontrol blazorWebView1
:
Di Form1
, pilih BlazorWebView (WebView2
) dengan satu klik.
BlazorWebViewDi Properti , konfirmasikan bahwa kontrol diberi nama blazorWebView1
. Jika nama tidak blazorWebView1
, kontrol yang salah diseret dari Kotak Alat. WebView2
Hapus kontrol dan Form1
seret BlazorWebView
kontrol ke dalam formulir.
Di properti kontrol, ubah BlazorWebViewnilai Dock menjadi Isi:
Di perancang Form1
, klik Form1
kanan dan pilih Tampilkan Kode.
Tambahkan namespace untuk Microsoft.AspNetCore.Components.WebView.WindowsForms dan Microsoft.Extensions.DependencyInjection ke bagian Form1.cs
atas file:
using Microsoft.AspNetCore.Components.WebView.WindowsForms;
using Microsoft.Extensions.DependencyInjection;
Form1
Di dalam konstruktor, setelah InitializeComponent
panggilan metode, tambahkan kode berikut:
var services = new ServiceCollection();
services.AddWindowsFormsBlazorWebView();
blazorWebView1.HostPage = "wwwroot\\index.html";
blazorWebView1.Services = services.BuildServiceProvider();
blazorWebView1.RootComponents.Add<Counter>("#app");
Catatan
Metode InitializeComponent
ini secara otomatis dihasilkan pada waktu build aplikasi dan ditambahkan ke objek kompilasi untuk kelas panggilan.
Kode Form1.cs
C# akhir dan lengkap dengan namespace cakupan file:
using Microsoft.AspNetCore.Components.WebView.WindowsForms;
using Microsoft.Extensions.DependencyInjection;
namespace WinFormsBlazor;
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
var services = new ServiceCollection();
services.AddWindowsFormsBlazorWebView();
blazorWebView1.HostPage = "wwwroot\\index.html";
blazorWebView1.Services = services.BuildServiceProvider();
blazorWebView1.RootComponents.Add<Counter>("#app");
}
}
Menjalankan aplikasi
Pilih tombol mulai di toolbar Visual Studio:
Aplikasi yang berjalan di Windows:
Langkah berikutnya
Dalam tutorial ini, Anda mempelajari cara:
- Membuat proyek aplikasi Formulir Windows Blazor
- Menjalankan aplikasi di Windows
Pelajari selengkapnya tentang Blazor Hybrid aplikasi:
ASP.NET Core
Saran dan Komentar
https://aka.ms/ContentUserFeedback.
Segera hadir: Sepanjang tahun 2024 kami akan menghentikan penggunaan GitHub Issues sebagai mekanisme umpan balik untuk konten dan menggantinya dengan sistem umpan balik baru. Untuk mengetahui informasi selengkapnya, lihat:Kirim dan lihat umpan balik untuk