Pada artikel ini, saya akan menunjukkan kepada Anda bagaimana Anda dapat menambahkan halaman berbasis Blazor ke aplikasi Halaman Razor yang ada.
Kata pengantar
Blazor akan menjadi emas dalam dua minggu . Banyak hal dalam proyek ini masih mengalami perubahan yang agak drastis, dan Preview 9 terbaru secara signifikan memperumit interaksi antara Razor Pages dan komponen Blazor: tidak mungkin lagi untuk meneruskan parameter dari halaman Razor ke komponen Blazor menggunakan
Html.RenderComponentAsync. Ini dapat berubah di masa mendatang, tetapi kemungkinan di .NET Core 3.0 akan muncul dengan batasan ini.
Jika Anda masih ingin meningkatkan aplikasi Razor Pages yang ada dengan sihir Blazor, salah satu solusinya adalah membuat halaman Anda sepenuhnya di Blazor. Pada artikel ini, saya akan menunjukkan kepada Anda bagaimana Anda dapat menambahkan Blazor Pages ke aplikasi Razor Pages yang ada, di mana bagian-bagian aplikasi dibuat menggunakan Razor Pages dan lainnya menggunakan Blazor Pages. Tata letaknya sama untuk kedua jenis halaman .
Langkah satu: dukungan untuk Blazor
Jadi, kami memiliki aplikasi Halaman Razor yang telah diubah menjadi .NET Core 3.
Pertama, Anda perlu menambahkan dukungan Blazor ke aplikasi Anda. Dukungan ini akan memungkinkan Anda untuk membuat komponen Blazor dari halaman Razor. Dokumentasi resmi memandu Anda melalui proses sepenuhnya, tetapi berikut adalah ikhtisar singkatnya.
Startup.cs:
Kita perlu menambahkan
Services.AddServerSideBlazorke ConfigureServicesdan endpoints.MapBlazorHubdi Configure:
_Layout.cshtml : Library Blazor
JS diperlukan untuk menghubungkan Blazor di sisi server. Hal ini dapat ditambahkan ke
_Layout.cshtml:
?
<script src="_framework/blazor.server.js"></script>_Imports.razor:
Kami juga membutuhkan file baru bernama
_Imports.razor. Ini harus ditambahkan ke folder Halaman:
_Imports.razordigunakan untuk mengatur pernyataan penggunaan untuk komponen Blazor Anda. Anda bisa mulai dengan yang berikut
:?
@using System.Net.Http
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.JSInterop
@using Microsoft.AspNetCore.Components.WebDan itu saja . Aplikasi kami sekarang mendukung Blazor. Bisakah kita memverifikasi ini dengan menyalin komponen Counter klasik ke dalam aplikasi kita
?
@page "/counter"
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
int currentCount = 0;
void IncrementCount()
{
currentCount++;
}
}Dan edit
Privacy.cshtmluntuk memasukkan komponen Counter:
<a href="https://mikaelkoskinen.net/post/combining-razor-blazor-pages-single-asp-net-core-3-application#">?</a>
@page
@model PrivacyModel
@{
ViewData["Title"] = "Privacy Policy";
}
<h1>@ViewData["Title"]</h1>
<p>Use this page to detail your site's privacy policy.</p>
<component>@(await Html.RenderComponentAsync<Counter>(RenderMode.Server))</component>Sekarang, ketika kami meluncurkan aplikasi, Counter yang berfungsi akan muncul di halaman kami:
Di bagian selanjutnya dari artikel ini, saya akan menunjukkan kepada Anda bagaimana Anda dapat memodifikasi aplikasi Halaman Razor Anda sehingga alih-alih hanya menambahkan komponen ke halaman yang ada, Anda dapat membuat halaman Blazor lengkap.
Langkah kedua: dukungan untuk Halaman Blazor
Komponen Blazor kami menentukan rute
“/counter”:
Tapi mengikutinya tidak berhasil:
Tujuan kami adalah membuat perutean ke halaman Blazor berfungsi. Dan kami ingin halaman Blazor menggunakan tata letak yang sama seperti halaman Razor. Untuk ini kita membutuhkan beberapa hal, dimulai dengan Router .
App.razor:
Buat file baru
App.razordi folderPages
Komponen Router didefinisikan dalam
App.razor:
?
@using Microsoft.AspNetCore.Components.Routing
<Router AppAssembly="typeof(Program).Assembly">
<Found Context="routeData">
<RouteView RouteData="routeData"/>
</Found>
<NotFound>
<h1>Page not found</h1>
<p>Sorry, but there's nothing here!</p>
</NotFound>
</Router>Router secara otomatis memindai semua komponen Blazor menggunakan arahan halaman dan menambahkan rute ke sana.
_Host.cshtml:
Kami juga membutuhkan halaman untuk menghosting halaman Blazor. Ini bisa disebut apa pun yang Anda inginkan, tetapi template Blazor digunakan secara default
_Host.cshtml, yang tidak masalah bagi kami (dan juga yang lain). Di dalam _Host.cshtmlkita dapat mendefinisikan sebuah layout, yang dalam kasus kita akan sama dengan halaman Razor.
_Host.cshtmlberisi panggilan Html.RenderComponentAsync:
?
@page "/blazor"
@{
Layout = "_Layout";
}
<app>
@(await Html.RenderComponentAsync<App>(RenderMode.Server))
</app>Startup.cs:
Dan terakhir, sedikit tambahan untuk metode ini
Configure Startup.cs. Sebelumnya kami menambahkan MapBlazorHub, dan sekarang kami perlu menambahkan panggilan yang MapFallbackToPagemenunjuk ke yang baru _Host.cshtml:
Selesai! Sekarang kita hanya perlu menguji pengaturan kita. Tambahkan Penghitung Halaman Blazor (Penghitung) ke tata letak Anda dengan mengedit
Pages/Shared/_Layout.cshtml:
Saat kami meluncurkan aplikasi, kami melihat halaman Blazor yang berfungsi di aplikasi Halaman Razor kami:
Dan kami tidak merusak dukungan untuk menambahkan komponen Blazor ke Halaman Razor:
Catatan
Beberapa hal yang perlu diperhatikan:
- Rute Blazor hanya berfungsi jika mengarah ke root. Jika “/ counter” diubah menjadi, misalnya,
“/products/counter”halaman tidak akan dapat memuat yang diperlukanblazor.server.js. Kita akan mendapatkan 404 sebagai gantinya. Tag skrip seharusnya dapat diubah sehingga dapat memuat skrip yang diperlukan terlepas dari lokasinya, tetapi tampaknya telah berubah dari pra-8 menjadi pra-9 dan saya tidak dapat membuatnya berfungsi. Berikut adalah tangkapan layar 404 yang menunjukkan masalahnya:
- Jika Anda berhasil memuat skrip, Anda mungkin akan mengalami masalah yang sama dengan hub Blazor: skrip mencoba mencari hub di / products / blazor alih-alih blazor. Untuk mengatasi ini, Anda dapat secara manual memulai koneksi antara server dan browser:
?
<script src="~/_framework/blazor.server.js" autostart="false"></script>
<script>
Blazor.start({
configureSignalR: function (builder) {
builder.withUrl('/_blazor');
}
});
</script>Kode sampel
Kode contoh untuk proyek ini tersedia di GitHub .
Ingin tahu lebih banyak tentang kursus kami? Ini untukmu .