Source view of IMAGEBUTTON.ASPX
DotNet Funda: Code Viewer
imagebutton.aspx | imagebutton.aspx.cs
Close Window  
<asp:Content ID="Content1" ContentPlaceHolderID="PlaceHolderHeader" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="PlaceHolderForTitleAndIntro" Runat="Server">
    <table width="100%" cellpadding="2" cellspacing="0">
        <tr valign="top" class="ArticleTitle">
            <td style="padding-left:10px;" valign="middle">
                asp:ImageButton control</td>
        </tr>
        <tr>
            <td class="ArticleContents">
                ImageButton control is used to post the form or fire an event either client side or server side. 
                Its like a asp:Button control, the only difference is, you have ability to place your own image as a button.
            </td>
        </tr>
        <tr>
            <td colspan="2">&nbsp;</td>
        </tr>
    </table>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="PlaceHolderForContents" Runat="Server">
    <div class="ArticleContents">
        ImageButton control is generally used to post the form or fire an event either client side or server side.
        When it is rendered on the page, generally it is implemented through &lt;input type=image &gt; HTML tag.
        <p>
        There is no <span class="DemoCP">UserSubmitBehavior</span> property like Button control with LinkButton control.
        </p>
        <p>
        Its properties like <span class="DemoCP">BackColor, ForeColor, BorderColor, BorderStyle, BorderWidth, Height etc. </span>
        are implemented through style properites of &lt;input&gt; tag. 
        You can set its Image location either by setting ImageURL properties in the .aspx page or from server side page. (other properties can also be set from both pages)
        </p>        
        
        Following are some important properties that are very useful.
        <table width="100%" class="TutoPropPlaceHolder" border="1" cellpadding="2" cellspacing="1">
            <tr>
                <td class="DemoCP">ImageUrl</td>
                <td>
                    Gets or Sets the location of the image to display.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">CausesValidation</td>
                <td>
                    Value can be set as true/false. This indicates whether validation should be performed when a button is clicked.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">PostBackUrl</td>
                <td>
                    Indicates the URL on which the Form will be posted back.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">ValidationGroup</td>
                <td>
                    Gets 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.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">OnClick</td>
                <td>
                    Attach a server side method that will fire when button will be clicked.
                    <asp:ImageButton ID="btnServer" runat="Server" ImageUrl="~/images/demoButton.gif" OnClick="ActivateServerSideEvent" />
                </td>
            </tr>
            <tr>
                <td class="DemoCP">OnClientClick</td>
                <td>
                    Attach a client side (javascript) method that will fire when button will be clicked.
                    <asp:ImageButton ID="btnClient" runat="Server" ImageUrl="~/images/demoButton.gif" OnClientClick="GiveAlertToUser()" CommandName="ClientSideButton" />
                </td>
            </tr>
            
        </table>
        <!-- START - Demo Section -->
        <table class="DemoPlaceHolder" border="1" cellpadding="2" cellspacing="4">
            <tr>
                <td class="DemoTitle">
                    DEMO : Button
                </td>
                <td align="right">
                    <a class="DemoShowSource" href="../../misc/codeviewer/default.aspx?pagename=~/tutorials/controls/imagebutton.aspx" target="_blank">Show Source Code</a>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="lbl" AssociatedControlID="TextBox1" runat="Server" Text="Write something and Click the button"></asp:Label>
                    <asp:TextBox ID="TextBox1" runat="Server"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="ra1" runat="server" ControlToValidate="TextBox1" Text="Write something into Textbox" ValidationGroup="demo"></asp:RequiredFieldValidator>
                    <asp:ImageButton ID="btnSubmit" runat="Server" OnClick="FireServerSideEvent" ImageUrl="~/images/demoButton.gif" ValidationGroup="demo" />
                </td>
                <td>
                    Ex. <asp:Label ID="Label1" runat="server" BackColor="Coral" ForeColor="blue" BorderColor="ActiveBorder" BorderStyle="dashed" BorderWidth="1" Height="20" Text="Example of Label Control" Width="200" ></asp:Label>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <pre>
                        // with OnClick event
                        &lt;asp:ImageButton ID="ImageButton1" runat="Server" ImageUrl="~/images/demoButton.gif" OnClick="ActivateServerSideEvent" /&gt;
                        
                        // With OnClientClick and CommandName
                        &lt;asp:ImageButton ID="ImageButton2" runat="Server" ImageUrl="~/images/demoButton.gif" OnClientClick="GiveAlertToUser()" CommandName="ClientSideButton" /&gt;
                        
                        // With OnClick and ValidationGroup
                        &lt;asp:ImageButton ID="ImageButton3" runat="Server" OnClick="FireServerSideEvent" ImageUrl="~/images/demoButton.gif" ValidationGroup="demo" /&gt;
                    </pre>
                </td>
            </tr>
        </table>
        <!-- END - Demo Section -->
        
        
        </div>
    <br />
    
    <script language="javascript" type="text/javascript">
        function GiveAlertToUser()
        {
            alert("Hi Dear, Client side method worked.");
        }
    </script>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="PlaceHolderFooter" Runat="Server">
</asp:Content>

Go Top