Wednesday, 20 July 2011

Using the Image Control with ASP.NET 4.0


In this tutorial we will demonstrate how to use ASP.NET's Image control to display images on a web form.

Adding the Default.aspx Page
At this point in the tutorial I have created a new ASP.NET Empty Web Site. What we need to do first is add in a blank Web Form to which we will add the Image control. To do this:
  1. Right click the project in your Solution Explorer.
  2. Select Add New Item…
  3. Select a Web Form and name it Default.aspx.
  4. Click Add.

We chose Server Intellect for its dedicated servers, for our web hosting. They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.

Adding the Image Control
Next, we need to add the image control to the Default.aspx page. To do this, open the Default.aspx page up to Design mode and:
  1. Locate the Image Control in the Standard tab of your Toolbox.
  2. Drag and drop an Image Control on to the Web Form.
Next, we need to set the ImageUrl property of the Image Control to an image in our project. First, we need to find an image and add it to the project. For this, I have created a sample image named image.gif, but you can use any image you have. To add this to the project:
  1. Right click the project in your Solution Explorer.
  2. Select Add Existing Item…
  3. Navigate to the picture that you want to add, select it and click Add.

If you're ever in the market for some great Windows web hosting, try Server Intellect. We have been very pleased with their services and most importantly, technical support.

Now that it is part of the project, we need to set our Image Control to display it. To do this:
  1. Right click the Image Control on the Web Form and select Properties.
  2. Find the ImageUrl property of the Image Control and click the '…' button.
  3. Select image.gif and click OK.
SS1.gif

Server Intellect assists companies of all sizes with their hosting needs by offering fully configured server solutions coupled with proactive server management services. Server Intellect specializes in providing complete internet-ready server solutions backed by their expert 24/365 proactive support team.

To test this, load up the web site and verify that your picture is being displayed.

The Default.aspx source looks like this: 
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Image ID="Image1" runat="server" ImageUrl="~/image.gif" />
    </div>
    </form>
</body>
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)