9ecva.com - 9e Chu Van An Forever: Chương 4. Sử dụng các điều khiển khác.

Đăng ký vps giá rẻ, tên miền và domain. Việc kiểm tra và mua tên miền giá rẻ, domain giá rẻ, hosting giá rẻ, máy chủ ảo giá rẻ và server giá rẻ chỉ với 2 bước đơn giản. Giúp bạn tiên phong trong kinh doanh Online

Asp.net
9ecva.com - 9e Chu Van An Forever : Asp.net

Chủ đề: Chương 4. Sử dụng các điều khiển khác.

Tác giả

Nội dung

<< Chủ đề trước | Chủ đề kế tiếp >>

DUCVINH83
Administrator

Không ngừng học hỏi !

Ngày gia nhập: 01/11/2005
Giới tính:

Đến từ: Vietnam
Trạng thái:

Bài viết: 365
Tiền: 738$
Địa chỉ e-mail:

Yahoo! IM:

Sinh nhật: 17/02/1983
Cảnh cáo: (0%)

Ngày gửi: 29/06/2009 lúc 3:46 chiều \| Đã khóa IP

Ở phần đầu của chương này các bạn sẽ được học sử dụng điều khiển FileUpload để cho phép chúng ta đưa các file dữ liệu lên Server, như là các file ảnh, word hay excel…

Ở chương này các bạn cũng được học các điều khiển khác như Calendar, AdRotator, Multiview, Wizard.

I. File Upload.

Điều khiển FileUpload cho phép người sử dụng Upload file từ chính ứng dụng Web của mình.

File sau khi Upload có thể lưu trữ ở 1 nơi nào đó có thể là trên ổ cứng hay trong Database.

Điều khiển FileUpload hỗ trợ các thuộc tính sau:

Thuộc tính	Ý nghĩa
Enable	Cho phép bạn vô hiệu hoá điều khiển FileUpload.
FileBytes	Cho phép lấy nội dung file đã được upload như một mảng Byte.
FileContent	Cho phép lấy nội dung của file đã được upload theo dòng dữ liệu
FileName	Lấy tên file được Upload
HasFile	Trả về giá trị đúng khi File được Upload
PostedFile	Enables you to get the uploaded file wrapped in the HttpPostedFile object.

Điều khiển FileUpload hỗ trợ các phương thức

Focus: Enables you to shift the form focus to the FileUpload control.
SaveAs: Cho phép bạn lưu file được upload lên hệ thống.

Thuộc tính PostedFile của điều khiển FileUpload cho phép lấy thông tin từ File upload được bao bọc trong đối tượng HttpPostedFile. đối tượng này sẽ đưa thêm thông tin về Upload file.

Lớp HttpPostedFile gồm các thuộc tính sau:

ContentLength: Lấy về kích thước của File Upload tính theo byte
ContentType: lấy kiểu MIME của File Upload
FileName: cho phép lấy tên của file được upload.
InputStream: Enables you to retrieve the uploaded file as a stream.

Lớp HttpPostedFile chỉ hỗ trợ phương thức

SaveAs: Cho phép bạn lưu file được upload lên hệ thống.

Upload 1 file lên server

Trong ví dụ sau bạn sẽ được học cách Upload 1 file ảnh lên đĩa cứng của Server.

Code 1a. Fileupload.aspx

<%@ Page Language="C#" Debug="true" AutoEventWireup="true" CodeFile="Fileupload.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ;

<title>FileUpload</title>

</head>

<body>

<div>

<asp:Label ID="Label1" runat="server" Text="Chọn File"></asp:Label>

<asp:FileUpload ID="FileUpload1" runat="server" Width="286px" />

<br />

<asp:Button ID="Button1" runat="server" Text="Add image" Width="92px"

onclick="Button1_Click" />

<hr />

<br />

<asp:DataList ID="listImage" RepeatColumns="3" runat="server">

<asp:Image ID="Image1" ImageUrl='<%# Eval("Name", "~/Upload/{0}") %>' style="width:200px" Runat="server" />

<br />

<%# Eval("Name") %>

</ItemTemplate>

</asp:DataList>

</div>

</form>

</body>

</html>

Code 1b.Fileupload.aspx.cs

using System;

using System.Data;

using System.IO;

public partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected void Page_PreRender()

{

string upload_folder = MapPath("~/Upload/");

DirectoryInfo dir = new DirectoryInfo(upload_folder);

listImage.DataSource = dir.GetFiles();

listImage.DataBind();

}

bool CheckFileType(string fileName)

{

string ext = Path.GetExtension(fileName);

switch (ext.ToLower())

{

case ".gif":

return true;

case ".png":

return true;

case ".jpg":

return true;

case ".jpeg":

return true;

default:

return false;

}

protected void Button1_Click(object sender, EventArgs e)

{

if (FileUpload1.HasFile)

{

if(CheckFileType(FileUpload1.FileName))

{

string filepath = "~/Upload/" + FileUpload1.FileName;

FileUpload1.SaveAs(MapPath(filepath));

}

Giải thích ví dụ trên: Trong sự kiện Button1_Click Kiểm tra có tồn tại File để Upload? Nếu đúng thì kiểm tra kiểm tra file upload có phải đúng định dạng của ảnh không bằng hàm CheckFileType nếu đúng thì sẽ thực hiện việc ghi file lên server với phương thức SaveAs của điều khiển FileUpload.

__________________

YM: DUCVINH83
0912 822334

Lên trên

DUCVINH83
Administrator

Không ngừng học hỏi !

Ngày gia nhập: 01/11/2005
Giới tính:

Đến từ: Vietnam
Trạng thái:

Bài viết: 365
Tiền: 738$
Địa chỉ e-mail:

Yahoo! IM:

Sinh nhật: 17/02/1983
Cảnh cáo: (0%)

Ngày gửi: 29/06/2009 lúc 3:47 chiều \| Đã khóa IP

II. Điều khiển Calendar

Bạn có thể hiển thị một lịch trên trang web của mình với điều khiển Calendar

Ví dụ sau sẽ trình bày một Calendar đơn giản

Code 2.

<%@ Page Language="C#"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ;

<title>Calendar</title>

</head>

<body>

<div>

<asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>

</div>

</form>

</body>

</html>

Kết xuât của nó sẽ như sau:

Các thuộc tính:

Thuộc tính	Ý nghĩa
DayNameFormat	Cho phép bạn chỉ rõ sự xuất hiện các ngày của tuần, có thể là các giá trị: FirstLetter, FirstTwoLetters, Full, Short, và Shortest.
NextMonthText	Chỉ định Text xuất hiện cho liên kết tháng tiếp theo
NextPrevFormat	Cho phép bạn chỉ rõ định dạng tháng tiếp theo và tháng trước đó, nó có thể là các giá trị: CustomText, FullMonth, và ShortMonth.
PreMonthText	Cho phép bạn chỉ định hiển thị text cho liên kế tháng trước đó
SelectedDate	Cho phép bạn lấy về hoặc thiết đặt cho ngày lựa chọn
SelectedDates	Cho phép bạn gán hoặc lấy về một tập các ngày được lựa chọn
SelectionMode	Cho phép chỉ định các ngày được lựa chọn có giá trị như thế nào, nó có thể là các giá trị sau: Day, DayWeek, DayWeekMonth, và none.
SelectMonthText	Cho phép hiển thị Text cho 1 tháng được chọn
SelectWeekText	Cho phép hiển thị Text cho 1 tuần được chọn
ShowdayHeader	Cho phép hiển thị tên ngày hay không trên đỉnh của điều khiển.
ShowNextPrevMonth	Cho phép hiển thị hay không liên kết đến tháng tiếp theo hoặc tháng trước đó.
ShowTitle	Cho phép bạn ẩn hay hiện Text trên thanh tiêu đề của điều khiển Calendar.
TitleFormat	Cho phép định dang text trên thanh tiêu đề, các giá trị của nó có thể là Month và MonthYear.
TodaysDate	Cho phép bạn chỉ rõ ngày hiện tại mặc định lấy ngày hiện tại trên Server.

Các Sự kiện.

DayRender: Raised as each day is rendered.
SelectionChanged: Xảy ra khi một ngày mới, tuần mới hay tháng mới được lựa chọn.
VisibleMonthChanged: xảy ra khi liên kết đến tháng tiếp theo hoặc tháng trước đó được nhấn.

Ví dụ sau sẽ trình bày cách lấy thông tin khi chúng ta lựa chọn nhiều ngày trên đối tượng Calendar.

Code 3a. Calendarmultiselect.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Calendarmultiselect.aspx.cs" Inherits="Calendarmultiselect" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ;

<title>Multi select date</title>

</head>

<body>

<div>

<asp:Calendar ID="calendar1" SelectionMode="DayWeekMonth" runat="server" SelectedDate="2008-04-18" TitleFormat="Month"></asp:Calendar>

<br />

 <asp:Button ID="btnSubmit" runat="server" OnClick="btnSubmit_Click" Text="Submit"

Width="83px" /><br />

<hr />

</div>

<asp:BulletedList ID="bllresult" runat="server" DataTextFormatString="{0:d}">

</asp:BulletedList>

</form>

</body>

</html>

Code 3b. Calendarmultiselect.aspx.cs

using System;

public partial class Calendarmultiselect : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected void btnSubmit_Click(object sender, EventArgs e)

{

bllresult.DataSource = calendar1.SelectedDates;

bllresult.DataBind();

}

Kết xuất của ví dụ 3

Tạo một Popup Datepicker

Trong phần này bạn sẽ học cách sử dụng điều khiển Calendar kết hợp với Javacript để tạo một Pop-up Date picker như trong hình dưới đây:

Code 4. popupdatepicker.aspx

<%@ Page Language="C#" %>

protected void calEventDate_SelectionChanged(object sender, EventArgs e)

{

txtEventDate.Text = calEventDate.SelectedDate.ToString("d");

}

protected void btnSubmit_Click(object sender, EventArgs e)

{

lblResult.Text = "Bạn chọn: " + txtEventDate.Text;

}

</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ;

<title>Pop-up Date Picker</title>

function displayCalendar()

{

var datePicker = document.getElementById('datePicker');

datePicker.style.display = 'block';

}

</script>

#datePicker

{

display:none;

position:absolute;

border:solid 2px black;

background-color:white;

}

.content

{

width:400px;

background-color:white;

margin:auto;

padding:10px;

}

html

{

background-color:silver;

}

</style>

</head>

<body>

<asp:Label id="lblEventDate" Text="Nhập ngày:" Runat="server" />

<asp:TextBox id="txtEventDate" Runat="server" />

<asp:Calendar id="calEventDate" OnSelectionChanged="calEventDate_SelectionChanged" Runat="server" />

</div>

<br />

<asp:Button id="btnSubmit" Text="Submit" Runat="server" OnClick="btnSubmit_Click" />

<hr />

<asp:Label id="lblResult" runat="server" />

</div>

</form>

</body>

</html>

III. Điều khiển Advertisements(Trình bày quảng cáo - Adrotator)

Cho phép bạn hiển thị các ảnh quảng cáo khác nhau trong 1 trang. bạn có thể lưu trữ các quảng cáo của bạn trong 1 file XML hoặc một bảng cơ sở dữ liệu.

. Các thuộc tính

Thuộc tính	Ý nghĩa
AdvertisementFile	Cho phép bạn chỉ định đến đường dẫn file XML chứa đựng danh sách ảnh quảng cáo
AlternateTextField	Cho phép chỉ định đến tên của trường để hiển thị nội dung thay thế khi ảnh quảng cáo vì một lý do nào đó không hiển thị được
DataMenber	Cho phép ràng buộc đến một thành viên cơ sở dữ liệu của nguồn cơ sở dữ liệu
DataSource	Chỉ rõ cở sở dữ liệu chứa danh sách các banner quảng cáo
DataSourceID	Ràng buộc đến 1 cơ sở dữ liệu
ImgUrlFile	Chỉ rõ đến trường chứa đường dẫn banner quảng cáo
KeywordFilter	Cho phép bạn lọc quảng cáo bởi 1 từ khoá
NavigateUrlField	Chỉ rõ đến tên của trường chứa các liên kết quảng cáo
Target	Cho phép bạn mở ra một cửa sổ mới khi nhấn vào banner quảng cáo

Sự kiện

· AdCreated: Xảy ra sau khi điều khiển Adrotator lựa chọn một quảng cáo nhưng trước khi điều khiển AdRotator đưa ra quảng cáo.

Chú ý rằng điều khiển AdRotator chứa đựng thuộc tính KeywordFilter bạn có thể cung cấp mỗi banner quảng cáo với 1 từ khoá sau đó khi trình bày quảng cáo chúng ta có thể lọc những quảng cáo theo điều kiện để hiển thị.

Ví dụ như trên trang của bạn, bạn cần trình bầy quảng cáo ở 4 vị trí trên banner(top) của trang, bên trai, phải và phía chân(bottom) của trang. Khi đó bạn gán với mỗi ảnh quảng cáo một từ khoá(ví dụ tương ứng với 1- top, 2- right, 3 – bottom, 4 - left) và khi trình bầy trong điều khiển AdRotator ta có thể dùng thuộc tính KeywordFilter để lọc và trình bày.

Ví dụ 1: Trên trang web của bạn trình bầy quảng cáo ở hai vị trí(trên đầu và bên phải của trang) layout như sau

Code 5a: AdRotatorXML.aspx

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="AdRotatorXML.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ;

<title>AdRotator XML</title>

#wrapper {width: 782px; margin: 0 auto;}

#border { border: 1px solid #8ECE5F; margin: 20px 0px 5px 0px; background-color: #ffffff; min-height: 776px; float: right; width: 780px;}

#header {background-color:#BECEF5; text-align: width:782px; height:100px; center; margin: 6px 0px 0px 0px;}

#right{background-color:#BECEF5; width:170px;margin: 6px 0px 0px 4px; height:300px; float:right}

.box{ float:right;padding:10px; border-left:solid 1px black;}

</style>

</head>

<body>

<asp:AdRotator ID="advbanner" AdvertisementFile="~/App_Data/AdList.xml" KeywordFilter="banner" runat="server" />

</div>

<asp:AdRotator ID="AdRotator1" AdvertisementFile="~/App_Data/AdList.xml" KeywordFilter="right" runat="server" />

</div>

<asp:AdRotator ID="AdRotator2" AdvertisementFile="~/App_Data/AdList.xml" KeywordFilter="right" runat="server" />

</div>

</form>

</body>

</html>

Nội dung File XML

Code 5b.

<?xml version="1.0" encoding="utf-8" ?>

<Ad>

<ImageUrl>~/Advertisement/images/banner.png</ImageUrl>