1.1 Trả về động một bức hình
V
V
Bạn cần trả về động một bức hình (chẳng hạn, để tạo dựng kết xuất dạng biểu
đồ hoặc đồ thị).
#
#
Tạo dựng bức hình bằng GDI+ và một đối tượng System.Drawing.Bitmap
trong-bộ-nhớ. Kế đó, bạn có thể ghi nó ra dòng kết xuất (output stream), hoặc
lưu nó vào ổ đĩa cứng của server và hiển thị nó với điều kiểm web Image.
Bạn có thể vẽ động các bức hình trong một ứng dụng Web bằng cách sử dụng cùng đoạn
mã GDI+ đã sử dụng trong một ứng dụng dựa-trên-Windows. Chỉ có điểm khác là cách
thức bạn trả về bức hình cuối cùng như thế nào. Về cơ bản, có hai cách tiếp cận mà bạn
có thể sử dụng:
• Bạn có thể đưa trực tiếp nội dung nhị phân của bức hình vào thuộc tính
OutputStream của đối tượng HttpResponse. Đây là một cách tiếp cận hay nếu bạn
không muốn làm đầy ổ đĩa cứng của server với các file hình không hề được sử dụng
lại. Đây cũng là sự lựa chọn tốt nhất nếu bạn cần tạo động các bức hình được thiết
kế để phù hợp với đầu vào của người dùng.
• Bạn có thể lưu bức hình vào hệ thống file của web-server và sử dụng thẻ HTML
<img> để hiển thị nó. Đây là sự lựa chọn tốt nếu bạn cần tạo một bức hình sẽ được
sử dụng lại, vì tránh được chi phí của việc tái tạo hình liên tục.
Mục này khảo sát cả hai cách tiếp cận trên. Trước tiên, hãy xét cách tạo động một hình
mà không lưu nó ra file. Trong ví dụ này, mục đích là tạo một banner đơn giản (xem hình
7.10).
Hình 7.10 Một banner được-tạo-động
The image part with relationsh ip ID rId 5 was not fo und in the file.
Để ý rằng chỉ có phần text của banner là do người dùng cung cấp (thông qua chuỗi truy
vấn). Font, màu, và kích thước được viết mã cứng (mặc dù chúng có thể được thiết lập dễ
dàng dựa vào các đối số chuỗi truy vấn khác hoặc dựa vào file Web.config).
Đoạn mã dưới đây sẽ trình bày cách tiếp cận này:
using System;
using System.Web;
using System.Web.UI.WebControls;
using System.Drawing;
using System.Drawing.Drawing2D;
public class DynamicGraphic : System.Web.UI.Page {
// (Bỏ qua phần mã designer.)
private void Page_Load(object sender, System.EventArgs e) {
// Lấy text từ chuỗi truy vấn.
// Nếu không có text, chọn mặc định.
string text = "";
if (Request.QueryString["image"] == null) {
Response.Redirect(Request.Url + "?image=" +
Server.UrlEncode("This is a test image"));
}
else {
text = Server.UrlDecode(Request.QueryString["image"]);
}
// Tạo một hình bitmap trong-bộ-nhớ
// (rộng 300 pixel và cao 200 pixel).
int width = 300, height = 200;
Bitmap bitmap = new Bitmap(width, height);
// Lấy graphics context của hình bitmap.
Graphics graphics = Graphics.FromImage(bitmap);
// Thiết lập màu nền và chất lượng hình.
// Màu này sẽ trở thành đường viền.
graphics.Clear(Color.OrangeRed);
graphics.SmoothingMode = SmoothingMode.AntiAlias;
// Vẽ một hình chữ nhật.
graphics.FillRectangle(new SolidBrush(Color.Olive), 5, 5,
width - 10, height - 10);
// Chọn font và alignment cho text.
Font fontBanner = new Font("Verdana", 24, FontStyle.Bold);
StringFormat stringFormat = new StringFormat();
stringFormat.Alignment = StringAlignment.Center;
stringFormat.LineAlignment = StringAlignment.Center;
// Vẽ text.
graphics.DrawString(text, fontBanner,
new SolidBrush(Color.LightYellow),
new Rectangle(0, 0, width, height), stringFormat);
// Lưu bức hình vào dòng kết xuất.
bitmap.Save(Response.OutputStream,
System.Drawing.Imaging.ImageFormat.Gif);
graphics.Dispose();
bitmap.Dispose();
}
}
Khi lưu bức hình vào dòng kết xuất, bạn sẽ thế chỗ bất kỳ kết xuất nào khác. Vì thế, bạn
không thể sử dụng kỹ thuật này với một trang cũng có chứa Web controls hoặc nội dung
HTML tĩnh. Theo đó, nếu muốn sử dụng một trang phối hợp các bức hình được-tạo-động
và các điều kiểm web, bạn cần “bọc” bức hình được-tạo-động trong một điều kiểm hoặc
ghi bức hình ra ổ đĩa cứng trước khi hiển thị nó.
Nếu muốn lưu file vào ổ đĩa cứng, bạn cần chuyển phần mã tạo dựng bức hình thành một
phương thức độc lập, mà chúng ta sẽ đặt tên là GenerateBanner. Kế đó, trong phương
thức thụ lý sự kiện Page.Load, bạn kiểm tra xem file đã tồn tại chưa (sử dụng phương
thức tĩnh File.Exists). Nếu file chưa tồn tại, bạn tạo nó trong bộ nhớ bằng phương thức
GenerateBanner và lưu nó bằng phương thức Bitmap.Save. Nếu file đã tồn tại, bạn chỉ
cần nạp thẳng bức hình này.
Đoạn mã dưới đây sẽ trình bày cách tiếp cận này:
using System;
using System.IO;
using System.Web;
using System.Web.UI.WebControls;
using System.Drawing;
using System.Drawing.Drawing2D;
public class DynamicGraphic : System.Web.UI.Page {
protected System.Web.UI.WebControls.Image imageControl;
// (Bỏ qua phần mã designer.)
private Bitmap GenerateBanner() {
// Tạo dựng bức hình, sử dụng phần mã trong ví dụ ở trên.
}
private void Page_Load(object sender, System.EventArgs e) {
// Thiết lập tên file.
// Giả sử chuỗi truy vấn chứa các ký tự hợp lệ cho tên file.
string fileName = Request.QueryString["image"] + ".gif";
Bitmap bitmap = null;
// Kiểm tra bức hình với phần text này đã tồn tại hay chưa.
if (File.Exists(fileName)) {
// Nạp bức hình hiện có.
try {
bitmap = new Bitmap(fileName);
}catch {
bitmap = GenerateBanner();
}
}
else {
bitmap = GenerateBanner();
// Lưu bức hình.
bitmap.Save(fileName,
System.Drawing.Imaging.ImageFormat.Gif);
}
// Hiển thị bức hình.
imageControl.ImageUrl = fileName;
}
}
1.2 Nạp điều kiểm người dùng bằng mã lệnh
V
V
Bạn cần tạo dựng động giao diện người dùng (user interface) cho một trang từ
một hoặc nhiều điều kiểm người dùng (user control).
#
#
Sử dụng phương thức Page.LoadControl để tạo đối tượng điều kiểm từ file
.ascx, và rồi thêm nó vào tập hợp Controls của một điều kiểm container.
Điều kiểm người dùng là các nhóm điều kiểm độc lập. Như Web Form, điều kiểm người
dùng bao gồm phần layout định nghĩa các điều kiểm bên trong (file .ascx) và phần code-
behind cùng với logic thụ lý sự kiện (file .cs). Điều kiểm người dùng cho phép bạn sử
dụng lại các phần tử giao diện thông thường trên nhiều trang và tạo dựng các giao diện
phức tạp từ các khối nhỏ hơn. Một đặc điểm hữu ích của điều kiểm người dùng là chúng
có thể được nạp bằng mã lệnh, điều này cho phép bạn tạo một giao diện cấu hình cao do
bạn thiết kế động y theo người dùng. Bạn chỉ cần nạp điều kiểm, cấu hình các thuộc tính
của nó, và rồi thêm nó vào một điều kiểm container.
Ví dụ, xét trang web đã tạo động các bức hình trong mục 7.12. Một giải pháp theo cách
hướng đối tượng hơn có thể hiện thực được là tạo một điều kiểm người dùng tùy biến
đóng gói bức hình được-tạo-động. Điều kiểm người dùng này cho phép trang thiết lập
text, font, màu... thông qua các thuộc tính khác nhau.
using System;
using System.Web;
using System.Web.UI.WebControls;
using System.Drawing;
using System.Drawing.Drawing2D;
public class DynamicGraphicControl : System.Web.UI.UserControl {
// (Bỏ qua phần mã designer.)
private string imageText = "";
public string ImageText {