July 12, 2009

I am going to show how to create dynamic Button controls, add event handlers, javascript and then add it to the page. To do so, I will create a page with no controls in it. 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 can be seen, I am adding controls to the form element by calling the method GetButton. The GetButton method takes two parameters of type string. Here, is the code for the 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 is a private method taking two arguments id and name of type string. In the method, I am creating a Button object and assigning the Text and ID attributes using the arguments passed. Then, I am adding a Click event and creating a new EventHandler Button_Click. Then, I am adding a OnClientCllick attribute and passing a javascript function name "ButtonClick" and passing the ClientID of the Button control as a parameter. Lastly, the methos is returning the Button control.

As can be seen, the GetButton method has an EventHandler Button_Click which has not been defined. Here is the code for the Button1_Click event.

    protected void Button_Click(object sender, EventArgs e)
        {
            ClientScript.RegisterClientScriptBlock(this.GetType(), ((Button)sender).ID, "<script>alert('Button_Click');</script>");
            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 as follows.

     <script type="text/javascript">
        function ButtonClick(buttonId) {
            alert("Button " + buttonId + " clicked from javascript");
        }
    </script>


The function does an alert with the id of the Button in it.
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.

 

10 comments:

Nitin said...

Good job done by u:)

Thanks
Nitin

Sukanta said...

This code is very much helpful for me. Thanks a lot.

Peter said...

Awesome!! thank god i found your guide. Button in my placeholder works fine!!

Winfield said...

how can i locate the button inside a table cell? I have a table inside the form and the table will display some data loaded from database. i want to display some button inside of the table cell with some data as well.

Shahed Kazi said...

@Winfield, previously I wrote a post on how to find child controls and its properties at http://shahed-kazi.blogspot.com/2009/05/find-properties-of-child-controls.html . You would find this helpful.

Unknown said...

Thanks for replying. Sorry about the confusion of my question. I don't want to find the controls. I want to dynamically create the button controls in a table cells. I had a table; the table will display the data from a database; the data is filtered and processed before displaying on the table. the cell of the table is created depended on the data value; therefore, i create the table in codebehind using responce.write() with complicated logic on processing the data. and now, i want to add some button controls to some of the cells of the table to allow the user to save the edited data back to the database.

when i use the code showed on this blog, the buttons are added at the end of the form.

Unknown said...

Hi Shahed,

thanks for replying and sorry about the confusion of my question. what i need to do is to add the button controls dynamically inside of a table cell in code-behind. My webpage will load a set of data in a database and display the data using a table. The table layout will depend on the data; therefore, i create the table in code-behind by using Response.write(). And now, i want to add some buttons to some of the table cell depended on the data.

Shahed Kazi said...

The problem is you are not creating the Table control and instead using Response.Write. Response.Write() method is fine if you want to write html output, however, you can add server controls like Button to it. To correctly add Button control to Table, create a Table control and TableCell, then create the Button control and add it to the TableCell.

http://www.csharpaspnetarticles.com said...

very neatly explained

Anonymous said...

thanks !!!!

Reference: Shahed Kazi at AspNetify.com