MVC4Seminar lab9

ThS. CNTT: Nguyễn Nghiệm – nghiemn@fpt.edu.vn Trang 1 BÀI 9: KIỂM LỖI MỤC TIÊU  Biết cách kiểm lỗi dữ liệu vào trong MVC4. MÔ TẢ Trong bài này bạn phải tạo trang web thêm mới một mặt hàng. Nếu nhập dữ liệu sai thì trang web sẽ thông báo lỗi tức thì với Jquery. Trang web này không những kiểm lỗi phía client mà còn kiểm lỗi trên server phòng ngừa khi hacker vượt qua tường rào JavaScript. Sau đây là hình ảnh của trang web khi nhập dữ liệu không đúng. ThS. CNTT: Nguyễn Nghiệm – nghiemn@fpt.edu.vn Trang 2 THỰC HIỆN  Bước 1: Bổ sung Annotation vào Model  Bước 2: Bổ sung action Validate()-GET vào ProductController  Bước 3: Tạo View Validate.cshtml  Bước 4: Bổ sung Validate()-POST vào ProductController Bước 1: Bổ sung Annotation vào Model Trong MVC4, Model được sử dụng để tiếp nhận dữ liệu vào từ giao diện. Nó cũng đồng thời quản lý các thực thể trong CSDL. Bây giờ bạn cọn biết một nhiệm vụ khác là kiểm loại dữ liệu vào. Với các Annotation đánh dấu trên các thuộc tính kết nối với các trường form, bạn có thể kiểm lỗi một cách hiệu quả cả 2 phía client và server. Sau đây là các annotation được sử dụng để kiểm lỗi:  Không không để trống Name và Image  UnitPrice phải là số dương  Image chỉ chấp nhận ảnh gif, jpg hay png  Description không vượt quá 2000 ký tự public class Product { public int Id { get; set; } [Required(ErrorMessage="Vui lòng nhập tên hàng hóa !")] public String Name { get; set; } [Required, Range(0, Double.MaxValue)] public double UnitPrice { get; set; } [Required, RegularExpression(@"\w+\.(gif|png|jpg)$")] public String Image { get; set; } [StringLength(2000)] public String Description { get; set; } public int CategoryId { get; set; } public String SupplierId { get; set; } public virtual Supplier Supplier { get; set; } public virtual Category Category { get; set; } } Bước 2: Bổ sung action Validate() - GET vào ProductController Action GET là action chỉ được phép gọi với phương thức GET của web để hiển thị form nhập liệu. Action này chuyển 2 selectlist để hiển thị lên DropDownList của view Validate.cshtml. [HttpGet] public ActionResult Validate() { ViewBag.CategoryId = new SelectList(db.Categories, "Id", "Name"); ViewBag.SupplierId = new SelectList(db.Suppliers, "Id", "Name"); return View(); } ThS. CNTT: Nguyễn Nghiệm – nghiemn@fpt.edu.vn Trang 3 Bước 3: Tạo View Validate.cshtml View Validate.cshtml là form nhập liệu có kiểm soát lỗi dữ liệu đầu vào dựa vào các qui luật kiểm lỗi đã được cài đặt sẵn trong Model. @model MVC4Seminar.Models.Product @{ ViewBag.Title = "Kiểm lỗi"; } @using (Html.BeginForm()) { <! Chống giả lập yêu cầu > @Html.AntiForgeryToken() <! Hiển thị kiểm lỗi phía server > @Html.ValidationSummary(true) <fieldset> <legend>Thông tin hàng hóa</legend> <div class="editor-label">Tên hàng hóa</div> <div class="editor-field"> @Html.TextBoxFor(model => model.Name) <! Hiển thị kiểm lỗi phía client với jquery > @Html.ValidationMessageFor(model => model.Name) </div> <div class="editor-label">Đơn giá</div> <div class="editor-field"> @Html.TextBoxFor(model => model.UnitPrice) <! Hiển thị kiểm lỗi phía client với jquery > @Html.ValidationMessageFor(model => model.UnitPrice) </div> <div class="editor-label">Hình ảnh</div> <div class="editor-field"> @Html.TextBoxFor(model => model.Image) @Html.ValidationMessageFor(model => model.Image) </div> <div class="editor-label">Chủng loại</div> <div class="editor-field"> @Html.DropDownList("CategoryId") </div> <div class="editor-label">Nhà cung cấp</div> <div class="editor-field"> @Html.DropDownList("SupplierId") </div> <div class="editor-label">Mô tả</div> <div class="editor-field"> @Html.TextAreaFor(model => model.Description, new { rows=5}) <! Hiển thị kiểm lỗi phía client với jquery > @Html.ValidationMessageFor(model => model.Description) </div> ThS. CNTT: Nguyễn Nghiệm – nghiemn@fpt.edu.vn Trang 4 <p> <input type="submit" value="Create" /> </p> </fieldset> } Bước 4: Bổ sung Validate() - POST vào ProductController Khi bạn nhấp vào nút [Create] thì form sẽ được kiểm lỗi phía client trước. Nếu tất cả điều hợp lệ thì dữ liệu form sẽ được chuyển đến action Validate() – POST để xử lý. Tại đây dữ liệu sẽ được kiểm tra lại một lần nữa. 2 công việc kiểm lỗi được thực hiện ở đây là  ValidateAntiForgeryToken: ngăn chặn yêu cầu giả  ModelState.IsValid: kiểm lỗi dữ liệu của tham số model [HttpPost, ValidateAntiForgeryToken] public ActionResult Validate(Product model) { if (ModelState.IsValid) { db.Products.Add(model); db.SaveChanges(); } ViewBag.CategoryId = new SelectList(db.Categories, "Id", "Name"); ViewBag.SupplierId = new SelectList(db.Suppliers, "Id", "Name"); return View(model); } . vào dựa vào các qui luật kiểm lỗi đã được cài đặt sẵn trong Model. @model MVC4Seminar. Models.Product @{ ViewBag.Title = "Kiểm lỗi"; }