Post
Ask Question

Dynamically Add Elements in Web Form Using TypeScript

Introduction

 
Mainly, we add controls at compile time from the Toolbox but sometimes we need to add a control at runtime. This type of control is called a Dynamic Control or Runtime control. Adding elements like textbox, button, radio button, etc. to a web form at runtime using TypeScript is very simple. TypeScript's document object has a method called "createElement()" which can be used to create HTML elements dynamically.
 
The following example shows how to create dynamic controls in a web form using TypeScript. In this example, we have used the "setAttribute()" method to assign the attributes to our dynamically created element. Let us use this function to create text boxes, radio buttons, buttons etc dynamically and add them to our page. Let's use the following steps.
 
Step 1
Open Visual Studio 2012 and click "File" -> "New" -> "Project...". A window is opened. In this window, click HTML Application for TypeScript under Visual C#.
 
Give the name of your application as "Dynamically_create_element " and then click ok.
 
Step 2
After step 1, right-click on "Dynamically_create_element ". A pop-up window is opened. Click on  "Add" -> "New Item" -> "Web Form". Give the name of your WebForm as "Demo.aspx" and then click "Ok".
 
Step 3
After this session the project has been created; A new window is opened on the right side. This window is called the Solution Explorer. The Solution Explorer contains the ts file, js file, CSS file, and aspx files. They should look as n the following.
 

Coding

 
Dynamically_Element .ts
  1. class Dynamically_create_element  
  2. {  
  3.  htmlelent: HTMLElement;  
  4.  Create_Element(htmlelent)  
  5.  {  
  6.   var element = document.createElement("input");  
  7.   //Assign different attributes to the element.  
  8.   element.setAttribute("type", htmlelent);  
  9.   element.setAttribute("value", htmlelent);  
  10.   element.setAttribute("name", htmlelent);  
  11.   element.setAttribute("style", "color:Red");  
  12.   document.body.appendChild(element);  
  13.  }  
  14. }  
  15. window.onload = () =>  
  16.  {  
  17.   var button = document.createElement('button');  
  18.   button.innerText = "Add";  
  19.   button.onclick = function()  
  20.   {  
  21.    var doc = ( < HTMLSelectElement > document.getElementById('Select1')).value;  
  22.    var create = new Dynamically_create_element();  
  23.    create.Create_Element(doc);  
  24.   };  
  25.   document.body.appendChild(button);  
  26.  };  
Demo.aspx
  1. <%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="Demo.aspx.cs"  
  2. Inherits="Dynamically_create_element.WebForm1"%>  
  3. <!DOCTYPEhtml>  
  4. <html  
  5.     xmlns="http://www.w3.org/1999/xhtml">  
  6.     <headrunat="server">  
  7.         <title></title>  
  8.     </head>  
  9.     <body>  
  10.         <formid="form1"runat="server">  
  11.             <div>  
  12.                 <scriptsrc="app.js">  
  13.                 </script>  
  14.                 <asp:LabelID="Label2"runat="server"Font-Bold="True"Font-Size="Large"ForeColor="#006600"  
  15.      Text="Dynamically add element in form">  
  16.                 </asp:Label>  
  17.                 <br/>  
  18.                 <asp:LabelID="Label1"runat="server"Text="Select the element and hit Add to add it in form"  
  19.     Font-Italic="True"ForeColor="Blue">  
  20.                 </asp:Label>  
  21.             </div>  
  22.         </form>  
  23.         <selectid="Select1">  
  24.             <optionvalue="button">Button  
  25.             </option>  
  26.             <optionvalue="text">Textbox  
  27.             </option>  
  28.             <optionvalue="radio">Radio  
  29.             </option>  
  30.         </select>  
  31.         <p>  
  32.         </body>  
  33.     </html>  
app.js
  1. var Dynamically_create_element = (function() {  
  2.  function Dynamically_create_element() {}  
  3.  Dynamically_create_element.prototype.Create_Element = function(htmlelent) {  
  4.   var element = document.createElement("input");  
  5.   element.setAttribute("type", htmlelent);  
  6.   element.setAttribute("value", htmlelent);  
  7.   element.setAttribute("name", htmlelent);  
  8.   element.setAttribute("style", "color:Red");  
  9.   document.body.appendChild(element);  
  10.  };  
  11.  return Dynamically_create_element;  
  12. })();  
  13. window.onload = function() {  
  14.  var button = document.createElement('button');  
  15.  button.innerText = "Add";  
  16.  button.onclick = function() {  
  17.   var doc = (document.getElementById('Select1')).value;  
  18.   var create = new Dynamically_create_element();  
  19.   create.Create_Element(doc);  
  20.  };  
  21.  document.body.appendChild(button);  
  22. };  
Output 1
 
Click on the Add button to add a dynamic button to our page; see:
 
create-button.jpg
 
Output 2
 
You add a dynamic textbox to the page. Select textbox from the combo box then click on the Add button; see:
 
create-textbox.jpg
 
Output 3
 
If you add a dynamic radio button to the page, select radio from the combo box then click on the Add button; see:
 
create-radio.jpg
 
Referenced By
http://www.typescriptlang.org/


Similar Articles