Blazor 入門一 創建項目、跳轉、集成傳統MVC

.net core正式推出了Blazor， 正好在一個小項目裏試用一下。

 

1. 創建項目
   由於基於WebAssemble的客戶端Blazor還不是正式版， 爲了不沒必要要的麻煩，我試用服務端的Blazor。
   試用ctrl+F5運行程序，這樣開發時保存後會自動生成項目，頁面上會提示reload。
    
2. 頁面跳轉
   因爲是個小項目，首頁的內容留到後面設計。咱們先創建個查詢頁面 (Pages/)Planes/Index.razor。
   原菜單的Home，改成Plane List。（菜單在NavMenu.razor中）
   Home/Index.razor的內容改成:

   1 @page "/"
   2 @inject NavigationManager Nav
   3 
   4 @code {
   5     protected override void OnInitialized()
   6     {
   7         Nav.NavigateTo("planes/index");
   8     } 
   9 }

   這樣在瀏覽器訪問項目的根路徑時，會跳轉到"planes/index"，而且菜單的高亮狀態正確。

3. UI層

　　　　目前的版本，Blazor集成的時Bootstrap 4.3。 HTML等前端組件，徹底按Bootstrap的方式開發便可。

　　　　

1     <form class="form-inline"> 
2         <input type="text" class="form-control mb-2 mr-sm-2" id="txtPlaneCode" 
3                placeholder="編號" @bind="flightNo" />
4         <button type="button" class="btn btn-primary mb-2" @onclick="SearchPlanes">搜索</button>
5         <div style="padding-left:15px;">
6             @message
7         </div>
8     </form>

　　這裏咱們放了一個form, 裏面有一個輸入框和一個按鈕。 @bind是綁定了一個C#的變量，@onclick綁定了C#的方法。注意按鈕type=button，避免自動提交。

 

　　4.  C#代碼

 1 @code {
 2         List<PlaneInfo> planes = new List<PlaneInfo>();
 3         string flightNo = "";
 4         string message = "正在加載數據...";
 5 
 6         private void SearchPlanes(MouseEventArgs e=null)
 7         {
 8             message = "";
 9             planes = new List<PlaneInfo> { new PlaneInfo { flightNo="P001"},new PlaneInfo {flightNo="P002" } };
10         }
11 
12     protected override void OnInitialized()
13     {
14         SearchPlanes();
15     }
16 }

OnInitialized會在頁面加載時自動調用。 這樣一個簡單的程序就完成了，能夠用Razor語法把planes用表格展現出來。

今天暫時到這裏，下次看看怎麼加載服務端的數據。

 

   5. Blazor中集成MVC

路由里加上MVC的路由

app.UseEndpoints(endpoints =>
            {
                //MVC的路由
                endpoints.MapControllerRoute(
                    name: "Plane",
                    pattern: "{controller=Plane}/{action=Index}/{id?}");

                endpoints.MapBlazorHub();
                endpoints.MapFallbackToPage("/_Host"); 
            });

這樣就能夠路由到指定的Controller的Action方法了。