เรียกใช้ Blazor WASM เป็น Blazor Server-Side

Question

หมายเหตุ : นี่คือโพสต์ "แบ่งปันความรู้ - สไตล์ถาม - ตอบ" ฉันอาจได้รับการโหวตลดลงเนื่องจากมีคนตีความบริบทของโพสต์นี้ผิด :(

ปัญหา

Blazor WASM อาจเป็นที่ต้องการได้ง่ายกว่า Blazor Server-Side โดยไม่มีข้อเสียในการพัฒนา ปัจจุบัน Blazor WASM ไม่รองรับประสบการณ์การดีบักแบบเต็มรูปแบบและมีการเริ่มต้นที่ช้ามาก สิ่งนี้ทำให้การพัฒนาช้าลงมากกว่า Blazor Server-Side แม้ว่าโดยส่วนตัวแล้วฉันคิดว่าประสบการณ์การดีบักทำให้การพัฒนาช้าลงมากกว่าการเริ่มต้นอย่างช้าๆ

โซลูชันที่เสนอ

หมายเหตุ:ฉันรวมคำ "เสนอ" ไว้ในนั้นเพราะฉันไม่แน่ใจเกี่ยวกับข้อเสียที่วิธีแก้ปัญหานี้อาจทำให้เกิดดังนั้นอย่าลังเลที่จะแสดงความคิดเห็นกับคำตอบของฉันด้านล่าง

วิธีแก้ปัญหาคือสร้างโปรเจ็กต์ Blazor Server-Side เพิ่มเติมจากนั้นอ้างอิงโปรเจ็กต์ Blazor WASM กับโปรเจ็กต์ Blazor Server-Side หลังจากนั้นให้เพิ่มการปรับแต่งบางอย่างลงในStartupและ_Host.cshtmlฝั่งเซิร์ฟเวอร์ของ Blazor เพื่อใช้ไฟล์มีดโกน Blazor WASM และไฟล์ wwwroot อย่างถูกต้อง ดูคำตอบที่ฉันเสนอด้านล่างสำหรับคำอธิบายทีละขั้นตอนสำหรับโซลูชันนี้

ในแง่ที่ง่ายกว่านั้นโซลูชันนี้จะเพิ่มและกำหนดค่าโครงการ Blazor Server-Side โดยไม่ต้องทำการเปลี่ยนแปลงใด ๆและการทำซ้ำรหัสที่สำคัญใด ๆกับโครงการ Blazor WASM

Answer 1

หมายเหตุ:ในตัวอย่างนี้ฉันใช้Visual Studio 2019 16.7.2และเวอร์ชันของเทมเพลตอยู่ที่3.1.8

1. สร้างโครงการ Blazor WASM ทั้ง ASP.NET Core ที่โฮสต์หรือตัวเลือกแบบสแตนด์อโลนจะทำงานได้ดี แต่จะมีการกำหนดค่าที่แตกต่างกันในภายหลังซึ่งจะกล่าวถึง ตัวเลือกที่เหลือจะไม่มีผลใด ๆ ในตัวอย่างนี้ฉันจะใช้ASP.NET Core Hostedเพื่ออธิบายในภายหลังเกี่ยวกับการมี API Controllers สร้างโครงการ Blazor Server-Side ในภายหลังด้วย

   
   

---

1. ณ ตอนนี้โครงสร้างโครงการของคุณควรคล้ายกับภาพหน้าจอแรกด้านล่าง

   ลบรายการที่ไฮไลต์ในโครงการ Blazor Server-Side ที่แสดงในภาพหน้าจอที่สองด้านล่าง

   
   

---

1. อ้างอิงโปรเจ็กต์ Blazor WASM กับโปรเจ็กต์ Blazor Server-Side

   • ASP.NET Core Hosted - อ้างอิงทั้งBlazorWasm.Client& BlazorWasm.Serverโครงการ
   • แบบสแตนด์อโลน - อ้างอิงโปรเจ็กต์ Blazor WASM เดียวตามที่เป็นอยู่

---

1. ไปที่Startupคลาสของโครงการ Blazor Server-Side ในการConfigureServices()ลบWeatherForecastServiceร่วมกับBlazorServer.Dataเนมสเปซจากนั้นเพิ่มบริการสำหรับHttpClientไฟล์มีดโกนที่จะใช้จากโครงการ Blazor WASM

   services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(sp.GetRequiredService<NavigationManager>().BaseUri) });
   

   หมายเหตุในการใช้งานจริงฉันไม่แนะนำให้สร้างอินสแตนซ์ของไฟล์HttpClient. ใช้IHttpClientFactoryแทน เยี่ยมชมบทความนี้ใช้ IHttpClientFactory ในการดำเนินการร้องขอ

   สำหรับโครงการ ASP.NET Core WASM

   ในConfigure()แผนที่จุดสิ้นสุดของตัวควบคุม สิ่งนี้จะใช้ตัวควบคุมในX.Server/ BlazorWasm.Serverproject

   app.UseEndpoints(endpoints =>
   {
       endpoints.MapControllers();
       ...
   });
   

---

1. ไปที่_Host.cshtmlในโฟลเดอร์/ Pagesของโครงการ Blazor Server-Side เปลี่ยนการอ้างอิงcss/site.cssถึงcss/app.cssตั้งแต่ชื่อไฟล์สำหรับไฟล์ css หลักสำหรับโปรเจ็กต์ Blazor WASM แตกต่างกัน

   <link href="css/site.css" rel="stylesheet" /> <!-- Previous -->
   <link href="css/app.css" rel="stylesheet" /> <!-- New -->
   

---

1. สุดท้ายเปลี่ยนAppในtypeแอตทริบิวต์ของcomponentแท็กและดูที่Appแฟ้มคลามีดโกนในโครงการ Blazor WASM ในตัวอย่างAppนี้พบคลาสในBlazorWasm.Clientโปรเจ็กต์:

   <component type="typeof(App)" render-mode="ServerPrerendered" /> <!-- Previous -->
   <component type="typeof(BlazorWasm.Client.App)" render-mode="ServerPrerendered" /> <!-- New -->
   

---

แค่นั้นแหละ! เมื่อคุณเรียกใช้โครงการฝั่งเซิร์ฟเวอร์ Blazor ควรโหลดโดยไม่มีข้อความ "กำลังโหลด ... "

• ไม่มีการเปลี่ยนแปลงใด ๆ ในโครงการ Blazor WASM และไม่มีการทำซ้ำรหัสที่สำคัญ
• สิ่งเดียวที่มีการเปลี่ยนแปลงมีการอ้างอิงและ&launchSettings.jsonappsettings.json
• สำหรับการกำหนดค่าในStartupสำหรับ Blazor Server-Side คุณสามารถสร้างวิธีการขยายในโครงการ Blazor WASM และใช้ในโครงการ Blazor Server-Side

หมายเหตุ:ฉันคิดว่านี่เป็นสิ่งที่ดี (?) สำหรับการดีบักในระหว่างการพัฒนาเท่านั้นเนื่องจากไฟล์มีดโกน WASM ไม่สามารถใช้ความสามารถของ Blazor Server-Side ที่แท้จริงได้อย่างเต็มที่เนื่องจากยังคงใช้คำขอ HTTP

---

หวังผลตอบรับด้านล่าง! : DD