1.สร้างโปรเจค MVC
Remark : ตรวจสอบที่ Web.Config ว่า ClientValidationEnabled แล UnobtrusiveJavaScriptEnabled ตองมีค่าเป็น True
2.สร้าง Model Customer โดยมี Properties Name และ Age ในส่วนบนให้ using System.ComponentModel.DataAnnotations เพื่อให้สามารถกำหนด metadata สำหรับ ASP.NET MVC and ASP.NET data controls (อ้างอิงจาก http://msdn.microsoft.com/en-us/library/system.componentmodel.dataannotations.aspx)
3.ในส่วนของ View Template ให้กำหนด Type ของ Model ที่ใช้ในหน้านี้ในส่วนบนสุด ในตัวอย่างนี้เราจะทำงานเกี่ยวกับ MvcApplication1.Models.Customer ที่เราสร้างขึ้นมาตอนแรก
จากนั้น Reference jquery.validate.min.js และ jquery.validate.unobtrusive.min.js
จากนั้นสร้าง Form สำหรับทำการรับ Input และ Post ข้อมูลส่งไปยัง Controller
@using (Html.BeginForm("Save", "Home", FormMethod.Post)) คำสั่งนี้หมายความว่าเมื่อเรากดปุ่ม Submit ก็จะเกิด Request ส่งไป Controller Home ที่ Action Save
4. ในส่วนของ Controller ให้สร้าง Action Save ขึ้นมา
ใน Action Save สามารถ Vaidate ได้ว่า Form มีการกรอกขอมูลถูกต้อง ครบถ้วน หรือไม่ โดยตรวจสอบจาก ModelState.IsValid ว่ามีค่าเป็น True หรือไม่
5.เมือทดสอบจะแสดงหน้าจอ ดังรูป
ถ้ายังไม่ได้กรอกข้อมูลแล้วกดปุ่ม Create ระบบจะแสดงข้อความ ดังรูป
ในกรณีที่ต้องการแก้ไข CSS ของ validate error สามารถแก้ไขได้ตาม CSS นี้
ไม่มีความคิดเห็น:
แสดงความคิดเห็น