Source view of BUTTON.ASPX
DotNet Funda: Code Viewer
button.aspx | button.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:Button control</td>
        </tr>
        <tr>
            <td class="ArticleContents">
                Button control is used to post the form or fire an event either client side or server side.
            </td>
        </tr>
        <tr>
            <td colspan="2">&nbsp;</td>
        </tr>
    </table>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="PlaceHolderForContents" Runat="Server">
    <div class="ArticleContents">
        Button 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, it is generally implemented through &lt;input type=submit&gt; HTML tag.
        However, if <span class="DemoCP">UserSubmitBehavior</span> property is set to false then control will 
        render out as &lt;input type=button&gt;. 
        <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 Text property either by setting Text property in the .aspx page or from server side page. (other properties can also be set from both pages)
        </p>        
        <p>
            A button can be set as default button (Default button is a button that is Clicked when the user presses Enter key while filling a form.)
            by specifying <span class="DemoCP">DefaultButton</span> property of the &lt;form&gt; tag or to the asp:Panel tag in which it is placed.
            eg. If we have to set a button with id btnSubmit as default button we can add following properties to the &lt;form&gt; element.
            &lt;form id="Form1" DefaultButton="btnSubmit" runat="server"&gt;.
        </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">UserSubmitBehavior</td>
                <td>
                    true/false. If true, the button will be used as client browser submit mechanism else asp.net postback mechanism.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">CausesValidation</td>
                <td>
                    Value can be set as true/false. This indicates whether validation will 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:Button ID="btnServer" runat="Server" Text="Activate Server Side Event" OnClick="ActivateServerSideEvent" />
                </td>
            </tr>
            <tr>
                <td class="DemoCP">OnClientClick</td>
                <td>
                    Attach a client side (javascript) event that will fire when button will be clicked.
                    <asp:Button ID="btnClient" runat="Server" Text="Activate Client Side Method" OnClientClick="GiveAlertToUser()" UseSubmitBehavior="False" 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/button.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:Button ID="btnSubmit" runat="Server" OnClick="FireServerSideEvent" Text="Fire Server Side Event" 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:Button ID=&quot;btnServer&quot; runat=&quot;Server&quot; Text=&quot;Activate Server Side Event&quot; OnClick=&quot;ActivateServerSideEvent&quot; /&gt;
                
                // with OnClientClick event and CommandName 
                &lt;asp:Button ID=&quot;btnClient&quot; runat=&quot;Server&quot; Text=&quot;Activate Client Side Method&quot; OnClientClick=&quot;GiveAlertToUser()&quot; UseSubmitBehavior=&quot;False&quot; CommandName=&quot;ClientSideButton&quot; /&gt;
                
                // with OnClick & ValidationGroup
                &lt;asp:Button ID="Button1" runat="Server" OnClick="FireServerSideEvent" Text="Fire Server Side Event" ValidationGroup="demo" /&gt;
                    </pre>
                </td>
            </tr>
        </table>
        <!-- END - Demo Section -->
        Here note that when you click "Fire Server Side Event" button, the form will be posted only when you have entered something into the TextBox, while other buttons are posted back without validatation.
        Here only textbox and "Fire Server Side Event" button have same ValidateionGroup called "demo", so this button is validating only textbox.
        
        </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