ltm2 chuong 07 maser page_ advanced and user controls

Master Page

Advanced and User Controls

KHOA TIN HỌC QUẢN LÝ - BỘ MÔN CÔNG NGHỆ PHẦN MỀM

TRƯỜNG ĐẠI HỌC KINH TẾ TP.HỒ CHÍ MINH

Chương 07

1

LẬP TRÌNH MẠNG 2

Chương 07 : Master Page, Advanced & User Controls

2

• Nội dung:

•Master Page

• Advanced Controls

•User Controls

• Mục tiêu:

•Nắm vững các dạng điều khiển đã nêu

• Phân tích & Thay đổi cách viết chương trình theo hướng phù hợp


3

• Master Page:

– Các trang web thường có nhiều phần giống nhau khi chuyển qua lại giữa các trang (xét một trang web cụ thể)

– Một cách giải quyết bằng frame trong môn học LTM1

– Master Page trong ASP.NET cho phép xây dựng một mẫu giao diện chung cho phép thực hiện chức năng trên

– Sử dụng Master Page giúp cải thiện giao diện, không dưa thừa nhiều code, dễ chỉnh sửa, thể hiện sự đồng nhất của một website


4

• Master Page:

– Master Page có thể được thiết kế bằng các thẻ HTML thuần túy, các ASP.NET server controls, có thể viết code phía sau (code-behind).

– Mọi thứ trong master page sẽ được thể hiện khi các trang sử dụng master page này.

– Các master page có phần nội dung đặt trong đó, nơi đó sẽ hiện các phần khác biệt riêng của mỗi trang.


5

• Master Page:

– Không giống CSS giúp cho các controls thể hiện giống nhau, master page còn giúp thể hiện giống nhau ở các phần header, footer, navigation menu…

– Một website có thể nhiều master page

– Một trang web cụ thể (*.aspx) có thể sử dụng hoặc không sử dụng master page


6

• Master Page:

– Các bước tạo:

• Tạo một website mới

• Tạo một file master page mới (*.master)

• Tạo một trang web sử dụng master đã tạo (khi tạo trang *.aspx click chọn “select master page”)


7

• Master Page:

– Demo

• Tạo master page

• Thiết kế master page (sử dụng html, các control khác, viết code behind)

• Tạo 2 trang có sử dụng master page và so sánh

• Tạo 1 trang không sử dụng master page


8

• User Controls

– User controls là các controls do người dùng tạo ra nhằm mục đích tạo một phần trang web và tái sử dụng nó trong nhiều trang khác nhau.

– User controls có phần mở rộng là *.ascx

– Không có thẻ html, body, form

– Có phần khai báo Control directive thay vì page directive


9

• User Controls

– Một User Control đơn giản có thể chỉ có HTML (vd thiết kế phần copyright.ascx cho trang web)

– Với User Controls ta có thể thiết kế bao gồm các controls khác, các user controls khác, và viết code behind bình thường


10

• User Controls

–Demo

• Xây dựng một user control đơn giản đến phức tạp

• Nhúng user control này vào user control khác

• Nhúng user control vào trang *.aspx

• Kết hợp user control với master page để trình bày


11

• Advanced Controls

–MultiView và ViewControls

–FileUpload

–AdRotator

–Calendar


12

• MultiView và ViewControls

–Muốn chia trang web thành nhiều phần, chỉ thể hiện một phần trong một thời điểm

–Ví dụ các bước của một quy trình nhập liệu

–ASP.NET cung cấp để thiết kế từng thành phần nhỏ như vậy dưới công cụ là View Control


13


– Tất cả các View Control phải nằm trong MultiView và MultiView sẽ gọi View nào được thể hiện trong cùng một thời điểm, hoặc không thể hiện

<asp:MultiView ID="MultiView1" runat="server">

<asp:View ID="View1" runat="server">

Nội dung view 1 </asp:View>


Nội dung view 2</asp:View>


Nội dung view 3</asp:View>

</asp:MultiView>


14


–Một số phương thức và thuộc tính

• GetActiveView(): Trả về View hiện đang hiển thị

• SetActiveView(tên-view): đưa một view nào đó lên hiển thị

• ActiveViewIndex: Lấy/gán vị trí View sẽ hiển thị


15


–Biến cố

• Trên MultiView: ActiveViewChanged xảy ra khi thay đổi active view

• Trên View: Activate xảy ra khi View đó được kích hoạt

• Trên View: Deactive xảy ra khi View đó không còn kích hoạt nữa


16

• FileUpload

–Cung cấp công cụ gồm một textbox và một nút browse

–Cho phép tìm một file dưới client và tải lên server


17

• FileUpload

–FileContent (Stream) trả về đối tượng dạng stream của file

–FileName (string) tên file upload

–HasFile (Boolean) kiểm tra control có file chưa

–PostedFile (HttpPostedFile) Trả về tham chiếu đến file vừa upload hoàn tất.


18

• FileUpload

–ContentLength (integer) kích thước file tính bằng byte

–ContentType (string) kiểu nội dung của file

–FileName (string) đường dẫn của file ở client

– InputStream (Stream) chỉ tham chiếu dạng stream đến file vừa upload


19

• FileUpload

– SaveAs(đường-dẫn-trên-server) lưu file từ client lên server


20

• AdRotator Control

– Công cụ cho phép hiển thị quảng cáo trên trang web

– Hiển thị các hình ảnh một cách ngẫu nhiên từ một danh sách từ XML hoặc nguồn datasource

– Các ảnh chứa đường liên kết đến một trang web, và hiển thị thay đổi mỗi lần trang được load lại


21


– AdvertisementFile (String)

– AlternateTextField

– DataMember (String)

– DataSource (Object)

– DataSourceID (String)

– ImageUrlField (String)

– KeywordFilter (String)

– Target (String)

– AdCreated (Event)


22


– Các giá trị của thuộc tính target • _blank Renders the content in a new, unnamed

window without frames.

• _new Behaves the same as _blank the first time the control is clicked, but subsequent clicks will render to that same window, rather than open another blank window.

• _parent Renders the content in the parent window or frameset of the window or frame with the hyperlink. If the child container is a window or top-level frame, it behaves the same as _self.

• _self Renders the content in the current frame or window with focus. This is the default behavior.

• _top Renders the content in the current full window without frames.


23


– File Advertisement (xml) <Advertisements>

<Ad>

<ImageUrl>ProgAspNet.gif</ImageUrl>

<NavigateUrl>

http://www.oreilly.com/catalog/progaspdotnet2/index.html

</NavigateUrl>

<AlternateText>Programming ASP.NET</AlternateText>

<Keyword>Web</Keyword>

<Impressions>50</Impressions>

<Animal>stingray</Animal>

</Ad>

…<

Ad>

…

</Ad>

</Advertisements>


24


– Khai báo AdRotator

<asp:AdRotator ID="ad" runat="server"

Target="_blank"

AdvertisementFile="ads.xml“ />


25

• Calendar Control

– Công cụ cho phép hiển thị, lựa chọn ngày tháng

– Cho phép điều chỉnh nhiều thuộc tính và biến cố

– Một số chức năng chủ yếu:

• Hiển thị thời gian trong 1 tháng

• Cho phép người dùng chọn ngày/tuần/tháng

• Cho phép chọn một khoảng thời gian

• Di chuyển qua lại giữa các tháng

• Lập trình để hiển thị một ngày đặc biệt nào đó


26

• Calendar Control

<body>

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

<div>

<h1>Calendar Control</h1>

<h2>Default Calendar</h2>

<asp:Calendar

ID="Calendar1" runat="server">

</asp:Calendar> </div>

</form>

</body>


27

• Calendar Control • Caption (String) Text to display on the page above the

calendar.

• CaptionAlign (TableCaption-Align) [Bottom, Left,

NotSet, Right, Top] Specifies horizontal and vertical

alignment of the Caption.

• CellPadding (Integer) Distance in pixels between the

border and contents of a cell. Applies to all the cells in the calendar and to all four sides of each cell. Default is 2.

• CellSpacing (Integer) Distance in pixels between cells.

Applies to all the cells in the calendar. Default is 0.

• DayNameFormat (DayName-Format) [Full, Short,

FirstLetter, FirstTwoLet-ters] Format of days of the

week. Values are self-explanatory, except Short,

which is the first three letters. Default is Short.


28

• Calendar Control • FirstDayOfWeek (FirstDayOfWeek) [Default, Sunday,

Monday, ... Saturday] Day of week to display in the first column. Default (the default) specifies system setting.

• NextMonthText (String) Text for next month navigation

control. The default is “>”, which renders as the

greater than sign (>). Only applies if ShowNextPrevMonth property is true.

• NextPrevFormat (NextPrevFormat) [CustomText, FullMonth, ShortMonth] To use CustomText, set this property and specify the actual text to use in NextMonthText and PrevMonthText.

• PrevMonthText (String) Text for previous month

navigation control. Default is “<”, which renders as less than sign (<). Only applies if ShowNextPrevMonth property is true.


29

• Calendar Control • SelectedDate (DateTime) A single selected date. Only the date is stored; the time is set to null.

• SelectedDates (DateTime) Collection of DateTime objects when multiple dates are selected. Only the date is stored; the time is set to null.

• SelectionMode (Calendar-Selection-mode) Described

later in this section.

• SelectMonth-Text (String) Text for month selection element in the selector column. Default is >>, which renders as two greater than signs (>>). Only applies if SelectionMode property is set to DayWeekMonth.

• ShowDayHeader (Boolean) true, false If true, the default, the days of week headings are shown.

• ShowGridLines (Boolean) [TRue, false] If TRue, grid lines between cells are displayed. Default is false.


30

• Calendar Control • ShowNextPrev-Month (Boolean) Indicates if next and

previous month navigation elements are shown. Default is true.

• ShowTitle (Boolean) Indicates if the title is shown. If

false, then next and previous month navigation

elements will be hidden. Default is TRue.

• TitleFormat (Title-Format) [Month, MonthYear]

Indicates if title is month only or month and year. Default is MonthYear.

• TodaysDate (DateTime) Today's date.

• UseAccessible-Header (Boolean) TRue, false Specifies if a header accessible to assistive technologies is to be used.

• VisibleDate (DateTime) Any date in the month to display.


31

• Calendar Control • DayHeaderStyle Days of the week

• DayStyle Dates

• NextPrevStyle Month navigation controls

• OtherMonthDayStyle Dates not in the currently

displayed month

• SelectedDayStyle Selected dates

• SelectorStyle Week and month selection column

• TitleStyle Title section

• TodayDayStyle Today's date

• WeekendDayStyle Weekend dates


32

• Calendar Control • ShowDayHeader (true) Names of the days of the week

• ShowGridLines (false) Grid lines between the days of

the month

• ShowNextPrevMonth (true) Month navigation controls

• ShowTitle (true) Title section

• You could click on the Calendar control smart tag in

Design view and select one of the Auto Format formats, but you can choose your own styles.

• You can do this in the Properties window after selecting the Calendar control in either Design or Source view.

ltm2 chuong 07 maser page_ advanced and user controls

Documents