Chúng ta đã hoàn tất việc triển khai thực hiện và thử nghiệm các ứng dụng của ứng dụng mua bán giáo trình. Bây giờ chúng ta cần phải thực hiện các giao diện ngƣời dùng HTML cho nó.
46 Nguyễn Trọng Trí – Lớp HT02
Chúng ta sẽ làm điều này bằng cách cài đặt “ View “ để tạo ra một giao diện ngƣời dùng thích hợp khi gọi RenderView () :
Trong đoạn mã ví dụ trên tham số “Danhsachgt” của RenderView() chỉ là tên của một View mà chúng ta muốn render, và tham số thứ hai là một đối tƣợng danh sách các danh mục sản phẩm cụ thể mà chúng ta muốn truyền vào đối tƣợng View sử dụng nhƣ là dữ liệu để tạo ra HTML thích hợp cho việc tao giao diện ngƣời dùng .
Các ASP .NET MVC Framework hỗ trợ khả năng sử dụng bất kỳ công cụ khuôn mẫu để giúp ta tạo ra các giao diện ngƣời dùng (bao gồm cả các công cụ template hiện có giống nhƣ NVelocity, Brail – cũng nhƣ những template mới mà bạn tự viết). Theo mặc định các ASP.NET MVC Framework hiện tại sử dụng trang ASP.NET (.aspx), Master Page (.master), và UserControl (.ascx) đã đƣợc hỗ trợ trong ASP.NET.
Chúng ta sẽ sử dụng công cụ xây dụng giao diện ngƣời dùng của ASP.NET để thực hiện cho ứng dụng mua giáo trình của chúng ta.
Định nghĩa một File Site.Master
Công dụng của trang Master Page chúng ta đã biết đến ở ASP.NET Web Form trƣớc đây, đồ án này sẽ không đề cập đến.
Mặc định thì khi ta tạo Project MVC thì đã có sẵn một Site.Master trong folder Share.
47 Nguyễn Trọng Trí – Lớp HT02
Hình 3.7: Giao diện trang Master.Page
Tìm hiểu cấu trúc thƣ mục View
Theo mặc định khi ta tạo ra một dự án ASP.NET MVC mới bằng cách sử dụng Visual Studio, nó sẽ tạo ra một thƣ mục “Shared” bên trong thƣ mục gốc “View” . Đây là nơi đƣợc đề nghị để lƣu trữ Master Pages, UserControl , và Views mà ta muốn dùng nhiều nơi trong ứng dụng.
Khi xây dựng thành phần View cụ thể đối với một Controller, mặc định ASP.NET MVC sẽ lƣu trữ chúng trong thƣ mục con trong thƣ mục gốc View. Theo mặc định, tên của một thƣ mục con phải tƣơng ứng với tên điều khiển. Ví dụ , bởi vì
48 Nguyễn Trọng Trí – Lớp HT02
Controller chúng ta đã xây dựng đƣợc gọi là “QuanlyController”, mặc định các View của QuanlyController sẽ đƣợc lƣu trữ trong thƣ mục con tên là “Quanly”:
Hình 3.9: View Quanly
Khi chúng ta gọi (invoke) câu lệnh RenderView(string viewName ) trong một Controller , MVC Framework sẽ tự động tìm một View template tƣơng ứng .Aspx hoặc .Ascx trong đƣờng dẫn /View/ControllerName, nếu không thể tìm thấy View nào thích hợp thì ASP.NET MVC Framework sẽ tìm trong t hƣ mục /View/Shared.
49 Nguyễn Trọng Trí – Lớp HT02
Tạo một Danhsachgt View
Chúng ta có thể tạo ra View “Danhsachgt” cho QuanlyController trong Visual Studio bằng cách click phải chuột chọn “Add New Item” trên thƣ mục Quanly và chọn “MVC View Page“. Chúng ta sẽ có một trang aspx mới và có thể tùy chọn liên kết với trang chủ Site.Master.
Khi xây dựng ứng dụng bằng cách sử dụng một mô hình MVC , ta muốn giữ cho mã nguồn View đơn giản, và chắc chắn rằng mã nguồn View chỉ đơn thuần làm việc biểu diễn UI cho ngƣời dùng. Các xử lý về Buiness logic chỉ nên đặt trong các lớp Controller. Controller sẽ xử lý, chọn View thích hợp và truyền nhƣng dữ liệu cần thiết vào View để biểu diễn ra UI cho ngƣời dùng (đƣợc thực hiện khi gọi RederView() ). Ví dụ, dƣới đây trong Action Method Danhsachgt của class QuanlyController, ta truyền vào Danhsachgt View một đối tƣợng “var gt = csdl.Giao_trinhs” để Categories View thực hiện việc hiển thị dữ liệu dựa vào đối tƣợng gt
MVC View Page mặc định đƣợc kế thừa từ các lớp cơ sở System.Web.Mvc.ViewPage, cung cấp một số phƣơng thức Helper và các Properties mà chúng ta có thể sử dụng trong việc xây dựng giao diện ngƣời dùng. Và đây là kết quả:
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<Totnghiep.Models.Giao_trinh>>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> Danh sách giáo trình
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <center>
50 Nguyễn Trọng Trí – Lớp HT02 <div class="top"></div>
<center ><div class="center"><doc>Danh sách giáo trình</doc></div> </center> <div class="bottom"></div>
</center> <hr />
<table width =722px> <tr>
<th style="background-color:#2D8ECE; color :White ">Thao tác</th> <th style="background-color:#2D8ECE; color :White ">Tên giáo trình</th> <th style="background-color:#2D8ECE; color :White ">Giá tiền</th> </tr>
<% foreach (var item in Model) { %> <tr>
<td>
<%: Html.ActionLink("Chỉnh sửa", "Editgiaotrinh", new { id=item.Ma_giao_trinh }) %> |
<%: Html.ActionLink("Xóa", "Deletegt", new { id=item.Ma_giao_trinh })%> </td> <td> <%: item.Ten_giao_trinh %> </td> <td> <%: item.Gia_tien %> </td> </tr> <% } %> </table> <p>
<%: Html.ActionLink("Thêm mới", "Creategt") %> </p>
51 Nguyễn Trọng Trí – Lớp HT02
Hình 3.10: Danh sách giáo trình