Dynamically add and remove TextBoxes and DropDownList inside jQuery Dialog using jQuery Ajax in ASP.Net

Hi kavithav,

I have created a sample which full fill your requirement you need to modify the code according to your need and i have taken reference from below article

Dynamically add and remove TextBoxes using jQuery

and i have used jquery dialog in sample and more details on jquery dialog refer below link

jQuery Dialog

HTML

<input id="btnDisplay" type="button" value="Display" />
<div id="dialog" title="Add and Remove DropDown and TextBoxes">
    <input id="btnAdd" type="button" class="btn btn-primary" value="Add" />
    <br />
    <br />
    <div id="Container">
        <!--Textboxes will be added here -->
    </div>
    <br />
</div>
<div>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#dialog").dialog({
                autoOpen: false,
                height: 250,
                width: 500,
                buttons: {
                    "Save": function () {
                        var textBoxesValues = [];
                        var dropDownValues = [];
                        $('[name*=DynamicTextBox]').each(function () {
                            textBoxesValues.push($(this).val());
                        });
                        textBoxesValues.join(',');
                        $('[name*=DynamicDropDownList]').each(function () {
                            dropDownValues.push($(this).val());
                        });
                        dropDownValues.join(',');
                        $.ajax({
                            type: "POST",
                            url: "Default.aspx/GetValues",
                            data: "{textBoxesValues :'" + textBoxesValues + "',dropDownValues :'" + dropDownValues + "'}",
                            contentType: "application/json; charset=utf-8",
                            dataType: "json",
                            success: function (response) {
                                alert('TextBoxesValues :' + textBoxesValues + '\n DropDownListValues :' + dropDownValues);
                            },
                            failure: function (response) {
                                alert(response.responseText);
                            },
                            error: function (response) {
                                alert(response.responseText);
                            }
                        });
                    },
                    Cancel: function () {
                        $(this).dialog("close");
                    }
                }
            });
            $('[id*=btnDisplay]').click(function () {
                $("#dialog").dialog('open');
            });
            $("#btnAdd").bind("click", function () {
                var div = $("<div />");
                div.html(GetDynamicTextBox(""));
                $("#Container").append(div);
            });
            $("body").on("click", ".remove", function () {
                $(this).closest("div").remove();
            });
        });
        function GetDynamicTextBox(value) {
            return '<input class="form-control" name="DynamicTextBox" type="text" value = "' + value + '" />&nbsp;&nbsp;' +
        '<select class="form-control" name="DynamicDropDownList" ><option value="One">One</option><option value="Two">Two</option><option value="Three">Three</option><option value="Four">Four</option></select>'
        + '&nbsp;&nbsp;<input type="button" value="Remove" class="remove btn btn-danger" />'
        }      
    </script>
</div>

C#

[System.Web.Services.WebMethod]
public static string GetValues(string textBoxesValues, string dropDownValues)
{
    if (textBoxesValues.Split(',').Length > 1)
    {
        foreach (string textBoxValue in textBoxesValues.Split(','))
        {
            //here you will get each textbox value;
        }
    }
    else
    {
        //If you have created a single row and passed the values then you can get single value here.
        string textBoxValue = textBoxesValues;
    }
    if (dropDownValues.Split(',').Length > 1)
    {
        foreach (string dropDownValue in dropDownValues.Split(','))
        {
            //here you will get each dropdown value;
        }
    }
    else
    {
        //If you have created a single row and passed the values then you can get single value here.
        string dropDownValue = dropDownValues;
    }
    return "";
}

VB.Net

<System.Web.Services.WebMethod> _
Public Shared Function GetValues(textBoxesValues As String, dropDownValues As String) As String
	If textBoxesValues.Split(","C).Length > 1 Then
				'here you will get each textbox value;
		For Each textBoxValue As String In textBoxesValues.Split(","C)
		Next
	Else
		'If you have created a single row and passed the values then you can get single value here.
		Dim textBoxValue As String = textBoxesValues
	End If
	If dropDownValues.Split(","C).Length > 1 Then
				'here you will get each dropdown value;
		For Each dropDownValue As String In dropDownValues.Split(","C)
		Next
	Else
		'If you have created a single row and passed the values then you can get single value here.
		Dim dropDownValue As String = dropDownValues
	End If
	Return ""
End Function

ScreenShot