1. Home
2. asp.net
3. How to create dynmaic button on webform, add event handlers, javascript

How to create dynmaic button on webform, add event handlers, javascript

Category > ASP.NET || Published on : Friday, October 3, 2014 || Views: 9317 || Create Dynmaic Button Add Event handlers Add javascript.

---

In this Tutorial, I will show you how to create dynmaic button on webform, add event handlers, javascript. To add control on a blank webpage from the Code Behind, I will add the Buttons.  

Here is the code for the Page_Load event.

  protected void Page_Load(object sender, EventArgs e)
        {
            form1.Controls.Add(GetButton("Button1", "Click"));
            form1.Controls.Add(GetButton("Button2", "Click again"));
        }

As you can see that, I am adding button control by calling the "GetButton" Method. This method will take two parametrs of string type. Here is the code of "GetButton" Method.

 private Button GetButton(string id, string name)
        {
            Button b = new Button();
            b.Text = name;
            b.ID = id;
            b.Click += new EventHandler(Button_Click);
            b.OnClientClick = "ButtonClick('" + b.ClientID + "')";
            return b;
        }

"GetButton" Method is a Private method and accepting two paramters of string Type. In the method, We are creating a Button Object and assiging the "Text" and "ID" attributes using the Paramter passed to the "GetButton" Method. After, that, I'm adding a Click Eent and creating a new EventHandler Button_Click. then, I'm Adding a "OnClientClick" attribute and passing a Javascript function name "ButtonClick" with passing the ClientID of the Button Control as a js paramter and at the end , it is returing the button Control.

Next, We have to defined the "Button_Click" EventHanlder. Hers is the Code :-

 protected void Button_Click(object sender, EventArgs e)
        {
            ClientScript.RegisterClientScriptBlock(this.GetType(), ((Button)sender).ID, "");
            Response.Write(DateTime.Now.ToString() + ": " + ((Button)sender).ID + " was clicked");
        }

In this method, I am registering a javascript and passing an alert to test if the Button is clicked. Also, I am writing the ID of the Button that has been clicked.

From the "GetButton" method, I am also assigning a javascript function "ButtonClick" to "OnClientClick" property. This method is defined on the main page or aspx page as follows.

The function does an alert with the id of the Button in it.

Here is the Complete Code for ASPX:-

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
"http://www.w3.org/1999/xhtml">
"server">
    
    


    "form1" runat="server">
    

    
    

Here is the Complete Code for Code Behind:-

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

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

        form1.Controls.Add(GetButton("Button1", "Click"));
        form1.Controls.Add(GetButton("Button2", "Click again"));
    }

    private Control GetButton(string id, string name)
    {
        Button b = new Button();
        b.Text = name;
        b.ID = id;
        b.Click += new EventHandler(Button_Click);
        b.OnClientClick = "ButtonClick('" + b.ClientID + "')";
        return b;
    }

    protected void Button_Click(object sender, EventArgs e)
    {
        ClientScript.RegisterClientScriptBlock(this.GetType(), ((Button)sender).ID, "");
        Response.Write(DateTime.Now.ToString() + ": " + ((Button)sender).ID + " was clicked");
    }
}

after writing the complete codes, Press F5 from the Visual Studio to run the application, When the page is run, two Button controls are added to the page with text "Click" and " Click Again". When the buttons are clicked, javascript alerts can be seen on the page and an output is displayed with date and time and the id of the button that was clicked.

 

Download Source Codes

---

You might also like