Chương: 12

User Controls and Graphics

Lập trình Web Lập trình Web

1 Lập trình Web

Nội dungNội dung

User ControlsDynamic Graphics

Lập trình Web 2

User ControlsUser ControlsCreating a Simple User ControlIndependent User ControlsIntegrated User ControlsUser Control EventsPassing Information with Events

Lập trình Web3

User ControlsUser ControlsUser controls look pretty much the same as ASP.NET web

forms.

They are composed of a markup portion with HTML and control tags and can optionally use a code-behind file with event-handling logic.

They can also include the same range of HTML content and ASP.NET controls,

and they experience the same events as the Page object (such as Load and PreRender)

Lập trình Web 4

Differences between user controls Differences between user controls and web pagesand web pagesUser controls use the file extension .ascx instead of .aspx,

and their code-behind files inherit from the System.Web.UI.UserControl class

The .ascx file for a user control begins with a <%@ Control %> directive instead of a <%@ Page %> directive.

User controls can’t be requested directly by a web browser. Instead, they must be embedded inside other web pages

Lập trình Web 5

The Page and UserControl The Page and UserControl inheritance chaininheritance chain

Lập trình Web 6

Creating a Simple User ControlCreating a Simple User ControlYou can create a user control in Visual Studio in much the

same way you add a web page. Just select Website -> Add New Item, and choose Web User Control from the list.

The following user control contains a single Label control:

Note that the Control directive uses the same attributes used in the Page directive for a web page, including Language, AutoEventWireup, and Inherits.

Lập trình Web 7

<%@ Control Language="C#" AutoEventWireup="true"CodeFile="Footer.ascx.cs" Inherits="Footer" %><asp:Label id="lblFooter" runat="server" />

Creating a Simple User ControlCreating a Simple User ControlThe code-behind class for this sample user control is

similarly straightforward. It uses the UserControl.Load event to add some text to the label

Lập trình Web 8

public partial class Footer : System.Web.UI.UserControl{ protected void Page_Load(Object sender, EventArgs e) { lblFooter.Text = "This page was served at "; lblFooter.Text += DateTime.Now.ToString(); }}

Using user controlsUsing user controlsThis is a two-step process.

First, you need to add a Register directive to the page that will contain the user control.You place the Register directive immediately after the Page directive.The Register directive identifies the control you want to use and

associates it with a unique control prefix, as shown here

Second, you can now add the user control whenever you want (and as many times as you want) in the page by inserting its control tag.

Lập trình Web 9

<%@ Register TagPrefix="apress" TagName="Footer" Src="Footer.ascx" %>

Lập trình Web 10

Enhance a control with properties, Enhance a control with properties, methods, and eventsmethods, and events

Lập trình Web 11

User Control EventsUser Control Events

Lập trình Web 12

Passing Information with EventsPassing Information with Events

Lập trình Web 13

Dynamic GraphicsDynamic Graphics

Lập trình Web14

Basic DrawingBasic DrawingYou need to follow four basic steps when using GDI+.

First, you have to create an in-memory bitmap. This is the drawing space where you’ll create your masterpiece

The next step is to create a GDI+ graphics context for the image, which is represented by a System.Drawing.Graphics object

Using the methods of the Graphics class, you can draw text, shapes, and images on the bitmap.

Lập trình Web 15

Graphics g = Graphics.FromImage(image);

Bitmap image = new Bitmap(300, 50);

DrawingMethods of the Graphics DrawingMethods of the Graphics ClassClassSee Table12-1 (page 395)

Note:This code performs its drawing on the in-memory Bitmap

object created earlier. Until this image is rendered (a skill you’ll pick up shortly), you won’t actually see anything on the web page.

Methods that draw shape outlines require a Pen, Methods that draw filled-in shapes require a Brush

Lập trình Web 16

DrawingMethods of the Graphics DrawingMethods of the Graphics ClassClassOnce the image is complete, you can send it to the

browser using the Image.Save() method.

Conceptually, you “save” the image to the browser’s response stream. It then gets sent to the client and displayed in the browser

Lập trình Web 17

image.Save(Response.OutputStream,System.Drawing.Imaging.ImageFormat.Gif);

Placing Custom Images Inside Web Placing Custom Images Inside Web PagesPagesThe Image.Save() approach has one problem.

When you save an image to the response stream, you overwrite whatever information ASP.NET would otherwise use.

Solution:You can link to a dynamically generated image using the

HTML <img> tag or the Image web controlBut instead of linking your image to a fixed image file, link

it to the .aspx file that generates the picture

Lập trình Web 18

<asp:Image id="Image1" runat="server"ImageUrl="GraphicDemo.aspx?Text=Hello"></asp:Image>