Blazor - Build your first app

บทความนี้ผมจะมาแนะนำการพัฒนา Blazor ทำ Todo App แบบง่ายๆกันก่อน โดยท่านจะต้องไปอ่านบทความก่อนหน้า Blazor - Full-stack web development with C# and WebAssembly และทำตามขั้นตอน Get started with Blazor ตั้งแต่ 1-8

  1. คลิ๊กขวาที่ Pages แล้วเลือก New File ตั้งชื่อไฟล์ว่า
Todo.cshtml

  1. เพิ่มโค้ดไปที่ไฟล์ Todo.cshtml ดังนี้
@page "/todo"
<h1>Todo</h1>
  1. เปิดไฟล์ Shared/NavMenu.cshtml เพิ่มโค้ด NavLink สำหรับหน้า Todo ถัดจาก Fetch data
<li class="nav-item px-3">
    <NavLink class="nav-link" href="/todo">
        <span class="oi oi-list" aria-hidden="true"></span> Todo
    </NavLink>
</li>

  1. ที่ Terminal ให้กด Ctrl+C เพื่อหยุด Web Server แล้วพิมพ์คำสั่ง dotnet run แล้วกด Enter (ทำขั้นตอนนี้ทุกครั้งเมื่อมีการแก้ไขไฟล์แล้วต้องการรันทดสอบ)
dotnet run
  1. เปิด Browser เข้าไปที่ http://localhost:5000 จะมีลิ้ง Todo เพิ่มอยู่ด้านซ้าย

  1. สร้างไฟล์ TodoItem.cs เอาไว้ที่ Root ของโปรเจ็ค แล้วเพิ่มโค้ดเข้าไปดังนี้
public class TodoItem
{
    public string Title { get; set; }
    public bool IsDone { get; set; }
}

  1. เปิดไฟล์ Todo.cshtml แก้ไขโค้ดดังนี้
@page "/todo"
<h1>Todo</h1>

<ul>
    @foreach (var todo in todos)
    {
        <li>@todo.Title</li>
    }
</ul>

<input class placeholder="Something todo" />
<button>Add todo</button>

@functions {
    IList<TodoItem> todos = new List<TodoItem>();
}

  1. ทำตามขั้นตอนที่ 4 แล้ว Refresh Browser

  1. เปิดไฟล์ Todo.cshtml แก้ไขโค้ด @functions เพิ่ม AddTodo Method ดังนี้
@functions {
    IList<TodoItem> todos = new List<TodoItem>();
    string newTodo;

    void AddTodo()
    {
        if (!string.IsNullOrWhiteSpace(newTodo))
        {
            todos.Add(new TodoItem { Title = newTodo });
            newTodo = string.Empty;
        }
    }
}
  1. แก้ไข Input และปุ่ม Add todo โดย
  • bind (ผูก) input เข้ากับตัวแปร newTodo
  • เพิ่มอีเว้น onclick ให้เรียก AddTodo Method
<input placeholder="Something todo" bind="@newTodo" />
<button onclick="@AddTodo">Add todo</button>
  1. ทำตามขั้นตอนที่ 4 แล้ว Refresh Browser ทำการทดสอบ เพิ่มข้อความแล้วกดปุ่ม Add todo

  1. แก้ไข foreach เพิ่ม checkbox เข้าไป
<ul>
    @foreach (var todo in todos)
    {
        <li>
            <input type="checkbox" bind="@todo.IsDone" />
            <input bind="@todo.Title" />
        </li>
    }
</ul>
  1. แก้ไข Title ของหน้าให้มีจำนวนงานที่ยังไม่ IsDone
<h1>Todo (@todos.Where(todo => !todo.IsDone).Count())</h1>
  1. โค้ดทั้งหมดเป็นดังนี้
@page "/todo"
<h1>Todo</h1>

<ul>
    @foreach (var todo in todos)
    {
        <li>
            <input type="checkbox" bind="@todo.IsDone" />
            <input bind="@todo.Title" />
        </li>
    }
</ul>

<input placeholder="Something todo" bind="@newTodo" />
<button onclick="@AddTodo">Add todo</button>

@functions {
    IList<TodoItem> todos = new List<TodoItem>();
    string newTodo;

    void AddTodo()
    {
        if (!string.IsNullOrWhiteSpace(newTodo))
        {
            todos.Add(new TodoItem { Title = newTodo });
            newTodo = string.Empty;
        }
    }
}

  1. ทำตามขั้นตอนที่ 4 แล้ว Refresh Browser ทำการทดสอบ

  1. เตรียมตัว Publish ขึ้นสู่ Web Server ไฟล์จะอยู่ที่ /CBBlazor01/bin/Release/netstandard2.0/publish
dotnet publish -c Release

Source Code: https://github.com/CodeBangkok/CBBlazor01
ที่มา: https://blazor.net/docs/tutorials/build-your-first-blazor-app.html

ติดตามบทความเกี่ยวกับ Blazor ต่อไปได้ที่ CodeBangkok นะครับ

บริจาค (Donate) ให้กับ CodeBangkok ได้ที่
BTC = 3GDxhb84ho2jmAV9seAgAFJ7dy1XR3GCyc
ETH = 0x119fa8A618A0283D1834853325A8FF4fe1101230
LTC = ME2abSdDeQYuTmzZSAnHL7LGGeF836d1ut
ZEC = t1Y4NkK3Dx3yBbwCVdpXzKYrqUSJSHgaFXa

https://www.lazada.co.th/products/codebangkok-i219874509-s334754949.html

https://www.lazada.co.th/products/c-net-core-i221844611-s338593893.html?spm=a2o6z.10453683.17.2.77ba30028gg3mg&mp=3