MVC4Seminar lab3

BÀI 3: ỨNG DỤNG CRUD MỤC TIÊU  Biết cách xây dựng ứng dụng CRUD Create, Read, Update và Delete với EF trong MVC4  Biết cách upload hình lên server  Biết cách trang trí trang web với

BÀI 3: ỨNG DỤNG CRUD

MỤC TIÊU

 Biết cách xây dựng ứng dụng CRUD (Create, Read, Update và Delete) với EF trong MVC4

 Biết cách upload hình lên server

 Biết cách trang trí trang web với Jquery

MÔ TẢ

Trong bài này ban sẽ phải xây dựng một trang web với MVC4 sử dụng EF để quản lý bảng Suppliers với các chức năng thêm, xóa, sửa và truy vấn dữ liệu một cách hoàn chỉnh Ứng dụng được mô tả như các hình vẽ sau đây

Giao diện được bố trí gồm 2 tabs:

 tabEdit: chứa form cho phép xem, thêm, sửa và xóa

 tabList: chứa lưới hiển thị danh sách nhà cung cấp và cho phép chọn để sửa và xóa

Hình 1: tabEdit – Chứa form cập nhật

Hình 2: tabList - Chứa lưới hiển thị danh sách nhà cung cấp Hoạt động của form

Khởi đầu Hiển thị danh sách nhà cung cấp lên lưới

tabs.Click Chuyển đổi giữa form nhập và lưới hiển thị

btnInsert.Click Bổ sung một nhà cung cấp mới

btnUpdate.Click Cập nhật thông tin nhà cung cấp đang xem

btnDelete.Click Xóa nhà cung cấp đang xem hoặc trên hàng được chọn

btnAddNew.Click Làm sach form để nhập nhà cung cấp mới

btnEdit.Click Chọn nhà cung cấp để xem, sửa hoặc xóa

THỰC HIỆN

 Bước 1: Tạo SupplierController và Thêm Action Crud()

 Bước 2: Thiết kế View Crud.cshtml

 Bước 3: Hoàn thiện mã xử lý cho Crud

Bước 1: Tạo SupplierController và thêm Action Crud()

Cách tốt nhất là bạn tạo view cho action này trước sau đó quay lại viết mã để hoàn thiện việc xử lý thì sẽ

dễ hiểu hơn

namespace MVC4Seminar.Controllers

{

public class SupplierController : Controller

{

public ActionResult Crud()

{

return View();

}

}

}

Bước 2: Thiết kế View Crud.cshtml

Thêm view Crud.cshtml và thiết kế giao diện như sau:

@model MVC4Seminar.Models Supplier

@{

ViewBag.Title = "Supplier CRUD" ;

}

< div class ="tabs">

< ul >

< li >< a href ="#tabEdit">Supplier edition</ a ></ li >

< li >< a href ="#tabList">List of suppliers</ a ></ li >

</ ul >

< div id ="tabEdit">

< form action ="/Supplier/Crud" method ="post" enctype ="multipart/form-data">

< img src ="/Images/suppliers/@Model.Logo" style =" width :150px; height :150px" /> < div style =" display :inline-block">

< label >Supplier Id</ label >

@Html.TextBoxFor(m => m.Id)

< br />

< label >Company Name</ label >

@Html.TextBoxFor(m => m.Name)

< br />

< label >Email Address</ label >

@Html.TextBoxFor(m => m.Email)

< br />

< label >Phone Number</ label >

@Html.TextBoxFor(m => m.Phone)

< br />

< label >Logo</ label >

< input name ="uplLogo" type ="file" />

@Html.HiddenFor(m => m.Logo)

</ div >

< hr />

< input type ="submit" name ="cmdInsert" value ="Insert" />

< input type ="submit" name ="cmdUpdate" value ="Update" />

< input type ="submit" name ="cmdDelete" value ="Delete" />

< class ="button" href ="/Supplier/Crud">Add New</ a

</ form >

</ div >

< div id ="tabList">

< table class ="gridview">

< tr >

< th >Logo</ th >

< th >Id</ th >

< th >Name</ th >

< th >Email</ th >

< th >Phone</ th >

< th > &nbsp; </ th >

</ tr >

@foreach (var s in ViewBag.Suppliers)

{

< tr >

< td >< img src ="/images/suppliers/@s.Logo"/></ td >

< td >@s.Id</ td >

< td >@s.Name</ td >

< td >@s.Email</ td >

< td >@s.Phone</ td >

< td style =" text-align :center">

< class ="button" href ="/Supplier/Crud/@s.Id?cmdEdit=1">Edit</ a

< class ="button" href ="/Supplier/Crud/@s.Id?cmdDelete=1">Delete</ a

</ td >

</ tr >

}

</ table >

< hr />

< class ="button" href ="/Supplier/Crud">Add New</ a

</ div >

</ div >

@section scripts{

< style >

gridview img {

width :30px; height :30px;

}

</ style >

}

Bước 3: Hoàn thiện mã xử lý cho Crud

 Để làm việc được với CSDL, bạn cần dòng mã lệnh:

o MVC4SeminarDB db = new MVC4SeminarDB();

 Đề biết được có tham số cmdInsert hay không, bạn cần

o if (Request["cmdInsert"] != null) {…}

 Để kiểm tra xem có upload file hay không:

o if (Uploader.HasFile("uplLogo")){}

 Đề lưu file upload vào thư mục và lấy tên file:

o model.Logo = Uploader.Save("uplLogo", "~/Images/suppliers/");

 Để bổ sung một bản ghi vào CSDL:

o db.Suppliers.Add(model);

o db.SaveChanges();

 Để cập nhật một bản ghi vào CSDL:

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

o db.SaveChanges();

 Để xóa một bản ghi khỏi CSDL:

o db.Suppliers.Remove(model);

o db.SaveChanges();

 Để tìm 1 bản ghi theo khóa chính:

o var supplier = db.Suppliers.find(id);

Sau đây là toàn bộ đoạn mã nguồn của phương thức Action Crud()

public class SupplierController : Controller

{

MVC4SeminarDB db = new MVC4SeminarDB ();

public ActionResult Crud( Supplier model)

{

if (Request[ "cmdInsert" ] != null)

{

if ( Uploader HasFile( "uplLogo" ))

{

model.Logo = Uploader Save( "uplLogo" , "~/Images/suppliers/" );

}

db.Suppliers.Add(model);

db.SaveChanges();

}

else if (Request[ "cmdUpdate" ] != null)

{

if ( Uploader HasFile( "uplLogo" ))

{

model.Logo = Uploader Save( "uplLogo" , "~/Images/suppliers/" );

}

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

db.SaveChanges();

}

else if (Request[ "cmdDelete" ] != null)

{

model = db.Suppliers.Find(model.Id);

db.Suppliers.Remove(model);

db.SaveChanges();

return RedirectToAction( "Crud" );

}

else if (Request[ "cmdEdit" ] != null)

{

model = db.Suppliers.Find(model.Id);

}

ViewBag.Suppliers = db.Suppliers;

return View(model);

}

}