ARTICLE

Dynamically Add Elements in Web Form Using TypeScript

Posted by Nitin Bhardwaj Articles | TypeScript December 14, 2012
Tags: add elements in typescript, Dynamic element in TypeScript, element in typescript, TypeScript
In this article I explain how to create dynamically add elements to a web form using TypeScript.
Reader Level:

Introduction

Mainly, we add controls at compile time from the Toolbox but sometimes I 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 textboxes, 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

class Dynamically_create_element

{

    htmlelent:HTMLElement;

    Create_Element(htmlelent)

    {

    var element = document.createElement("input");

    //Assign different attributes to the element.

    element.setAttribute("type", htmlelent);

    element.setAttribute("value",htmlelent);

    element.setAttribute("name", htmlelent);

    element.setAttribute("style","color:Red");

    document.body.appendChild(element);

    }

 

}

window.onload = () =>

{

var button = document.createElement('button');

button.innerText = "Add";

button.onclick = function ()

    {

   

    var doc =(<HTMLSelectElement>document.getElementById('Select1')).value;

    var create = new Dynamically_create_element();

    create.Create_Element(doc);

};

document.body.appendChild(button);

};

 

Demo.aspx

<%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="Demo.aspx.cs"

Inherits="Dynamically_create_element.WebForm1"%>

<!DOCTYPEhtml>

<htmlxmlns="http://www.w3.org/1999/xhtml">

<headrunat="server">

    <title></title>

</head>

<body>

    <formid="form1"runat="server">

    <div>

    <scriptsrc="app.js"></script>    

        <asp:LabelID="Label2"runat="server"Font-Bold="True"Font-Size="Large"ForeColor="#006600"

     Text="Dynamically add element in form"></asp:Label>

        <br/>

        <asp:LabelID="Label1"runat="server"Text="Select the element and hit Add to add it in form"

    Font-Italic="True"ForeColor="Blue"></asp:Label>

    </div>

    </form>

    <selectid="Select1">            

        <optionvalue="button">Button</option>

        <optionvalue="text">Textbox</option>

        <optionvalue="radio">Radio</option>

    </select>

    <p>

</body>

</html>

 

 

app.js

var Dynamically_create_element = (function () {

    function Dynamically_create_element() { }

    Dynamically_create_element.prototype.Create_Element = function (htmlelent) {

        var element = document.createElement("input");

        element.setAttribute("type", htmlelent);

        element.setAttribute("value", htmlelent);

        element.setAttribute("name", htmlelent);

        element.setAttribute("style","color:Red");

        document.body.appendChild(element);

    };

    return Dynamically_create_element;

})();

window.onload = function () {

    var button = document.createElement('button');

    button.innerText = "Add";

    button.onclick = function () {

        var doc = (document.getElementById('Select1')).value;

        var create = new Dynamically_create_element();

        create.Create_Element(doc);

    };

    document.body.appendChild(button);

};

//@ sourceMappingURL=app.js.map

 

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

 

Reference By

http://www.typescriptlang.org/

Login to add your contents and source code to this article
This Feature is Sponsored By DynamicPDF Merger is a developers dream for interacting with any existing PDF documents. Merge, append, split, form fill, flatten stamp and so much more.
post comment
     
COMMENT USING
PREMIUM SPONSORS
Over-C is a holistic consortium of communications and technology specialists. We build, deploy and market both business as well as consumer products and solutions.
Join a Chapter
TRENDING UP
MOST LIKED ARTICLE
HOT KEYWORDS
SPONSORED BY
  • PDF reports have never been easier to create. With our included WYSIWYG Designer, you can layout your reports, set up your data source and let DynamicPDF ReportWriter do the rest.
WHITEPAPERS AND BOOKS
Hosted By CBeyond Cloud Services MVPs MOST VIEWEDLEGENDSNOW PRIZESAWARDSREVIEWSSURVEYCERTIFICATIONSDOWNLOADS
PRIVACY POLICY | TERMS & CONDITIONS | SITEMAP | CONTACT US | ABOUT US | REPORT ABUSE
©2013 C# Corner. All contents are copyright of their authors.