Asp. NET in the use of the image control

Asp. NET in the use of the image control _ Basic Application

Last Update:2017-01-18 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

The image control, also known as a picture control, is used primarily to display user pictures or image information.

One, property

Table 1 Common properties and descriptions for image controls

Property	Description
Id	Control ID
ImageAlign	Gets or sets the alignment of the image control relative to other elements on the Web page
ImageUrl	Gets or sets the position of the image displayed in the image control
Width	Width of control
Visible	Control is visible
CssClass	The style that the control renders
BackColor	control's background color
Enabled	Control is available

Most of the properties of the image control are similar to the label control, and this explains its ImageUrl property settings primarily.

The ImageUrl property is used to get the address of an image to display in the image control, and when you set this property, click the icon button behind the ImageUrl property text box to pop up a Select Image dialog box, shown in Figure 1, where the user can select the image to display.

Figure 1 "Select Image" dialog box

Second, the method

The image control commonly used methods are similar to label controls, see the label controls commonly used methods. Here is a brief introduction to the ResolveUrl method of the control, the ResolveUrl method is mainly used to convert the URL to a URL that is available at the requesting client.

For example, to use the ResolveUrl method to set the link image path for an image control, you can write the following code.

Copy Code code as follows:

Image1.imageurl = ResolveUrl (~/image/image1.gif);

III. Events

The image control common events are similar to label controls, see the label control frequently used events.

Iv. examples

Example:

Image Control Sample

The following example displays a linked picture on the control primarily by setting the ImageUrl property of the image control. Create a new Web site, the default home page is default.aspx, add an image control on the Default.aspx page, and its property settings are shown in table 2.

Table 2 Image control property settings

Property name	Property Value
Id	ImageUrl
ImageUrl	~/image/image1.gif (link picture)
ImageAlign	Middle (center alignment)

Executes the program, and the sample runs as shown in Figure 2.

Figure 2 Image Control Sample

The complete code for the program is as follows:

Default.aspx.cs Code files

Copy Code code as follows:

Using System;
Using System.Data;
Using System.Configuration;
Using System.Web;
Using System.Web.Security;
Using System.Web.UI;
Using System.Web.UI.WebControls;
Using System.Web.UI.WebControls.WebParts;
Using System.Web.UI.HtmlControls;

public partial class _default:system.web.ui.page
{
protected void Page_Load (object sender, EventArgs e)
{

}
}

Default.aspx Design Documents

Copy Code code as follows:

<%@ Page language= "C #" autoeventwireup= "true" codefile= " Default.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>image Control Sample </title>
<body>

    <form Id= "Form1" runat= "Server" >
    <div>
        <asp:image id= "Image1" runat= "Server" height= "177px" imagealign= "Middle"
              imageurl= "~/image/image1.gif" width= "121px"/>
   </div>
    </form>

</body>

V. Expansion

Image control when there is no picture, the "red X" is not friendly enough to set its AlternateText property or to display the specified picture

1. General Display

Copy Code code as follows:

String str = "~/img/" +int. Parse (TextBox1.Text) + ". gif";

if (! File.exists (Server.MapPath (str)))//show nophoto.gif if not present
{
Image1.imageurl = "~/img/nophoto.gif";
Response.Write ("Bucunzai");
}
else//sometimes show
{
Image1.imageurl = str;
Response.Write ("Cunzai");
}

2. Another possibility is to read a binary picture from the database (the red part needs to be read from the database)

Copy Code code as follows:

byte [] b=....;//read from the database

if (b = = NULL | | b.length = 0)
{
Display the default picture when there is no picture data nophoto.gif
FileStream fs = new FileStream (Server.MapPath ("~/management/images/nophoto.gif"), FileMode.Open, FileAccess.Read);
byte[] MyData = new Byte[fs. Length];
int Length = Convert.ToInt32 (fs. Length);
Fs. Read (MyData, 0, Length);
Fs. Close ();
This. Response.OutputStream.Write (MyData, 0, Length);
This. Response.End ();
}
Else
{
Response.ContentType = ...;//read the suffix name of the picture from the database
Response.OutputStream.Write (b, 0, b.length);
}

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

Asp. NET in the use of the image control _ Basic Application

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support