Aspx.net / MVC — August 14, 2016 at 5:29 pm

Chương 5: Tương tác dữ liệu cơ bản thủ công và Dùng mã tự động trên CSDL (P1)

by

1. Thêm mới dữ liệu

Các thao tác thêm , sửa , xóa … được xử lý tại ProductController .Kết hợp với các kỹ thuật lập trình Ajax , jQuery thì chúng ta có ta có thể xây dựng được các ứng dụng thuận tiện .Vấn đề này sẽ được đề cập tới trong các giáo trình về jQuery , ajax , web aip

Sample3Controller :

Create Action

VinaEntity db = new VinaEntity();

public ActionResult Index()

{

return View(db.Students);

}

#region Create

[HttpGet]

public ActionResult Create()

{

return View();

}

[HttpPost]

public ActionResult Create([Bind(Exclude = “ID”)]Student model)

{

db.Students.Add(model);

db.SaveChanges();

return View();

}

#endregion

// Có 2 Action Create

– 1 Action được gọi để trả về 1 View dùng để nhập các giá trị của Student là : ID , Name .Được đặt sau Attribute : HttpGet

– 1 Action được gọi khi người dùng nhấn nút thêm mới trên View để post dữ liệu.Phương thức này đặt sau Attribute : HttpPost .Action này nhận vào tham số là 1 đối tượng Student , sau đó dùng câu truy vấn Linq để thêm mới dữ liệu .

– Ta chú ý thêm 1 thành phần đó là : [Bind(Exclude=”ID”)]

Đây là khai báo để chỉ định trường ID ( là trường khóa tự động tăng không cần nhập ) .Khi post dữ liệu từ View lên Controller , thuộc tính ID chưa được khai báo , nếu không chỉ định thuộc tính không cần khai báo thì sẽ phát sinh lỗi .

View : Create

// tạo View Create tương tự view Index tuy nhiên ta lựa chọn template là Create như hình  dưới đây :

Mã VS tự động tạo ra như sau :

@model Mvc3App.Models.Student

 

@{

ViewBag.Title = “Create”;

Layout = “~/Views/Shared/_Layout.cshtml”;

}

 

<script src=”@Url.Content(“~/Scripts/jquery.validate.min.js”)” type=”text/javascript”></script>

<script src=”@Url.Content(“~/Scripts/jquery.validate.unobtrusive.min.js”)” type=”text/javascript”></script>

<h2>Create</h2>

 

@using (Html.BeginForm()) {

@Html.ValidationSummary(true)

 

<fieldset>

<legend>Student</legend>

 

<div class=”editor-label”>

@Html.LabelFor(model => model.Name)

</div>

<div class=”editor-field”>

@Html.EditorFor(model => model.Name)

@Html.ValidationMessageFor(model => model.Name)

</div>

 

<p>

<input type=”submit” value=”Create” />

</p>

</fieldset>

}

 

<div>

@Html.ActionLink(“Back to List”, “Index”)

</div>

 

Chú ý : Ta có thể đổi các giá trị sang tên Tiếng Việt.Các vấn đề về xử lý View , các HtmlHelper sẽ được giới thiệu trong loạt bài về Razor View .

– Ở đây VS tạo ra các mã Label , TextBox , Submit tương ứng với mã html

– Chạy ứng dụng , gọi Sample3Controller từ địa chỉ : /Sample3

– Nhấn vào Link Create ( có thể đổi text bằng tiếng việt ) để gọi Action Create .Có thể gõ trực tiếp trên trình duyệt địa chỉ : /Sample3/create . Để gọi Action create .Ta được giao diện như hình sau :

– Nhập giá trị Name , sau đó nhấn Create , dữ liệu sẽ được thêm mới , và cập nhật tại ngay lên View .

2. Sửa dữ liệu

Action Edit

#region Edit

[HttpGet]

public ActionResult Edit(int id)

{

return View(db.Students.Find(id));

}

[HttpPost]

public ActionResult Edit([Bind(Exclude = “ID”)]Student model)

{

if (ModelState.IsValid)

{

db.Entry(model).State = EntityState.Modified;

db.SaveChanges();

return RedirectToAction(“Index”);

}

return View(model);

}

 

– Tương tự Create , Edit cũng có 2 action tương ứng là get và post , tham số phương thức Get là id của Student để tìm ra Student cần thay đổi .Tham số phương thức post tương tự tham số trường hợp create .( đây là 1 phương thức của Linq)

– Chú ý kiểm tra : ModelState.IsValid .

– Đây là kiểm tra validate dưới Client ( dùng jQuery ) .Ví dụ như kiểm tra 1 thuộc tính ( trường ) có cho phép để trống không , 1 trường là số …

View Edit

Tạo Edit View tương tự trường hợp create , chọn template là Edit .Code như sau :

Code do VS sinh ra

 

@model Mvc3App.Models.Student

 

@{

ViewBag.Title = “Edit”;

Layout = “~/Views/Shared/_Layout.cshtml”;

}

<script src=”@Url.Content(“~/Scripts/jquery.validate.min.js”)” type=”text/javascript”></script>

<script src=”@Url.Content(“~/Scripts/jquery.validate.unobtrusive.min.js”)” type=”text/javascript”></script>

<h2>Edit</h2>

 

@using (Html.BeginForm()) {

@Html.ValidationSummary(true)

 

<fieldset>

<legend>Student</legend>

 

@Html.HiddenFor(model => model.ID)

 

<div class=”editor-label”>

@Html.LabelFor(model => model.Name)

</div>

<div class=”editor-field”>

@Html.EditorFor(model => model.Name)

@Html.ValidationMessageFor(model => model.Name)

</div>

 

<p>

<input type=”submit” value=”Save” />

</p>

</fieldset>

}

 

<div>

@Html.ActionLink(“Back to List”, “Index”)

</div>

– Chạy ứng dụng và gọi Sample3Controller : /Sample3

– Nhấn là Link Edit để sửa Student tương ứng.Ta được kết quả như hình sau :

Get Edit action được gọi , sau khi thay đổi nội dung , nhấn save , lại những thông tin thay đổi sẽ được lưu lại dưới CSDL

3. Xóa dữ liệu :

Action Delete :

[HttpGet]

public ActionResult Delete(int id)

{

return View(db.Students.Find(id));

}

 

[HttpPost, ActionName(“Delete”)]

public ActionResult DeleteConfirmed(int id)

{

var _product = db.Students.Find(id);

db.Students.Remove(_product);

db.SaveChanges();

return RedirectToAction(“Index”);

}

// Chú ý Action Delete đều nhận vào tham số kiểu là int , nên quá tải phương thức không cho phép , vì thể cần đặt tên cho ActionDelete phương thức post , hoặc get khác nhau .Ở đây ta đổi tên phương thức post là : DeleteConfirmed , và dùng 1 Attribute chỉ định tên Action vẫn là delete

// Khác với Action khác trả về 1 View , Action delete ta redirect ( điều hướng ) về Action Index

View Delete:

Tạo view Delete tương tự Edit , Create .Chọn template là Delete

@model Mvc3App.Models.Student

 

@{

ViewBag.Title = “Delete”;

Layout = “~/Views/Shared/_Layout.cshtml”;

}

 

<h2>Delete</h2>

 

<h3>Are you sure you want to delete this?</h3>

<fieldset>

<legend>Student</legend>

 

<div class=”display-label”>

Name

</div>

<div class=”display-field”>

@Html.DisplayFor(model => model.Name)

</div>

</fieldset>

@using (Html.BeginForm()) {

<p>

<input type=”submit” value=”Delete” /> |

@Html.ActionLink(“Back to List”, “Index”)

</p>

}

// chạy ứng dụng và gọi Sample3Controller : /Sample3

Nhấn vào Delete link và xóa Student , thông tin xóa sẽ được cập nhật ngay xuống CSDL

Nguồn: laptrinhviet.net

Leave a Comment

Your email address will not be published. Required fields are marked *