How To Create Dynamic Controls In Asp Net Mvc

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.

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 />

< div id ="TextBoxContainer">

</ 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