Membuat aplikasi Formulir Windows Blazor

Artikel
04/11/2024

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.

Pemilihan beban kerja pengembangan desktop .NET alat penginstal Visual Studio.

Membuat proyek Formulir Windows Blazor

Luncurkan Visual Studio. Di Jendela Mulai, pilih Buat proyek baru:

Buat solusi baru di Visual Studio.

Dalam dialog Buat proyek baru, filter dropdown Jenis proyek ke Desktop. Pilih templat proyek C# untuk aplikasi Formulir Windows dan pilih tombol Berikutnya:

Buat proyek baru di Visual Studio.

Dalam dialog Konfigurasikan proyek baru Anda:

Atur Nama proyek ke WinFormsBlazor.
Pilih lokasi yang sesuai untuk proyek.
Pilih tombol Berikutnya.

Konfigurasikan proyek.

Dalam dialog Informasi tambahan, pilih versi kerangka kerja dengan daftar dropdown Kerangka Kerja. Pilih tombol Buat :

Dialog Informasi Tambahan.

Gunakan NuGet Package Manager untuk menginstal Microsoft.AspNetCore.Components.WebView.WindowsForms paket NuGet:

Gunakan Nuget Package Manager di Visual Studio untuk menginstal paket NuGet Microsoft.AspNetCore.Components.WebView.WindowsForms.

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.csssitus 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:

File Form1.cs di Penjelajah Solusi.

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.

BlazorWebView di Kotak Alat.

Visual Studio memperlihatkan BlazorWebView kontrol dalam perancang formulir sebagai WebView2 dan secara otomatis memberi nama kontrol blazorWebView1:

BlazorWebView di perancang Form1.

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.

BlazorWebView secara otomatis diberi nama 'blazorWebView1' oleh Visual Studio.

Di properti kontrol, ubah BlazorWebViewnilai Dock menjadi Isi:

BlazorProperti WebView dengan Dock diatur ke Isian.

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:

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 Blazor Hybrid

Bagikan melalui