วิธีรับตัวแปรจากอินพุต HTML ใน Blazor C#

Blazor เป็นเฟรมเวิร์กที่ทรงพลังสำหรับการสร้างเว็บแอปพลิเคชันเชิงโต้ตอบด้วย C# แทนที่จะเป็น JavaScript หนึ่งในคุณสมบัติหลักของ Blazor คือความสามารถในการผูกโค้ด C# กับองค์ประกอบ HTML ทำให้ง่ายต่อการบันทึกอินพุตของผู้ใช้และใช้ในแอปพลิเคชันของคุณ ในบทความนี้ เราจะสำรวจวิธีรับตัวแปรจากองค์ประกอบอินพุต HTML ใน Blazor ทั้งในแอปพลิเคชัน Blazor Server และ Blazor WebAssembly

ข้อมูลเบื้องต้นเกี่ยวกับการเชื่อมโยงข้อมูลสองทางของ Blazor

Blazor นำเสนอคุณสมบัติที่เรียกว่า “การเชื่อมโยงข้อมูลแบบสองทาง” ซึ่งอนุญาตให้มีการเปลี่ยนแปลงอินเทอร์เฟซผู้ใช้ (UI) เพื่ออัปเดตตัวแปร C# พื้นฐานโดยอัตโนมัติ และในทางกลับกัน สิ่งนี้มีประโยชน์อย่างยิ่งเมื่อคุณต้องการบันทึกข้อมูลที่ผู้ใช้ป้อนลงในช่องอินพุต HTML และสะท้อนการเปลี่ยนแปลงเหล่านั้นในโค้ด C# ของคุณทันที

เริ่มต้นใช้งาน

หากต้องการรับตัวแปรจากช่องป้อนข้อมูล HTML คุณต้องมีองค์ประกอบหลักบางประการ:

1. อินพุต HTML : ช่องป้อนข้อมูลที่ผู้ใช้ป้อนข้อมูล
2. ตัวแปร C# : ตัวแปร C# ที่เก็บข้อมูลจากอินพุต
3. Data Binding : การเชื่อมต่อระหว่างช่องป้อนข้อมูลและตัวแปร C# โดยทั่วไปจะผ่านคำสั่ง @bind ใน Blazor

ในส่วนต่อไปนี้ เราจะอธิบายตัวอย่างต่างๆ เพื่อสาธิตวิธีการทำงาน

ตัวอย่างที่ 1: การเชื่อมการป้อนข้อความอย่างง่าย

วิธีที่ง่ายที่สุดในการรับอินพุตของผู้ใช้คือการใช้คำสั่ง @bind สิ่งนี้จะผูกองค์ประกอบอินพุต HTML เข้ากับตัวแปร C# โดยอัตโนมัติ

ตัวอย่างรหัส (ส่วนประกอบมีดโกน)

 @page "/input-example" <h3>Simple Input Binding in Blazor</h3> <label for="userName">Enter your name:</label> <input type="text" @bind="userName" /> <p>Hello, @userName!</p> @code { private string userName = string.Empty; }

คำอธิบาย:

1. คำสั่ง @bind ผูกองค์ประกอบ input เข้ากับตัวแปร userName ใน C# เมื่อใดก็ตามที่ผู้ใช้พิมพ์ลงในช่องป้อนข้อมูล ตัวแปร userName จะได้รับการอัปเดตโดยอัตโนมัติ
2. ย่อหน้า <p>Hello, @userName!</p> จะแสดงค่าของ userName แบบไดนามิก โดยแสดงข้อความที่อัปเดตแบบเรียลไทม์ตามที่ผู้ใช้พิมพ์

ในตัวอย่างนี้ ตัวแปร userName ใช้จะเชื่อมโยงกับช่องป้อนข้อมูล และการผูกแบบสองทางของ Blazor ช่วยให้มั่นใจได้ว่าเมื่อใดก็ตามที่ผู้ใช้แก้ไขข้อความ ค่าของ userName จะได้รับการอัปเดตแบบเรียลไทม์

ตัวอย่างที่ 2: การรับและการใช้อินพุตจากการคลิกปุ่ม

บางครั้งคุณจำเป็นต้องดำเนินการกับข้อมูลที่ผู้ใช้ป้อน เช่น คลิกปุ่มเพื่อส่งค่าหรือประมวลผลเพิ่มเติม สิ่งนี้สามารถบรรลุได้อย่างง่ายดายใน Blazor

ตัวอย่างรหัส (ส่วนประกอบมีดโกน)

 @page "/submit-input" <h3>Submit Input in Blazor</h3> <label for="age">Enter your age:</label> <input type="number" @bind="age" /> <button @>Submit</button> <p>You entered: @age</p> @code { private int age; private void SubmitAge() { // Do something with the age variable (eg, validation, submission, etc.) Console.WriteLine($"User's age is {age}"); } }

คำอธิบาย:

1. คำสั่ง @bind="age" ผูกฟิลด์อินพุตกับตัวแปร age
2. @ ผูกเหตุการณ์การคลิกปุ่มเข้ากับเมธอด SubmitAge
3. เมื่อผู้ใช้คลิกปุ่ม ระบบจะเรียกเมธอด SubmitAge ซึ่งจะพิมพ์อายุที่ป้อนไปยังคอนโซล

ในตัวอย่างนี้ ผู้ใช้สามารถป้อนอายุของตนเองได้ และเมื่อคลิกปุ่ม "ส่ง" เมธอด SubmitAge จะถูกทริกเกอร์ให้ดำเนินการกับตัวแปร age

ตัวอย่างที่ 3: การตรวจสอบอินพุต

Blazor ช่วยให้คุณดำเนินการตรวจสอบอินพุตได้อย่างง่ายดายโดยการรวมการเชื่อมโยงข้อมูลกับส่วนประกอบของแบบฟอร์มเช่น <EditForm>

ตัวอย่างรหัส (ส่วนประกอบมีดโกน)

 @page "/validation-example" <h3>Input Validation in Blazor</h3> <EditForm Model="@person" OnValidSubmit="HandleValidSubmit"> <DataAnnotationsValidator /> <ValidationSummary /> <label for="firstName">First Name:</label> <InputText @bind-Value="person.FirstName" /> <ValidationMessage For="@(() => person.FirstName)" /> <button type="submit">Submit</button> </EditForm> <p>You entered: @person.FirstName</p> @code { private Person person = new Person(); private void HandleValidSubmit() { // Process the valid input Console.WriteLine($"First Name: {person.FirstName}"); } public class Person { [Required] public string FirstName { get; set; } } }

คำอธิบาย:

1. ส่วนประกอบ <EditForm> ใช้เพื่อล้อมฟิลด์อินพุตและดำเนินการตรวจสอบความถูกต้อง
2. @bind-Value="person.FirstName" ผูกฟิลด์อินพุตกับคุณสมบัติ FirstName ของวัตถุ person
3. คอมโพเนนต์ DataAnnotationsValidator ใช้คำอธิบายประกอบข้อมูล (เช่น [Required] ) เพื่อตรวจสอบความถูกต้องของอินพุต
4. หากอินพุตถูกต้องและส่งแบบฟอร์มแล้ว จะเรียกใช้เมธอด HandleValidSubmit เพื่อประมวลผลข้อมูล

การตรวจสอบความถูกต้อง:

• หากผู้ใช้ไม่ได้ระบุชื่อ (เนื่องจากคำอธิบายประกอบ [Required] ) ข้อความการตรวจสอบความถูกต้องจะปรากฏขึ้น และแบบฟอร์มจะไม่ส่งจนกว่าข้อมูลที่ป้อนจะถูกต้อง

การเชื่อมโยงขั้นสูงกับประเภทอินพุตอื่นๆ

Blazor รองรับประเภทอินพุตที่หลากหลาย เช่น กล่องข้อความ ช่องทำเครื่องหมาย ปุ่มตัวเลือก เมนูแบบเลื่อนลง ฯลฯ คุณสามารถผูกตัวแปรเข้ากับองค์ประกอบเหล่านี้ในลักษณะเดียวกัน

ตัวอย่าง: การผูกช่องทำเครื่องหมาย

 @page "/checkbox-example" <h3>Checkbox Binding in Blazor</h3> <label for="subscribe">Subscribe to newsletter:</label> <input type="checkbox" @bind="isSubscribed" /> <p>You are @(isSubscribed ? "subscribed" : "not subscribed") to the newsletter.</p> @code { private bool isSubscribed = false; }

ในตัวอย่างนี้ ช่องทำเครื่องหมายจะผูกไว้กับตัวแปร isSubscribed และเมื่อผู้ใช้ทำเครื่องหมายหรือยกเลิกการทำเครื่องหมายในช่อง ค่าของ isSubscribed จะได้รับการอัปเดตโดยอัตโนมัติ

บทสรุป

การรับตัวแปรจากอินพุต HTML ใน Blazor นั้นง่ายและมีประสิทธิภาพ ต้องขอบคุณการเชื่อมโยงข้อมูลสองทางอันทรงพลังของ Blazor ด้วยการใช้คำสั่ง @bind คุณสามารถเชื่อมโยงฟิลด์อินพุตเข้ากับตัวแปร C# ได้อย่างรวดเร็ว ทำให้มั่นใจได้ว่าการเปลี่ยนแปลงใน UI จะสะท้อนให้เห็นในโค้ดของคุณและในทางกลับกัน

ไม่ว่าคุณจะสร้างแบบฟอร์มง่ายๆ หรือตรรกะการตรวจสอบอินพุตที่ซับซ้อน ความสามารถในการผูกข้อมูลของ Blazor จะทำให้กระบวนการทำงานกับอินพุตของผู้ใช้ง่ายขึ้น ตั้งแต่กล่องข้อความไปจนถึงช่องทำเครื่องหมาย Blazor จัดการการบูรณาการระหว่าง HTML และ C# ได้อย่างราบรื่น ทำให้เป็นตัวเลือกที่ยอดเยี่ยมสำหรับการสร้างแอปพลิเคชันเว็บเชิงโต้ตอบ