Save (InsertUpdate) values Dynamic DropDownList created using jQuery to database in ASP.Net

Last Reply on May 30, 2016 03:17 AM By Shashikant

Posted on May 30, 2016 01:57 AM

this is Html Code

 

 

 

<div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btnAdd").bind("click", function () {
                AddControl();
            });
 
            $("#btnGet").bind("click", function () {
                var values = "";
                $("input[name=DynamicTextBox]").each(function () {
                    values += $(this).val() + "\n";
                });
                alert(values);
            });
 
            $("body").on("click", ".remove", function () {
                $(this).closest("div").remove();
                var i = 1;
                var Ids = [];
                $('[id*=ddl]').each(function () {
                    $(this).attr("id", "ddl" + i);
                    Ids.push(i);
                    i++;
                });
                $('[id*=hfDDLId]').val(parseInt($('[id*=hfDDLId]').val()) - 1);
                var resultIds = Ids.join(',');
                $('[id*=hfDropDownIds]').val(resultIds);
            });
        });
 
        function AddControl() {
            var Id = parseInt($('[id*=hfDDLId]').val()) + 1;
            var ddlId = "ddl" + (Id);
            var div = $("<div />");
            div.html(getDropDownList(ddlId, ddlId));
            div.append(GetDynamicTextBox(''));
            $("#TextBoxContainer").append(div);
            $('[id*=hfDDLId]').val(Id);
 
            var previousDropDownId = $('[id*=hfDropDownIds]').val();
            if (previousDropDownId != '') {
                $('[id*=hfDropDownIds]').val(previousDropDownId + ',' + Id);
            } else {
                $('[id*=hfDropDownIds]').val(Id);
            }
            return false;
        }
 
        function getDropDownList(name, id) {
            var combo = $("<select></select>").attr("id", id).attr("name", name).attr("runat", "server").attr("class", "class").attr("required", "required");
            combo.append("<option value=" + "" + ">" + "Select Category" + "</option>");
            combo.append("<option value=" + "1" + ">" + "1" + "</option>");
            combo.append("<option value=" + "2" + ">" + "2" + "</option>");
            combo.append("<option value=" + "3" + ">" + "3" + "</option>");
            return combo;
        }
        function GetDynamicTextBox(value) {
            return '<input name = "DynamicTextBox" type="text" value = "' + value + '" required/>&nbsp'
    + '<input name = "DynamicTextBox" type="text" value="' + value + '" required/>&nbsp'
    + '<input type="button" value="Remove" class="remove" />'
        }
    </script>
    <input id="btnAdd" type="button" value="Add" />
    <br />
    <br />
    <div id="TextBoxContainer">
        <!--Textboxes will be added here -->
    </div>
    <br />
    <input type="hidden" id="hfSelectedValue" runat="server" />
    <input type="hidden" id="hfDropDownIds" value="" runat="server" />
    <input id="btnGet" type="button" value="Get Values" />
    <input type="hidden" id="hfDDLId" value="0" />
    <asp:Button Text="Save" runat="server" OnClick="Save" />
</div>

And Also Code Behind Code in c#

rotected string Values;
protected void Save(object sender, EventArgs e)
{
    string[] textboxValues = Request.Form.GetValues("DynamicTextBox");
    JavaScriptSerializer serializer = new JavaScriptSerializer();
    this.Values = serializer.Serialize(textboxValues);
    int dropdownCount = hfDropDownIds.Value.Split(',').Length;
    int count = 1;
    for (int i = 0; i < dropdownCount; i++)
    {
        Data data = new Data
        {
            DropDownListValue = hfDropDownIds.Value.Split(',')[i],
            textBox1Value = textboxValues[count - 1],
            textBox2Value = textboxValues[count]
        };
        count = count + 2;
        SaveData(data);
 
    }
}
 
private void SaveData(Data data)
{
    string dropdownValue = data.DropDownListValue;
    string textBox1 = data.textBox1Value;
    string textBox2 = data.textBox2Value;
    // Write code to save Data.
}

Data Class
1
2
3
4
5
6
	
public class Data
{
    public string DropDownListValue { get; set; }
    public string textBox1Value { get; set; }
    public string textBox2Value { get; set; }
}

 

 

 

i Want to Show All Dynamic Data Which is Inserted in Database .Display in Html Format With Selected Dropdownlist value and textbox Value in Update Mode

You are viewing reply posted by: Shashikant on May 30, 2016 03:17 AM.
Posted on May 30, 2016 03:17 AM

Hi,

You can make chages as per your requirement