Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống
1
/ 49 trang
THÔNG TIN TÀI LIỆU
Thông tin cơ bản
Định dạng
Số trang
49
Dung lượng
3,08 MB
Nội dung
Bài 4: Template & điềuhướngtrangWeb 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ềuhướngtrangWeb 2 Mục tiêu bài học 1. Trang Master 2. ĐiềuhướngtrangWebTemplate & ĐiềuhướngtrangWeb 3 2. ĐiềuhướngtrangWeb 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 trangWeb 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 trangWeb đó 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 trangWeb 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 trangWeb đó là sử dụng trang Master Template & ĐiềuhướngtrangWeb 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 WebTrang 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 WebTrang 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 WebTrang 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 WebTemplate & ĐiềuhướngtrangWeb 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ềuhướngtrangWeb 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ềuhướngtrangWeb 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 trangTrang 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 trangTemplate & ĐiềuhướngtrangWeb 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ềuhướngtrangWeb 10 [...]... Template & ĐiềuhướngtrangWeb 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ềuhướngtrangWeb 14 Thêm một trang master... page Template & ĐiềuhướngtrangWeb 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ềuhướngtrangWeb 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ềuhướngtrangWeb 19 Kiểm tra tính hợp lệ của dữ liệu & Quản lý trạng thái 20 ĐiềuhướngtrangWeb 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ềuhướ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ềuhướngtrangWeb ở đâu? Trên từng trang riêng lẻ Trên trang Master Thông thường, các thành phần điềuhướng hiển thị giống nhau trên các trang một web site, nên sử dụng điềuhướ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ềuhướng Nội dung demo Tạo ba cấu trúc điềuhướ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ềuhướng Các bước Thêm file web. sitemap Cấu hình cấu trúc phân cấp điềuhướ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ềuhướngtrangweb 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ềuhướ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ềuhướ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ềuhướ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 trangWeb 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 trangweb . 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