How to add controls dynamically in asp.net mvc using javascript

Video Tutorial:

Watch here 

Download Full Source Code:

Download here

Introduction:

 Here I will explain how to add controls dynamically in   Asp.net MVC using JavaScript and you can save that data in your database table.

Description:

In previous articles I will explain How to bind Country, State, City Dropdown list in mvc using ajax,

How to show database values using Dataset in table with Edit and delete operation using Asp.net MVC,  How to bind dropdown in mvc using ajax, How to login with Facebook in asp.net mvc, How to upload multiple image or files in asp.net mvc with Source Code. ,Retrieve data from database in asp.net web api,How to login with gmail in Asp.net MVC  with relevant example

So now we start.

Step1: In first step we write fallowing html in Index page

<form method="post">

            <div id="divCont">

                <div><input type="text" name="txttest" style="width:200px;" /><input type="button" onclick="AddTextBox()" value="Add" /></div>

            </div><br/>

            <input type="submit" value="submit" />

        </form>

Step2:  Write fallowing JavaScript code in Index page

<script type="text/javascript">

        function GetDynamicTextbox(value) {

            return '<div><input type="text" name="txttest" style="width:200px;" /><input type="button" onclick="RemoveTextBox(this)" value="Remove" /></div>';

        }

        function AddTextBox() {

            var div = document.createElement('DIV');

            div.innerHTML = GetDynamicTextbox("");

            document.getElementById("divCont").appendChild(div);

        }

        function RemoveTextBox(div) {

            document.getElementById("divCont").removeChild(div.parentNode.parentNode);

        }

    </script>

Step3:  Add fallowing code HomeController.cs file

[HttpPost]

public ActionResult Index(FormCollection fc)

   {

            string test = fc["txttest"];

            return View();

   }

Output:  Run project and get fallowing Output:

 

Thanks..