Button control - DotNet and DataBase

Wednesday, 29 August 2018

Button control



Button control is to post the request to the server. It is an ASP.Net server control which contains the tag 'runat="server"'.

The syntax of a button controls is
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" / >


ID is the unique identification source of the control, 'runat="server"' indicates its a server control, Text is the value which displays on the user interface and onclick is the event which fires when the user clicks on the button control.


PropertyDescription
AccessKeyIt is used to set the keyboard shortcut for the control. Pressing the Access key with "Alt" we can execute the event. 
TabIndexSet the tab order of the control.
BackColorbackground color of the control can be set using this property.
BorderColorTo set the border color of the control.
BorderWidthTo set the width of the border of the control.
FontTo set the font for the control text.
ForeColorIt is used to set the color of the control text.
TextIt is used to set the text to be shown for the control.
ToolTipIt displays the text when the mouse is over the control.
VisibleTo set the visibility of control on the form.
HeightTo set the height of the control.
WidthTo set the width of the control.
  Using the above features/properties we can decorate the controls.

Aspx page
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ButtonControl.aspx.cs" Inherits="DotNetPractice.Controls.ButtonControl" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Button ID="Button1" AccessKey="A" TabIndex="0" BackColor="Red" ForeColor="White" BorderColor="Green" BorderWidth="5" runat="server" ToolTip="Its a button" Text="Button" Height="100" Width="200" OnClick="Button1_Click"/>
            <asp:Label ID="lblMessage" runat="server" Text=""></asp:Label>

        </div>
    </form>
</body>
</html>


Code behind

using System;

namespace DotNetPractice.Controls
{
    public partial class ButtonControl : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            lblMessage.Text= "Clicked on the button";
        }
    }
}


Output: 

When the user clicks on the button/by pressing Alt+A(supplied access key), we can get the output "Clicked on the button"


OnClientClick event OnClientClick event works on the client side and before submitting the page to the server we can pass information and confirmation (alert & confirm) messages to the user and we can do other javascript related activities. Confirmation message shows the message with "OK & Cancel" options and by clicking OK only the page will get submit, otherwise postback will not happen.


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ButtonControl.aspx.cs" Inherits="DotNetPractice.Controls.ButtonControl" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Button ID="Button1" AccessKey="A" TabIndex="0" BackColor="Red" ForeColor="White" BorderColor="Green" BorderWidth="5" runat="server" ToolTip="Its a button" Text="Button" Height="100" Width="200" OnClick="Button1_Click" OnClientClick="alert('You clicked on the Button1')"/>

             <asp:Button ID="Button2" TabIndex="1" BackColor="green" ForeColor="White" BorderColor="red" BorderWidth="5" runat="server" ToolTip="Its a button" Text="Button" Height="100" Width="200" OnClick="Button2_Click" OnClientClick="return confirm('Have you clicked on Button2?')"/>

        </div>
    </form>
</body>
</html>




No comments:

Post a Comment

x

Get Updates On

Discussion updates

Straight Into Your INBOX!

Enter your email address to subscribe to this website and receive notifications of new posts by email.