Thông tin tài liệu
Bài 4: Template & điều hướng trang Web Các nội dung đã học trong bài trước Kiểm tra tính hợp lệ của dữ liệu Quản lý trạng thái Hệ thống bài cũ Template & Điều hướng trang Web 2 Mục tiêu bài học 1. Trang Master 2. Điều hướng trang Web Template & Điều hướng trang Web 3 2. Điều hướng trang Web 3. Sử dụng Theme Kiểm tra tính hợp lệ của dữ liệu & Quản lý trạng thái 4 Các trang trong một ứng dụng, thường có các thành phần giống nhau như: Barner quảng cáo ở đầu trang Menu ở phía bên trái trang Phần Footer của trang Web ASP.NET cung cấp một phương pháp để tạo các trang có các thành phần giống nhau mà không cần viết các đoạn mã giống nhau trên từng trang Web đó là sử dụng trang Master Trang Master Các trang trong một ứng dụng, thường có các thành phần giống nhau như: Barner quảng cáo ở đầu trang Menu ở phía bên trái trang Phần Footer của trang Web ASP.NET cung cấp một phương pháp để tạo các trang có các thành phần giống nhau mà không cần viết các đoạn mã giống nhau trên từng trang Web đó là sử dụng trang Master Template & Điều hướng trang Web 5 Hai trang khác nhau trong cùng một ứng dụng chỉ có phần nội dung hiển thị ở giữa khác nhau, còn các thành phần khác giống nhau Trang master cung cấp các thành phần giống nhau cho các trang trong một ứng dụng Web Trang nội dung: chứa phần nội dung hiển thị trên trang master. Vùng chứa nội dung: Vùng không gian hiển thị trang nội dung Kết hợp giữa trang master và trang nội dung tạo nên giao diện của từng trang đơn lẻ trong ứng dụng Web Trang Master/Trang nội dung Trang master cung cấp các thành phần giống nhau cho các trang trong một ứng dụng Web Trang nội dung: chứa phần nội dung hiển thị trên trang master. Vùng chứa nội dung: Vùng không gian hiển thị trang nội dung Kết hợp giữa trang master và trang nội dung tạo nên giao diện của từng trang đơn lẻ trong ứng dụng Web Template & Điều hướng trang Web 6 Ví dụ: Mã nguồn của trang master được tạo bởi Visual Studio Trang Master <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>Untitled Page</title> <asp:ContentPlaceHolder id="head" runat="server"> </asp:ContentPlaceHolder> </head> <body> <form id="form1" runat="server"> <div> <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div> </form> </body> </html> Ví dụ: Mã nguồn của trang master được tạo bởi Visual Studio Template & Điều hướng trang Web 7 <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>Untitled Page</title> <asp:ContentPlaceHolder id="head" runat="server"> </asp:ContentPlaceHolder> </head> <body> <form id="form1" runat="server"> <div> <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div> </form> </body> </html> Trong ASP.NET trang master có định dạng .master Một trang master luôn bắt đầu bằng chỉ dẫn trang Master <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %> Đoạn mã phía sau chỉ dẫn Master giống với các trang aspx thông thường khác cũng gồm các phần tử <html>, <body>, <form> Trang Master Trong ASP.NET trang master có định dạng .master Một trang master luôn bắt đầu bằng chỉ dẫn trang Master <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %> Đoạn mã phía sau chỉ dẫn Master giống với các trang aspx thông thường khác cũng gồm các phần tử <html>, <body>, <form> Template & Điều hướng trang Web 8 Trang master luôn phải chứa một điều khiển ContentPlaceHolder chỉ định vùng hiển thị trang nội dung nằm trong thẻ Form <asp:ContentPlaceHolder id="ContentPlaceHolder1“ runat="server"> </asp:ContentPlaceHolder> Lập trình viên có thể thêm mã html, asp, các điều khiển lên trang Master. Tất cả các phần tử HTML hoặc asp được thêm vào bên ngoài vùng chứa nội dung sẽ hiển thị trên tất cả các trang Trang Master Trang master luôn phải chứa một điều khiển ContentPlaceHolder chỉ định vùng hiển thị trang nội dung nằm trong thẻ Form <asp:ContentPlaceHolder id="ContentPlaceHolder1“ runat="server"> </asp:ContentPlaceHolder> Lập trình viên có thể thêm mã html, asp, các điều khiển lên trang Master. Tất cả các phần tử HTML hoặc asp được thêm vào bên ngoài vùng chứa nội dung sẽ hiển thị trên tất cả các trang Template & Điều hướng trang Web 9 Trang Master cũng chứa một File Code-behind chứa các mã xử lý sự kiện. Các sự kiện tương ứng của trang master được kích hoạt sau trang nội dung Ví dụ: Sự kiện Load của trang nội dung xảy ra trước sự kiện Load của trang master Sự kiện của các điều khiển trên trang nội dung sẽ được xử lý trước trang master File Code-behind của trang Master Trang Master cũng chứa một File Code-behind chứa các mã xử lý sự kiện. Các sự kiện tương ứng của trang master được kích hoạt sau trang nội dung Ví dụ: Sự kiện Load của trang nội dung xảy ra trước sự kiện Load của trang master Sự kiện của các điều khiển trên trang nội dung sẽ được xử lý trước trang master Template & Điều hướng trang Web 10 [...]... Template & Điều hướng trang Web 13 Hướng dẫn sử dụng trang Master Các bước tạo ứng dụng ASP.NET sử dụng trang Master Tạo Web Site Thêm một trang master vào WebSite Trình bày bố cục (sử dụng bảng hoặc CSS) và thêm các phần tử vào trang master Thêm các trang nội dung cho WebSite Viết các mã xử lý sự kiện cho trang master và các trang nội dung Template & Điều hướng trang Web 14 Thêm một trang master... page Template & Điều hướng trang Web 17 Demo Sử dụng trang Master Nội dung demo 1 Thêm một trang master vào Website 2 Trình bày bố cục cho trang Master sử dụng bảng Bố cục trang gồm: Một banner Một sidebar bên trái Một vùng chứa nội dung Footer Template & Điều hướng trang Web Banner Side bar chứa menu Vùng chứa nội dung Footer 18 Demo Sử dụng trang master Banner 3 Thêm một trang nội dung cho WebSite 4. .. WebSite 4 Thêm các phần tử vào trang nội dung 5 Khám phá mã nguồn của trang master và trang nội dung 6 Chạy thử ứng dụng Side bar chứa menu Vùng chứa nội dung Footer Template & Điều hướng trang Web 19 Kiểm tra tính hợp lệ của dữ liệu & Quản lý trạng thái 20 Điều hướng trang Web Bất kì web site chuyên nghiệp nào đều cung cấp cho người dùng các liên kết để điều hướng đến các trang trong web site Các liên kết... ID="SiteMapDataSource1" SQL Server 2008 và Cơ sở dữ liệu quan hệ runat="server” /> 27 Sử dụng điều hướng trang Web ở đâu? Trên từng trang riêng lẻ Trên trang Master Thông thường, các thành phần điều hướng hiển thị giống nhau trên các trang một web site, nên sử dụng điều hướng trên trang master SQL Server 2008 và Cơ sở dữ liệu quan hệ 28 Demo Tạo liên kết điều hướng Nội dung demo Tạo ba cấu trúc điều hướng (hiển thị như... cách thêm một Web Form Sử dụng hộp thoại Add New Item Khác: Chọn Template Master Page Template & Điều hướng trang Web 15 Sửa nội dung trang Master Tương tự như Web Form Lập trình viên có thể sử dụng màn hình thiết kế để thêm các phần tử HTML, điều khiển asp, ContentPlaceHolder… Template & Điều hướng trang Web 16 Thêm trang nội dung Tương tự như Web Form, sử dụng cửa sổ Add New Item để thêm trang nội dung... tên Web. sitemap Web. sitemap phải được đặt trong thư mục gốc của ứng dụng Để hiển thị cấu trúc điều hướng được định nghĩa trên file Web. sitemap, điều khiển TreeView, Menu phải buộc với một điều khiển SiteMapDataSource Ngược lại, điều khiển SiteMapPath tự động hiển thị cấu trúc điều hướng trong Web. sitemap không cần sử dụng điều khiển SiteMapDataSource SQL Server 2008 và Cơ sở dữ liệu quan hệ 24 Web. sitemap... & Điều hướng trang Web 11 Trang nội dung Trang nội dung có định dạng là aspx giống với một Web Form Tuy nhiên, trang nội dung không chứa các phần tử , , , Form Trang nội dung bắt đầu bằng chỉ dẫn Page tương tự WebForm nhưng thêm thuộc tính MasterPageFile chỉ định trang master mà trang sử dụng Trang nội dung chứa phần tử Content chỉ định ID của điều khiển ContentPlaceHolder trên trang. .. SiteMapPath, Menu trên trang master đã tạo ở slide trước Tùy chỉnh menu (màu sắc, kích thước menu…) SQL Server 2008 và Cơ sở dữ liệu quan hệ 29 Demo Tạo liên kết điều hướng Các bước Thêm file web. sitemap Cấu hình cấu trúc phân cấp điều hướng trên file này Thêm các điều khiển lên trang master Thêm điều khiển menu vào phần sidebar Thêm điều khiển SiteMapPath & điều khiển TreeView vào phần trung tâm trang bên ngoài... Server 2008 và Cơ sở dữ liệu quan hệ 21 Điều hướng trang web như thế nào? Với các trang HTML thuần, lập trình viên sử dụng các Hyperlink để xây dựng các liên kết điều hướng Với một ứng dụng ASP.NET có nhiều cách để xây dựng các liên kết điều hướng Sử dụng HTML hyperlink, hoặc điều khiển hyperlink, linkbutton của asp… ASP.NET cung cấp nhóm các điều khiển Navigation để xây dựng liên kết điều hướng dễ dàng... Thêm điều khiển SiteMapDatasource Chạy và kiểm tra ứng dụng Thay đổi các thuộc tính màu sắc, độ rộng cho menu SQL Server 2008 và Cơ sở dữ liệu quan hệ 30 Kiểm tra tính hợp lệ của dữ liệu & Quản lý trạng thái 31 Định dạng trang Web Khi thiết kế một website, việc định dạng hiển thị cho các thành phần trên trang như bố cục trang web, hiển thị hình ảnh, font chữ, nền, button… sẽ tạo sự lôi cuốn cho trang web . tiêu bài học 1. Trang Master 2. Điều hướng trang Web Template & Điều hướng trang Web 3 2. Điều hướng trang Web 3. Sử dụng Theme Kiểm tra tính hợp lệ của dữ liệu & Quản lý trạng thái 4 Các. Bài 4: Template & điều hướng trang Web Các nội dung đã học trong bài trước Kiểm tra tính hợp lệ của dữ liệu Quản lý trạng thái Hệ thống bài cũ Template & Điều hướng trang Web 2 Mục. tử vào trang master Thêm các trang nội dung cho WebSite. Viết các mã xử lý sự kiện cho trang master và các trang nội dung Template & Điều hướng trang Web 14 Tương tự như cách thêm một Web
Ngày đăng: 23/05/2014, 18:21
Xem thêm: bài 4 template và điều hướng trang web
