June 8, 2021

Programmingempire

In this post on the Example of Button Control in ASP.NET, I will explain the Button control using few examples.

The Button control in ASP.NET displays a push button on a Web Form. Basically, we use the Button control to post a page on the web server. Since, a postback submits a web page to the server for further processing, it is required to provide the code that should execute whenever postback occurs.

Hence, it is advisable to provide an event handler associated with the click event that executes when a user clicks the button. Additionally, the Button control has a CommandName property which is not available with the Button by default. Therefore, the user needs to specify it explicitly.

In the case of several buttons present on the Web Form, the CommandName property determines which of these buttons are clicked. While the CommandArgument property provides additional information. Also, we can provide an event handler for the Comand Event. The following example demonstrates the use of the Button control along with CommandName property and Command event.

In the following Example of Button Control in ASP.NET, we create three Command Buttons, that display a specific Bulleted List control dynamically. Further, the example shows how to use Attributes collection to associate a CSS class name with a DIV tag dynamically through the code.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="ButtonControlExample.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        .c1{
            background-color: bisque;
            min-height: 100px;
            margin: 50px;
            padding: 50px;
            font-size: 20px;
            font-weight: bold;
            border-radius: 10px;
            width: 500px;
            text-align:center;
        }
        .c2{
            margin:20px;
            font-weight:bold;
            background-color: darkred;
            color:lightyellow;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div id="d1" runat="server">
            <asp:Button ID="Button1" runat="server" Text="Show Color List" 
                OnCommand="Button1_Click" CommandName="Color" />
            <asp:Button ID="Button2" runat="server" Text="Show Course List" 
                OnCommand="Button1_Click" CommandName="Course" />
            <asp:Button ID="Button3" runat="server" Text="Show Fruit List" 
                OnCommand="Button1_Click" CommandName="Fruit" />
        </div>
    </form>
</body>
</html>

C# Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace ButtonControlExample
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            d1.Attributes.Add("class", "c1");
            Button1.Attributes.Add("class", "c2");
            Button2.Attributes.Add("class", "c2");
            Button3.Attributes.Add("class", "c2");

        }
        public void DisplayColorList() {
            BulletedList b1 = new BulletedList();
            
            b1.Items.Add("Red");
            b1.Items.Add("Blue");
            b1.Items.Add("Yellow");
            form1.Controls.Add(b1);
         }
        public void DisplayFruitList()
        {
            BulletedList b1 = new BulletedList();

            b1.Items.Add("Apple");
            b1.Items.Add("Mango");
            b1.Items.Add("Banana");
            form1.Controls.Add(b1);
        }

        public void DisplayCourseList()
        {
            BulletedList b1 = new BulletedList();

            b1.Items.Add("MCA");
            b1.Items.Add("MBA");
            b1.Items.Add("BTECH");
            form1.Controls.Add(b1);
        }

        protected void Button1_Click(object sender, CommandEventArgs e)
        {
            String str = e.CommandName;
            if(str.Equals("Color"))
            {
                DisplayColorList();
            }
            if (str.Equals("Fruit"))
            {
                DisplayFruitList();
            }
            if (str.Equals("Course"))
            {
                DisplayCourseList();
            }
        }
    }
}

Output

Programmingempire

Further Reading

You may also like...

Creating Columns in a DataGrid Control

Examples of Using Code Render Block In ASP.NET

How to Create a Pie Chart in ASP.NET