How to Use ImageButton in Asp.Net C#

01:14:00  , ,  No comments

IMAGEBUTTON
The ImageButton control is used to display a clickable image.
ImageButton control in ASP.NET is just like a Button control. 
Events of ImageButton are the same as Button control.
You will provide the image using ImageUrl property of the ImageButton control
Properties
ImageUrlGets or Sets the location of the image to display.
CausesValidationValue can be set as true/false. This indicates whether validation should be performed when a button is clicked.
PostBackUrlIndicates the URL on which the Form will be posted back.
ValidationGroupGets or Sets the name of the validation group that the button belongs to. This is used to validate only a set of Form controls with a Button.
OnClickAttach a server side method that will fire when button will be clicked. 
OnClientClickAttach a client side (javascript) method that will fire when button will be clicked. 

DEMO





Html Code

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>   
       
        <asp:ImageButton ID="ImageButton1" runat="server"
            Height="139px" ImageUrl="~/tiger.jpg"
            OnClick="ImageButton1_Click1" Width="493px" />
     
    </div>
    </form>
</body>
</html>


                                 C# Coding

 protected void ImageButton1_Click1(object sender, ImageClickEventArgs e)
   
 {
        Response.Write("<script>alert('This is a Tiger')</script>");




    }



First - Add - New Webform - Select Image Button From ToolBox 

Next  - Add the image(tiger.jpg) to solution Explorer 









Next - Go to  ImageButton Property Window -  Select ImageUrl 






Add Required Image From  Content of Folder & ok







Image added  to Image Button  


Next - Double Click  ImageButton





                
                        Html Code For ImageButton





Next - Write Code  One  Popup Message for Image Button







 Next  -  F5 Run  the form - Dispaly  Tiger image 
Next -  Double Click Image 





                     
                         Show the PopUp   Message 



                               
                                                      

0 comments:

Post a Comment