Thông tin tài liệu
ThS. CNTT: Nguyễn Nghiệm – nghiemn@fpt.edu.vn 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 – nghiemn@fpt.edu.vn 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 – nghiemn@fpt.edu.vn 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 – nghiemn@fpt.edu.vn 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> </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 – nghiemn@fpt.edu.vn 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 – nghiemn@fpt.edu.vn Trang 6
}
. 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,. Action Crud()
public class SupplierController : Controller
{
MVC4SeminarDB db = new MVC4SeminarDB();
public ActionResult Crud(Supplier model)
Ngày đăng: 17/03/2014, 00:30
Xem thêm: MVC4Seminar lab3
