i. phần thiết kế masterpage · 2018-09-07 · chương 9: master page lab 1: thiết kế...

Chương 9: Master Page Lab 1: Thiết Kế MasterPage & Đa ngôn ngữ

MỤC TIÊU

Kết thúc bài lab này bạn có khả năng sử dụng css để

Thiết kế MasterPage Tạo trang ASP.NET áp dụng MasterPage Nâng cấp MasterPage để sử dụng với đa ngôn ngữ Tổ chức & điều khiển lựa chọn đa ngôn ngữ

I. Phần Thiết kế MasterPage

MÔ TẢ

Trong bài này bạn sẽ xây dựng một MasterPage (Layout.master) và 2 trang ASP.NET áp dụng

Layout.master.

Nhấp vào liên kết Home


Nhấp vào liên kết About Us

Các bước để hoàn thành công việc gồm

Bước 1: Tạo master page

Bước 2: Thiết kế master page

Bước 3: Áp dụng master page

Bước 4: Chạy theo các tình huống


THỰC HIỆN

Bước 1: Tạo master page

Trang Layout.master được sinh ra với mã ASP.NET mặc định như sau

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Layout.master.cs" Inherits="Layout" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">

<title></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>

Các vùng giữa các thẻ <asp:ContentPlaceHolder> (tạm dịch giữ chổ cho nội dung) sẽ được

thay thế bởi nội dung của các trang áp dụng master page này.

http://www.w3.org/1999/xhtml

Bước 2: Thiết kế master page

Trong bài này chúng ta thiết kế một master page có layout riêng của mình vì vậy bạn thay nội

dung trang master trên thành:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Layout.master.cs" Inherits=" Layout" %>

<!DOCTYPE html">

<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">

<title>eStore Master Page</title>

<link href="layout-styles.css" rel="stylesheet" type="text/css" />

<asp:ContentPlaceHolder ID="head" runat="server">

 </asp:ContentPlaceHolder>

</head> <body>

<form id="form1" runat="server"> <div id="outer">

<div id="header">

<div id="menu">

<div style="float:left"> <asp:HyperLink Text="Home" NavigateUrl="Default.aspx" ID="Link1" runat="server"/> <asp:HyperLink Text="About Us" NavigateUrl="AboutUs.aspx" ID="Link2" runat="server"/>

<asp:HyperLink Text="Contact Us" NavigateUrl="1.aspx" ID="HyperLink3" runat="server"/> <asp:HyperLink Text="Feedback" NavigateUrl="1.aspx" ID="HyperLink4" runat="server"/> <asp:HyperLink Text="FAQs" NavigateUrl="1.aspx" ID="HyperLink5" runat="server"/> <asp:HyperLink Text="My Account" NavigateUrl="1.aspx" ID="HyperLink6" runat="server"/>

</div> <div style="float:right">

<asp:LinkButton ID="btnEN" runat="server">English</asp:LinkButton> <asp:LinkButton ID="btnVN" runat="server">Tiếng Việt</asp:LinkButton>

</div>

</div>

</div>

<div id="content">

<asp:ContentPlaceHolder ID="body" runat="server"> 

</asp:ContentPlaceHolder> </div>

<div id="right">

<div class="box right-top">RIGHT-TOP</div> <div class="box right-left">RIGHT-LEFT</div> <div class="box right-right">RIGHT-RIGHT</div>

</div>

http://www.w3.org/1999/xhtml

<div id="footer">

</div>

</div>> </form>

</body> </html>

Trong mã ASP.NET của master page trên, cấu trúc được chỉ rõ như sau

CSS định nghĩa trong layout-styles.css như sau

body {

background: url(images/bg.jpg) repeat-y center fixed; padding:0px; margin:0px; font-family:Verdana; font-size:12px;

} #outer

{ width:960px; margin:0px auto; padding:0px;

}

#header {


height:200px; width:960px; background-color:yellow; position:fixed; z-index:1000px;

} #content {

padding-top:200px; min-height:460px; width:600px; float:left;

} #right

{ padding-top:200px; min-height:460px; width:350px; float:right; background-color:green;

} #footer {

height:50px; background-color:aqua; clear:both;

} /*--menu--*/ #menu {

height:30px; width:960px;

background-color:black; position:absolute; left:0px; bottom:0px;

} #menu a {

display:inline-block; color:White; margin:4px; padding:2px 10px;

font-variant:small-caps; text-decoration:none; border: 1px solid black;

} #menu a:hover {

border: 1px solid gray; border-radius: 10px; background-color: #484848; color:Yellow;

} /*--right control panel--*/ #right .box

Chương 9: Master Page Lab 1: Thiết Kế MasterPage & Đa ngôn ngữ {

margin:5px; padding:5px; box-shadow:0 0 5px lightgray; border-radius: 8px;

} .right-top {

height:150px; }

.right-left {

min-height:250px; width:155px; float:left;

} .right-right {

min-height:250px; width:155px; float:right;

}

Bước 3: Áp dụng master page

Tạo trang Default.aspx áp dụng Layout.master


Trang Default.aspx được sinh ra với mã ASP.NET như sau

<%@ Page Title="" Language="C#" MasterPageFile="~/Ch07/CSS/Layout.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Ch07_CSS_Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="body" Runat="Server"> </asp:Content>

Trong đó nội dung của thẻ <asp:Content ContentPlaceHolderID="head"> sẽ được thay thế vào

vùng nội dung của thẻ <asp:ContentPlaceHolder ID="head"> trong master page. Tương tự với

<asp:Content ContentPlaceHolderID="body">. Hãy chỉnh nội dung của trang Default.aspx như

sau

<%@ Page Title="" Language="C#" MasterPageFile="~/Ch07/CSS/Layout.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Ch07_CSS_Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> <style> h1 {

color:Red; } </style> </asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="body" Runat="Server"> <h1>TRANG CHỦ</h1>

Chương 7: Web Server Controls Lab9: Tổ Chức Website Đa Ngôn Ngữ <img src="images/product.jpg" /> </asp:Content>

Làm tương tự như trên để tạo trang AboutUs.aspx với nội dung sau.

<%@ Page Title="" Language="C#" MasterPageFile="~/Ch07/CSS/Layout.master" AutoEventWireup="true" CodeFile="AboutUs.aspx.cs" Inherits="Ch07_CSS_AboutUs" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> </asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="body" Runat="Server"> <h1>GIỚI THIỆU</h1> </asp:Content>

Bước 4: Chạy theo các tình huống

Chạy Default.aspx sau đó nhấp vào liên kết Home sau đó About Us.

II. Phần Xử lý Đa ngôn ngữ

MÔ TẢ

Nâng cấp bài lab trên để tổ chức website đa ngôn ngữ

Nhấp vào liên kết Tiếng Việt

Chương 7: Web Server Controls Lab9: Tổ Chức Website Đa Ngôn Ngữ

Nhấp vào liên kết English

Các bước để hoàn thành công việc gồm

Bước 1: Tạo tập tin tài nguyên đa ngôn ngữ cho master page

Bước 2: Chỉnh các liên kết trên menu của master page để tài từ tài nguyên

Bước 3: Hiệu chỉnh mã script cho các LinkButton lựa chọn ngôn ngữ

Bước 4: Viết mã C# điều khiển việc lựa chọn ngôn ngữ

Bước 5: Tổ chức kế thừa

Bước 6: Chạy

THỰC HIỆN

Bước 1: Tạo tập tin tài nguyên đa ngôn ngữ cho master page

Tạo thư mục chứa tập tin tài nguyên cục bộ


Tạo tập tin tài nguyên cục bộ của Layout.master phải có tên Layout.master.resx


Nhập nội dung cho Layout.master.resx

Nhân bản Layout.master.resx thành Layout.master.vi-VN.resx và dịch cột value sang tiếng Việt.

Bước 2: Chỉnh các liên kết trên menu của master page để tài từ tài

nguyên


Trong bài này chỉ làm đa ngôn ngữ phần menu nên phải hiểu chỉnh để nó được tải từ tài

nguyên như sau.

Bước 4: Viết mã C# điều khiển việc lựa chọn ngôn ngữ

Mã C# dùng để nhận, lưu trữ và thiết lập ngôn ngữ được chọn phải được viết trong trang dùng

chung.

Bạn tạo một class có tên CommonPage.cs đặt trong thư mục đặc biệt App_Code

Nội dung của CommonPage được viết như sau

Bước 5: Tổ chức kế thừa

Tất cả các trang muốn thực hiện được đa ngôn ngữ đều phải kế thừa từ CommonPage.


Bước 6: Chạy

Chạy trang Default.aspx hoặc AboutUs.aspx sau đó chọn ngôn ngữ để thấy menu thay đổi ngôn

ngữ như đã chọn.

i. phần thiết kế masterpage · 2018-09-07 · chương 9: master page lab 1: thiết kế...

Documents