HTML Image Input
in ASP.NET à
Hi!
Here I will show you step by step procedure how to use
HTML Image Input in ASP.NET in visual studio
2005 / 2008
HTML Image Input is very important
in ASP.NET, in this you can use simple images in you web page like image button…
__________________________________________________
Here I am using Visual Studio 2008 but there is no condition you can use
Visual Studio 2005 also.
So follow these steps to create HTML
Image Input
The Steps are:
1- Start -> All Programs -> Visual Studio 2005 or Visual Studio 2008
2- Now go to File Menu -> New -> Web Site
3- Under Visual Studio Installed Template-> Choose ASP.NET WEB SITE ->
Choose File System from the location combo box -> Set the path by the browse
button - > Choose the language from the Language ComboBox (Visual C# ,
Visual Basic , J #)
Choose Visual C#
4 - Click on the OK Button:-
First you have to learn XML and HTML to work with ASP .NET_
I have used <! – –> to make the text as comment this is
the way to make comment in this code …
This is the Source Code window and in this page you will se this code…
<%@ 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”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”>
<title>Type your webpage title here</title>
<!– Here you can specify your page title in
between title tag ->
</head>
<body>
<form id=”form1? runat=”server”>
<div>
<!– In between div tags you can manage your web
controls like buttons, labels, picture
Box, ImageMap etc –>
</div>
</form>
</body>
</html>
See here is a tab named Design in the bottom of this page
5- Click on this tab and you will see a blank web page where you can drag
any control from the toolbox (which is in the left side of this window)
Open Web.config file and write true in place of false, See
<compilation
debug="true">
6- Now copy two images and paste it in App_Data ( I have taken two images
submit.bmp and reset.bmp)
7- Now type this code in the source window…
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="label1" runat
= "server"
Text=""></asp:Label>
<br /><br />
<input type="image"
runat ="server"
id ="image33"
src="~/Loading.gif"
/>
<input type="image"
runat ="server"
id ="Image1"
src ="submit.bmp"
onserverclick="Image1_ServerClick"
onclick ="return
image1_onclick()"/>
<input type="image"
runat="server" id="Image2" src="reset.bmp" onserverclick
="Image2_ServerClick"/>
<br /><br /><br />
<span id="span1" runat="server"></span>
</div>
</form>
</body>
8-
In the C# code window type this code….
protected
void Image1_ServerClick(Object sender, ImageClickEventArgs e)
{
label1.Text = "You have clicked Submit
Button";
}
protected void Image2_ServerClick(object
sender, ImageClickEventArgs e)
{
span1.InnerHtml = "You have clicked Reset Button";
}
11 - Now run your web site by Ctrl + F5
OUT PUT
12-When you click on the image button
The messages will display in the span (span is just like a lable but it does
not visible)
13- Close web browser
14-Close visual studio
Thanks!
--Nikhil Kumar
![IMG0562A.jpg]()