Tại sao sử dụng client-side scripts ? Điều khiển cửa sổ trình duyệt – Không thể điều khiển trình duyệt từ mã lệnh trên server.. – Vd: Mở một cửa sổ mới, di chuyển trong History lưu trữ
Trang 1© 2007 Khoa Công nghệ thông tin
Thiết kế và Lập trình Web 2
Một số kỹ thuật khác trong ASP.NET
Trường Đại học Khoa học Tự nhiên
Trang 4Upload File
Sử dụng Control FileUpload
– FileName : Tên file upload
– FileBytes : Mảng bytes chứa nội dung của file upload
Trang 5protected void btnUpload_Click(object sender, EventArgs e)
{
string[] tokens = FileUploadImage.FileName.Split('.');
string extension = tokens[tokens.Length - 1].ToLower();
double size = (double)FileUploadImage.FileBytes.Length / (1024*1024);
// check whether the uploaded file is an image and file size less than 1MB
if (size > 1)lblMessage.Text = "File size must be less than 1MB";
else if (extension == "jpg" || extension == "gif"){
// generate relative & absolute path to save the uploaded file
string strRelativePath = "images/" + FileUploadImage.FileName;
string strAbsolutePath = Server.MapPath(strRelativePath);
// save uploaded file
FileUploadImage.SaveAs(strAbsolutePath);
lblMessage.Text = strAbsolutePath + " has been saved.";
}elselblMessage.Text = "File extension must be jpg or gif.";
}
Trang 7Gửi mail sử dụng Client Mail Server
Use mailto protocol
Use Hyperlink server control
Format : mailto:address[?key=setting][&key=setting] …
<A href="mailto:abc@yahoo.com?SUBJECT=Question&BODY=Plz answer">
<asp:HyperLink ID="hypMail" NavigateUrl="mailto:abc@yahoo.com? SUBJECT=Mailing a Webform&BODY=Some message text."
Runat="server">Send mail.</asp:HyperLink>
Key Specifies
SUBJECT Tiêu đề Email
CC Danh sách địa chỉ Email người nhận, mỗi địa chỉ cách nhau bằng dấu chấm phẩy (;).
BCC Danh sách địa chỉ Email người nhận được ẩn mỗi địa chỉ cách nhau bằng dấu chấm phẩy (;).
BODY Nội dung Email.
Trang 8Gửi Email sử dụng Remote Server
Trang 9Gửi Email sử dụng Remote Server
Soạn nội dung email sử dụng MailMessage
Trang 10using System.Net.Mail;
protected void btnSendMail_Click(object sender, EventArgs e) {
// Create the message
MailMessage mailNew = new MailMessage();
mailNew.From = new MailAddress("someone@microsoft.com", "name");
mailNew.To.Add("jesse@contoso.com");
mailNew.Subject = "This is the subject text.";
mailNew.Body = "This is the message text.";
Attachment atcItem = new Attachment(Server.MapPath(“joey.jpg"));
smtp.Credentials = new System.Net.NetworkCredential("username", "password");
// Send the message
smtp.Send(mailNew);
}
Trang 12Tại sao sử dụng client-side scripts ?
Điều khiển cửa sổ trình duyệt
– Không thể điều khiển trình duyệt từ mã lệnh trên server
– Vd: Mở một cửa sổ mới, di chuyển trong History lưu trữ các link đã duyệt trên browser…
Phản hồi lập tức lại các sự kiện chuột
– server-side code chỉ có thể phản hồi sự kiện của trang một khi trang đó được gửi trở về cho server (post-back)
– client-side code có thể phản hồi ngay khi sự kiện xảy ra.
Trang 13Browser có thể chạy các đoạn lệnh scripts ?
Không phải tất cả browser đều hỗ trợ script.
Chỉ có Internet Explorer hỗ trợ VBScript.
Mã lệnh Script có thể ảnh hưởng đến các vấn đề
về Security (cần thiết lập Security Levels).
Trang 14Kiểm tra nếu như Browser có hỗ trợ Script
Private Sub Page_Load(ByVal sender As System.Object, _ByVal e As System.EventArgs) Handles MyBase.Load
If Request.Browser.VBScript Then
Response.Redirect("VBScripts.htm")Exit Sub
ElseIf Request.Browser.JavaScript Then
Response.Redirect ("JScripts.htm")Else
Response.Redirect("NoScripts.htm")End If
End Sub
Trang 15Sử dụng scripts
Trang 16 Nếu như script sử dụng 1 thành phần nào đó trong
trang thì thành phần đó phải xuất hiện trước script
<HTML>
<body language="vbscript">
<form id="Form1" method="post" runat="server">
<P><asp:TextBox id="txtFirstName" Runat="server"></asp:TextBox></P>
<P><asp:TextBox id="txtLastName" Runat="server"></asp:TextBox></P>
Trang 18Nghe nhạc
3 cách nghe nhạc trên trang web
– Sử dụng thẻ <bgsound>
– Sử dụng thẻ <embed > để chèn chương trình nghe
nhạc mặc định của người dùng vào trang web
– Sử dụng thẻ <object> (ActiveX) để chèn chương
trình nghe nhạc cụ thể vào trang web
Trang 19Sử dụng thẻ <bgsound>
Các bước:
– Hiện trang aspx ở chế độ HTML mode (Source View).
– Chèn thẻ bgsound vào trong vùng <head>
Tuy nhiên, nhạc sẽ tắt và bật lại mỗi khi trang bị refresh
<bgsound src="test.wav" id="bgTest" loop="infinite">
Trang 20nội dung thẻ <body>
<embed src="test.wav" id="wavTest" hidden="false" height="20" width="150" autostart="false" type="audio/wav" loop="true"></embed>
Trang 21Sử dụng ActiveX control
Các bước:
– Kéo thả Media player ActiveX object vào trang web.
– Thiết lập thuộc tính cho ActiveX object để nghe nhạc.
– Thêm mã lệnh để kiểm tra hệ thống của user có cài đặt ActiveX object chưa
Trang 24Playing Video
3 các xem phim
– Sử dụng thẻ <img>
– Sử dụng thẻ <embed> để chèn chương trình nghe nhạc
mặc định vào trang web
– Sử dụng thẻ <object> (ActiveX) để chèn chương trình
nghe nhạc cụ thể vào trang web
Trang 25Sử dụng thẻ <img>
Sử dụng thuộc tính dynsrc
Tính năng:
– Không được hỗ trợ trong trình duyệt Netscape.
– Chỉ chấp nhận file AVI (Audio Video Interleaved).
– Không thể điều khiển từ client
<img dynsrc=“music.avi">
<asp:ImageButton id="ImageButton1" dynsrc="clock.avi"
runat="server"></asp:ImageButton>
Trang 26Embedding Videos
Sử dụng thẻ <embed>
Tính năng:
– Hỗ trợ bởi hầu hết các trình duyệt.
– Người dùng có thể điều khiển embedded media player.
– Hỗ trợ nhiều định dạng video.
– Không hỗ trợ khả năng script như ActiveX.
<embed src="clock.avi" id="aviTest" hidden="false" height="200" width="200" autostart="false" type="video/avi" loop="true"></embed>
Trang 27Sử dụng ActiveX control để xem phim
Trang 29AdRotator & <marquee>
Sử dụng AdRotator control để hiển thị ngẫu nhiên
banner quảng cáo trên trang web
– Quảng cáo hiển thị có thể thay đổi khi trang web được refresh.
– Thông tin quảng cáo được lưu trong 1 file XML
Trang 30AdRotator Advertisement file
Trang 31Ví dụ <Marquee>
<MARQUEE
BEHAVIOR = ALTERNATE | SCROLL | SLIDE
DIRECTION = DOWN | LEFT | RIGHT | UP
LOOP = int SCROLLAMOUNT=long SCROLLDELAY=long
onmouseover="this.stop()" onmouseout="this.start()"
>
Text Text Text
</MARQUEE>