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

Chương 6: Quản lý thêm , sửa , xóa bảng menu xây dựng web tin tức (phần 2)

by

1. Sửa Menu

– Tương tự tính năng Create , tính năng Edit có mã tương tự .Action nhận vào tham số là id menu cần sửa , sau đó điều hướng tới trang chỉnh nội dung , và cập nhật xuống CSDL

– View Create và Edit dùng chung Partial View : EditorPartial.cshtml

– PartialView này phải đặt cùng thư mục của thư mục chứa view Create, Edit hoặc trong thư mục Shared

Controller :

 

public ActionResult Edit(int id)

{

var _Menu = db.Menus.Find(id);

ViewBag.pMenuID = new SelectList(db.Menus, “MenuID”, “MenuName”,_Menu.MenuID);

return View(_Menu);

}

 

//

// POST: /Menu/Edit/5

 

[HttpPost]

public ActionResult Edit(Menu model)

{

if (ModelState.IsValid)

{

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

db.SaveChanges();

return RedirectToAction(“Index”);

}

ViewBag.pMenuID = new SelectList(db.Menus, “MenuID”, “MenuName”,model.MenuID);

return View(model);

}

– Chú ý đối tượng ViewBag để tạo danh sách menu cha trong Action Edit khác 1 chút Action Create do cần chọn Menu Cha hiện tại khi sửa .

View Edit đơn giản như view Create như sau :

 

@{

ViewBag.Title = “Edit”;

}

@{Html.RenderPartial(“EditorPartial”);}

– Chạy ứng dụng và gọi menu Edit như hình dưới

2. Delete menu

– Chúng ta có thể tạo Action Delete như thông thường .

– Ở đây chúng tôi hướng dẫn cách dùng Ajax với jQuery để gọi tới Action Delete để tăng tính tương tác giữa ứng dụng và người dùng

Controller :

 

[HttpPost]

public ActionResult Delete(int id)

{

var _Menu = db.Menus.Find(id);

_Menu.News.ToList().ForEach(m => db.News.Remove(m));

db.Menus.Remove(_Menu);

db.SaveChanges();

return new EmptyResult();

}

Action Delete nhận phương thức Post với tham số là id của Menu cần xóa và làm các công việc sau :

+) Xóa các bài viết (News) có MenuID là id

+) Xóa Menu có MenuID là id

+) Action trên không trả về giá trị nào

View :

– Ta không thiết kế View Delete , mà ta gọi Action Delete trong trang Index

– Danh sách Menu được hiển thị trên 1 table .Ta sẽ dùng jQuery gọi Action Delete , đồng thời xóa ngay dòng table tương ứng ngay trên View chứ không load lại website .Điều này làm cho ứng dụng chạy ngay sau khi nhấn link delete

– Để làm điều này ta thay đổi mã View Index như sau :

 

@model IEnumerable<NewsMvc.Models.Menu>

@{

ViewBag.Title = “Index”;

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

}

<p>

@Html.ActionLink(“Thêm mới”, “Create”)

</p>

<table>

<tr>

<th>

@Html.DisplayNameFor(model => model.MenuName)

</th>

<th>

@Html.DisplayNameFor(model => model.pMenuID)

</th>

<th></th>

</tr>

@foreach (var item in Model)

{

// thêm id cho từ dòng dữ liệu để thực hiện truy vấn xóa

<tr id=”row-@item.MenuID”>

<td>

@Html.DisplayFor(modelItem => item.MenuName)

</td>

<td>

@Html.DisplayFor(modelItem => item.pMenuID)

</td>

<td>

@Html.ActionLink(“Sửa”, “Edit”, new { id = item.MenuID }) |

@* thêm thuộc tính data-id để lấy thông tin về dòng nào đang gọi Action Delete *@

<a href=”#” class=”RemoveLink” data-id=”@item.MenuID”>Xóa</a>

</td>

</tr>

}

</table>

Mã JavaScript

 

<script type=”text/javascript”>

$(function () {

$(‘.RemoveLink’).click(function () {

var x = $(this).attr(“data-id”);

if (confirm(“Đối tượng sẽ bị xóa.Bạn có muốn không ?”)) {

$.ajax({

type: “POST”,

url: ‘@Url.Action(“Delete”, “Menu”)’,

data: { id: x }

});

$(“#row-” + x).remove();

}

})

})

</script>

– Chúng ta cần khai báo thư viện jQuery , ở đây chúng ta khai báo thư viện jQuery trong Layout , có 1 chú ý là ta cần khai báo thư viện jQuery lên đầu trong layout như sau :

 

<head>

<meta charset=”utf-8″ />

<meta name=”viewport” content=”width=device-width” />

<title>@ViewBag.Title</title>

@Scripts.Render(“~/bundles/jquery”)

@Styles.Render(“~/Content/css”)

@Scripts.Render(“~/bundles/modernizr”)

</head>

<body>

<header>

<div>@Html.Partial(“HeaderPartial”)</div>

<nav class=”mainMenu”>@Html.Action(“MenuPartial”, “Menu”)</nav>

</header>

Code hoàn chỉnh View Index

 

@model IEnumerable<NewsMvc.Models.Menu>

@{

ViewBag.Title = “Index”;

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

}

<script type=”text/javascript”>

$(function () {

$(‘.RemoveLink’).click(function () {

var x = $(this).attr(“data-id”);

if (confirm(“Đối tượng sẽ bị xóa.Bạn có muốn không ?”)) {

$.ajax({

type: “POST”,

url: ‘@Url.Action(“Delete”, “Menu”)’,

data: { id: x }

});

$(“#row-” + x).remove();

}

})

})

</script>

<p>

@Html.ActionLink(“Thêm mới”, “Create”)

</p>

<table>

<tr>

<th>

@Html.DisplayNameFor(model => model.MenuName)

</th>

<th>

@Html.DisplayNameFor(model => model.pMenuID)

</th>

<th></th>

</tr>

@foreach (var item in Model)

{

// thêm id cho từ dòng dữ liệu để thực hiện truy vấn xóa

<tr id=”row-@item.MenuID”>

<td>

@Html.DisplayFor(modelItem => item.MenuName)

</td>

<td>

@Html.DisplayFor(modelItem => item.pMenuID)

</td>

<td>

@Html.ActionLink(“Sửa”, “Edit”, new { id = item.MenuID }) |

@* thêm thuộc tính data-id để lấy thông tin về dòng nào đang gọi Action Delete *@

<a href=”#” data-id=”@item.MenuID” class=”RemoveLink”>Xóa</a>

</td>

</tr>

}

</table>

Chạy ứng dụng nhấn Link xóa sẽ hiện lên thông báo , nếu nhấn đồng ý thì sẽ xóa dữ liệu trên view và dưới CSDL như hình sau :

3. Tổng kết

– Chúng ta đã xử lý được CRUD Menu ,trong các phần này chúng ta chú ý tới các kỹ thuật sau:

– Dùng ViewBag tạo dữ liệu cho DropdowList

– Dùng chung view Create , Edit

– Delete dữ liệu bất đồng bộ dùng jQuery

Nguồn: laptrinhviet.vn

Leave a Comment

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