Blazor Server Application

การสร้างโปรเจ็คใหม่ของสำนักฯ จะใช้ Blazor Server Application ซึ่งเป็นเทคโนโลยีการพัฒนา Web Application ด้วย ASP.NET Core พัฒนาระบบโดยมอง UI ในส่วนต่าง ๆ เป็น Component เช่น Page, Dialog, Data Entry Form เป็นต้น มี Guideline ในการพัฒนา ดังนี้

การตั้งชื่อ Component

แต่ละ Component จะเป็นไฟล์ที่มีนามสกุล .razor สามารถเขียนโค้ด HTML และ C# ร่วมกันได้

การตั้งชื่อไฟล์ Component ให้ใช้ Pascal Case ดังนี้

ตัวอย่างที่ถูกต้อง

    ProductDetail.razor

ตัวอย่างที่ไม่ถูกต้อง

    productDetail.razor

Partial Class

กรณีที่ Component (.razor) มีการเขียนโค้ดจำนวนหลายบรรทัด ให้แยกโค้ด HTML และ C# ออกจากกันโดยการใช้ Partial Class ดังนี้

** ตัวอย่างก่อนแยกโค้ด **

ชื่อไฟล์ : Pages/Counter.razor

@page "/counter"

<PageTitle>Counter</PageTitle> 
<h1>Counter</h1> 
<p role="status">Current count: @currentCount</p> 
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

**ตัวอย่างหลังแยกโค้ด **

ชื่อไฟล์ : Pages/Counter.razor

@page "/counter"

<PageTitle>Counter</PageTitle> 
<h1>Counter</h1> 
<p role="status">Current count: @currentCount</p> 
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

ชื่อไฟล์ : Pages/Counter.razor.cs

namespace DIISBoilerplate.Pages
{
    public partial class Counter
    {

        private int currentCount = 0;

        private void IncrementCount()
        {
            currentCount++;
        }
    }
}

CSS Isolation

โดยปกติการจัดรูปแบบการแสดงผลของระบบจะถูกกำหนดด้วย Global Style Sheet ไว้แล้ว แต่บางครั้งอาจมีความจำเป็นที่ Component ต้องการจัดรูปแบบด้วยตัวเองโดยไม่กระทบกับ Global Style Sheet มีวิธีการกำหนดรูปแบบการแสดงผลได้ด้วยการทำ CSS Isolation ดังนี้

• สร้างไฟล์นามสกุล .razor.css ใช้ชื่อเดียวกับชื่อ Component
• ตัวอย่างเช่น ต้องการทำ CSS Isolation ให้กับ Example Component ดังนี้

ชื่อไฟล์: Pages/Example.razor

@page "/example"

<h1>Scoped CSS Example</h1>

ชื่อไฟล์: Pages/Example.razor.css

h1 { 
    color: brown;
    font-family: Tahoma, Geneva, Verdana, sans-serif;
}

Component Member Sequence Style

การเขียนโค้ด C# กำหนดให้เรียงลำดับ Method และ Field ต่าง ๆ ดังนี้

1. Dependencies injection ([inject] attribute)
2. Parameters
3. Public properties
4. Private fields
5. Public methods
6. Private methods

ตัวอย่าง

using DIISBoilerplate.IServices;
using Microsoft.AspNetCore.Components;

namespace DIISBoilerplate.Pages
{
    public partial class Counter
    {
        //Dependencies injection
        [Inject] 
        public IDevSampleService DevSampleService { get; set; }

        //Parameters
        [Parameter]
        public string StepCount { get; set; }

        //Public properties
        public int MaxValue { get; set; }

        //Private fields
        private int currentCount = 0;

        //Public methods
        public void ResetCount(int value)
        {
            currentCount = value;
        }

        //Private methods
        private void IncrementCount()
        {
            currentCount++;
        }
    }
}

Routing

สามารถทำ Routing ได้โดยการระบุ @page directive ในบรรทัดบนสุดของไฟล์ .razor ตัวอย่าง Component ชื่อ HelloWorld มี Routing เป็น /hello ให้เขียนโค้ดดังนี้

ชื่อไฟล์ : Pages/HelloWorld.razor

@page "/hello"

<h1>Hello World!</h1>

Route parameters

สามารถระบุ Route parameters ให้กับ Component ได้ด้วย @page directive ดังนี้

@page "/route-parameter/{text?}"

ตัวอย่างการระบุ Route parameter ชื่อ name ให้กับ HelloWorld Component ดังนี้

ชื่อไฟล์ : Pages/HelloWorld.razor

@page "/hello/{name?}"

<h1>Hello @Name </h1>

@code {

    [Parameter]
    public string? Name { get; set; }

    protected override void OnInitialized()
    {
        Name = Name ?? "World!";
    }
}

Static assets

• Static file ต่างๆ เช่น รูปภาพ, css, js ที่ใช้ในระบบ ให้เก็บในโฟลเดอร์ wwwroot ของโปรเจ็ค

• สามารถอ้างถึงไฟล์ได้ด้วย base relative path (/)

• ตัวอย่าง logo.png เก็บในโฟลเดอร์ wwwroot/images/logo.png สามารถอ้างถึงได้ดังนี้

    <img alt="PSU logo" src="/images/logo.png" />

Logging

ควรบันทึก Log โดยการใช้ ILogger object จาก Dependency injection (DI) ดังนี้

    public partial class LogExample
    {
        [Inject]
        public ILogger Logger { get; set; }  

        protected override void OnInitialized()
        { 
            Logger.LogInformation("About page visited at {DT}",
            DateTime.UtcNow.ToLongTimeString());
        }
    
    }

ข้อมูลเพิ่มเติม: Logging in .NET Core and ASP.NET Core

การป้องกัน Search Engine รวบรวมข้อมูลของระบบ

หากต้องการป้องกันการรวบรวมข้อมูลของระบบโดย Search engine ต่างๆ ให้ทำการป้องกันโดยสร้างไฟล์ robots.txt บันทึกไว้ในโฟลเดอร์ wwwroot ของโปรเจ็ค ดังนี้

ชื่อไฟล์: robots.txt

#Block all but AdsBot crawlers
User-agent: AdsBot-Google
User-agent: *
Disallow: /