MVC4Seminar lab3

ThS. CNTT: Nguyễn Nghiệm – Trang 1

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


ThS. CNTT: Nguyễn Nghiệm – Trang 2


Hình 2: tabList - Chứa lưới hiển thị danh sách nhà cung cấp
Hoạt động của form
Hành động
Mô tả
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

ThS. CNTT: Nguyễn Nghiệm – Trang 3

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 />

ThS. CNTT: Nguyễn Nghiệm – Trang 4

<input type="submit" name="cmdInsert" value="Insert" />
<input type="submit" name="cmdUpdate" value="Update" />
<input type="submit" name="cmdDelete" value="Delete" />
<a 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">
<a class="button" href="/Supplier/Crud/@s.Id?cmdEdit=1">Edit</a>
<a class="button" href="/Supplier/Crud/@s.Id?cmdDelete=1">Delete</a>
</td>
</tr>
}
</table>
<hr />
<a 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/");

ThS. CNTT: Nguyễn Nghiệm – Trang 5

 Để 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);
}

ThS. CNTT: Nguyễn Nghiệm – Trang 6

}