Introduction to ImageButton Control:
ImageButton: ImageButton displays a button with an image (instead of text) that can be pressed or clicked by the user.1. Create a new web form.
2. Drag a ImageButton from toolbox on your page.
Properties:
a. ID: Set its ID.b. AutoPostBack: Button is a control which has its AutoPostBack property set to true by default.
c. OnClientClick: You can write any JavaScript function here that will be called before postback.
d. ImageUrl: Copy an image into your project and provide its url in image url property.
e. You can its style properties like CssClass, BorderColor, Height, Width etc.
<form id="form1" runat="server">
<div style="align-content: center; text-align: center">
<br />
<br />
<br />
<br />
<br />
<asp:ImageButton ID="imgBtn" runat="server"
OnClientClick="alert('You clicked an ImageButton')"
ImageUrl="~/Images/Submit-Button-PNG-Clipart.png"
Height="100" Width="500" BorderColor="Black" OnClick="imgBtn_Click"
ImageAlign="Middle" />
</div>
</form>
<div style="align-content: center; text-align: center">
<br />
<br />
<br />
<br />
<br />
<asp:ImageButton ID="imgBtn" runat="server"
OnClientClick="alert('You clicked an ImageButton')"
ImageUrl="~/Images/Submit-Button-PNG-Clipart.png"
Height="100" Width="500" BorderColor="Black" OnClick="imgBtn_Click"
ImageAlign="Middle" />
</div>
</form>
Functions:
Most common function of button is click, generate an onclick function by double clicking the button in design view.Now in the function generated in .aspx.cs file you can program your logic.
Response.Write allow us to write something on top of page from back end. You can call other controls in this function and can display data.
protected void Page_Load(object sender, EventArgs e)
{
}
protected void imgBtn_Click(object sender, ImageClickEventArgs e)
{
string message = "ImageButton displays a button with an image (instead of ";
message = message + "text) that can be pressed or clicked by the user.";
Response.Write("<div style='align-content:center; text-align:center'><br /><br /><br />" + message + "</div>");
}
{
}
protected void imgBtn_Click(object sender, ImageClickEventArgs e)
{
string message = "ImageButton displays a button with an image (instead of ";
message = message + "text) that can be pressed or clicked by the user.";
Response.Write("<div style='align-content:center; text-align:center'><br /><br /><br />" + message + "</div>");
}
Done!
Run the program.
Click the ImageButton, first client click function will work and then backend file function will work.
Let me know in the comment section if you have any question.
Previous Post:
Button Control in Asp.net C# Web Form
Next Post: