In this article I will explain with an example, how to implement dynamic TextBox controls with Add Remove Button in ASP.Net MVC Razor.
The dynamic TextBox controls with Add Remove Button functionality will be created on Client Side using jQuery in ASP.Net MVC Razor.
 
 
Namespaces
You will need to import the following namespace.
using System.Web.Script.Serialization;
 
 
Controller
The Controller consists of two Action methods.
Action method for handling GET operation
Inside this Action method, simply the View is returned.
 
Action method for handling POST operation
This Action method gets called when the Form is submitted due to the click of the Submit button. The values of the dynamic TextBoxes are received through the DynamicTextBox string array.
Note: The values are received as array because all the dynamic TextBoxes are set with same Name attribute.
 
The values of received string array is serialized into a JSON string using JavaScriptSerializer and then the JSON string is assigned to a ViewBag object named Values for recreation of dynamic TextBoxes after Form submission is completed.
Then a loop is executed and all the values of the Dynamic TextBoxes are extracted and assigned to ViewBag object named Message in order to display the values of the dynamic TextBoxes after Form Submission is completed.
public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }
 
    // POST: Home
    [HttpPost]
    public ActionResult Index(string[] DynamicTextBox)
    {
        JavaScriptSerializer serializer = new JavaScriptSerializer();
        ViewBag.Values = serializer.Serialize(DynamicTextBox);
 
        string message = "";
        foreach (string textboxValue in DynamicTextBox)
        {
            message += textboxValue + "\\n";
        }
        ViewBag.Message = message;
 
        return View();
    }
}
 
 
View
The following View consists of an HTML Form which posts to the Index action method discussed earlier. The Form consists of the following elements:-
1. Add Button – This Button makes call to the AddTextBox JavaScript function which dynamically creates an HTML DIV with a TextBox and a Button for removing the TextBox and appends it to the TextBoxContainer HTML DIV.
2. TextBoxContainer – This HTML DIV is used for holding the Dynamic TextBoxes.
3. Submit Button – This Button is used for submitting the HTML Form.
 
Adding Dynamic TextBoxes
When the Add button is clicked, the GetDynamicTextBox JavaScript function is called which returns an HTML DIV consisting of a TextBox and a Remove Button.
 
Removing Dynamic TextBoxes
When the Remove Button is clicked, the respective parent HTML DIV element is removed from the TextBoxContainer HTML DIV.
 
Recreating dynamic TextBoxes after Form Submission
When the page reloads after Form Submission, the values of the dynamic TextBoxes are fetched from the Values ViewBag object and a using loop one by one a dynamic TextBox is created and added to the TextBoxContainer HTML DIV.
 
Displaying the values of dynamic TextBoxes after Form Submission
The Message ViewBag object consists of the concatenated string message sent from the Controller. The value of the Message ViewBag object is then using JavaScript Alert Message Box.
Note: For more details on displaying JavaScript Alert Message Box in ASP.Net MVC, please refer my article ASP.Net MVC: Display Message from Controller in View using JavaScript Alert MessageBox.
 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
</head>
<body>
    @using (Html.BeginForm("Index", "Home", FormMethod.Post))
    {
        <input id="btnAdd" type="button" value="Add" onclick="AddTextBox()"/>
        <br/>
        <br/>
        <div id="TextBoxContainer">
            <!--Textboxes will be added here -->
        </div>
        <br/>
        <input type="submit" value="Submit"/>
    }
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        function GetDynamicTextBox(value) {
            var div = $("<div />");
 
            var textBox = $("<input />").attr("type", "textbox").attr("name", "DynamicTextBox");
            textBox.val(value);
            div.append(textBox);
 
            var button = $("<input />").attr("type", "button").attr("value", "Remove");
            button.attr("onclick", "RemoveTextBox(this)");
            div.append(button);
 
            return div;
        }
        function AddTextBox() {
            var div = GetDynamicTextBox("");
            $("#TextBoxContainer").append(div);
        }
 
        function RemoveTextBox(button) {
            $(button).parent().remove();
        }
 
        $(function () {
            var values = eval('@Html.Raw(ViewBag.Values)');
            if (values != null) {
                $("#TextBoxContainer").html("");
                $(values).each(function () {
                    $("#TextBoxContainer").append(GetDynamicTextBox(this));
                });
            }
        });
    </script>
    @if (ViewBag.Message != null)
    {
        <script type="text/javascript">
            $(function () {
                alert("@ViewBag.Message")
            });
        </script>
    }
</body>
</html>
 
 
Screenshot
Implement Dynamic TextBox controls with Add Remove Button in ASP.Net MVC
 
 
Downloads
Download Code