Aspx.net / MVC — August 14, 2016 at 5:45 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 1)

by

1. Trang hiển thị quản lý menu

Action Index hiển thị danh sách menu

public ActionResult Index()

{

return View(db.Menus);

}

View :

// tạo view theo hình sau ;

– chạy ứng dụng và gọi tới trang menu ( /menu) ta được kết quả như hình sau :

– Sau này ta sẽ xây dựng trang quản trị để có các đường dẫn tới các Controller này

– Sửa lại 1 chút view bằng cách thay tên tiếng việt và xóa bỏ 1 vài code không dùng đến , 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) {

<tr>

<td>

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

</td>

<td>

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

</td>

<td>

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

@Html.ActionLink(“Xóa”, “Delete”, new { id=item.MenuID })

</td>

</tr>

}

</table>

– Chạy lại ta được kết quả như hình sau :

– Ta sẽ lần lượt xây dựng các chức năng thêm , sửa , xóa ( tương ứng với các Action là Create, Edit,Delete) ở phần sau .

– Chúng ta có thể đổi tên các Action này tùy thích .Nhưng 1 lời khuyên là chúng ta nên để các tên chuẩn mà mã máy tạo ra , để đỡ mất công trong việc chỉnh sửa mã máy .

2. Thêm mới Menu

Controller :

 

[HttpGet]

public ActionResult Create()

{

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

return View();

}

[HttpPost]

public ActionResult Create([Bind(Exclude = “MenuID”)] Menu model)

{

if (ModelState.IsValid)

{

db.Menus.Add(model);

db.SaveChanges();

return RedirectToAction(“Index”);

}

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

return View(model);

}

– View Create , Edit có mục chọn menu cha , ta load dữ liệu danh sách menu để người dùng chọn ( dưới dạng DropdowList ) , Do đó ta dùng tính năng ViewBag của MVC để truyền dữ liệu sang View

View Create :

– Ta chú ý thấy View Create và View Edit có mã Html gần tương tự nhau .Do đó để tránh trùng lặp code , ta tạo sẵn 1 PartialView chứa mã create , edit .Sau đó từ các View Create , Edit gọi các Partial View này .Các bạn cũng cần chú ý tới kỹ thuật này trong lập trình ứng dụng MVC.

Tạo Partal View hỗ trợ create – edit

Tạo 1 PartialView trong trong thư mục View/News có tên là EditorPartial , chọn các thông số như hình sau :

– Điều chỉnh lại mã do Visual Studio tạo ra để sử dụng DropdowList danh sách chọn Menu cha.

– Mã EditorPartial như sau :

– thay @Html.EditorFor(model => model.pMenuID) bằng  @Html.DropDownList(“pMenuID”, string.Empty)

pMenuID chính là tên của ViewBag khai báo trong Controller

Mã hoàn chỉnh như sau

@model NewsMvc.Models.Menu

@section Scripts {

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

}

@using (Html.BeginForm()) {

@Html.ValidationSummary(true)

<fieldset>

<legend>Tạo mới Menu</legend>

<div class=”editor-label”>

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

</div>

<div class=”editor-field”>

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

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

</div>

<div class=”editor-label”>

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

</div>

<div class=”editor-field”>

@Html.DropDownList(“pMenuID”, string.Empty)

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

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

</div>

<p>

<input type=”submit” value=”Lưu lại” />

</p>

</fieldset>

}

// Mã View Create đơn giản gọi tới PartialView đơn giản như sau :

@{

ViewBag.Title = “Create”;

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

}

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

– Chạy ứng dụng và gọi tới trang menu ( /menu) được kết quả như hình sau :

– Nhấn vào link thêm mới được kết quả như hình sau

– Nhập tên Menu và menu cha của nó .Nếu là menu cấp 1 thì menu cha để trống .Nhấn nút tạo mới , thông tin sẽ được cập nhật xuống CSDL và trên Layout

– Các bạn cũng có thể kiếm tra tính năng validation của MVC bằng cách không nhập gì cả , nhấn nút thêm mới , jQuery sẽ báo yêu cầu bạn nhập những trường không được trống .

Nguồn: laptrinhviet.vn

Leave a Comment

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