ltm2 chuong 07 maser page_ advanced and user controls
Post on 21-Feb-2015
90 Views
Preview:
TRANSCRIPT
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
Chương 07 : Master Page, Advanced & User Controls
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
Chương 07 : Master Page, Advanced & User Controls
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.
Chương 07 : Master Page, Advanced & User Controls
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
Chương 07 : Master Page, Advanced & User Controls
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”)
Chương 07 : Master Page, Advanced & User Controls
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
Chương 07 : Master Page, Advanced & User Controls
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
Chương 07 : Master Page, Advanced & User Controls
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
Chương 07 : Master Page, Advanced & User Controls
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
Chương 07 : Master Page, Advanced & User Controls
11
• Advanced Controls
–MultiView và ViewControls
–FileUpload
–AdRotator
–Calendar
Chương 07 : Master Page, Advanced & User Controls
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
Chương 07 : Master Page, Advanced & User Controls
13
• MultiView và ViewControls
– 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>
<asp:View ID="View2" runat="server">
Nội dung view 2</asp:View>
<asp:View ID="View3" runat="server">
Nội dung view 3</asp:View>
</asp:MultiView>
Chương 07 : Master Page, Advanced & User Controls
14
• MultiView và ViewControls
–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ị
Chương 07 : Master Page, Advanced & User Controls
15
• MultiView và ViewControls
–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
Chương 07 : Master Page, Advanced & User Controls
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
Chương 07 : Master Page, Advanced & User Controls
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.
Chương 07 : Master Page, Advanced & User Controls
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
Chương 07 : Master Page, Advanced & User Controls
19
• FileUpload
– SaveAs(đường-dẫn-trên-server) lưu file từ client lên server
Chương 07 : Master Page, Advanced & User Controls
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
Chương 07 : Master Page, Advanced & User Controls
21
• AdRotator Control
– AdvertisementFile (String)
– AlternateTextField
– DataMember (String)
– DataSource (Object)
– DataSourceID (String)
– ImageUrlField (String)
– KeywordFilter (String)
– Target (String)
– AdCreated (Event)
Chương 07 : Master Page, Advanced & User Controls
22
• AdRotator Control
– 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.
Chương 07 : Master Page, Advanced & User Controls
23
• AdRotator Control
– 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>
Chương 07 : Master Page, Advanced & User Controls
24
• AdRotator Control
– Khai báo AdRotator
<asp:AdRotator ID="ad" runat="server"
Target="_blank"
AdvertisementFile="ads.xml“ />
Chương 07 : Master Page, Advanced & User Controls
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 đó
Chương 07 : Master Page, Advanced & User Controls
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>
Chương 07 : Master Page, Advanced & User Controls
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.
Chương 07 : Master Page, Advanced & User Controls
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.
Chương 07 : Master Page, Advanced & User Controls
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.
Chương 07 : Master Page, Advanced & User Controls
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.
Chương 07 : Master Page, Advanced & User Controls
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
Chương 07 : Master Page, Advanced & User Controls
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.
top related