locked
Need help on this web forms to generate controls dynamically and add values to respective columns in sql database RRS feed

  • Question

  • User-1797368610 posted


    Hi,
    i got a requirement where i need to create a web form for end users so that they can enter values and save it to sql database. As you can see in the below link, form has textboxes, drop-downlist controls and want to allow users dynamically add rows
    to enter values for different users and save their values to database, similar for drop-downlist too so that they can add value to ddllist. if you see in the Team section, there we need to dynamically add new row for three fields(Name,Email, Phone Number)
    and save values to database as well. any help will be greatly appreciated.
    Thanks

    Please click here to see the form

    Monday, April 20, 2020 8:10 PM

Answers

All replies

  • User1535942433 posted

    Hi Rakib1,

    Accroding to your description,I suggest you could use javascript to add new row.

    I suggest you could post your codes to us.It will help us to solve your problems.

    Since you don't post your codes,I create a demo that adding row for html table.

    More details,you could refer to below codes:

    <script src="Scripts/jquery-3.4.1.min.js"></script>
        <script>
            $(function () {
                $("#Button1").on('click', function () {
                     event.preventDefault();
                    $("#example").append("<tbody><tr><td></td><td></td><td></td></tr></tbody>");
                })
            })
    
        </script>
        <style>
            #example tr td {
                border-color:black;
                border-width:medium;
                border-style:double;
                width:200px;
               height:50px;
            }
        </style> 
    
    <div>
                <asp:Button ID="Button1" runat="server" Text="AddRow" />
                <asp:Button ID="Button2" runat="server" Text="Save" />
                <table id="example">
                    <thead>
                        <tr>
                            <th>Name</th>
    <th>Email</th>
    <th>Phone Number</th> </tr> </thead> </table> </div>

    Result:

    Best regards,

    Yijing Sun

    Tuesday, April 21, 2020 2:46 AM
  • User-1797368610 posted

    Thanks Yij for your reply. Actually i have four different sections on the form that's why i though it would be better option to use Telerik Wizard control with steps. if you look at my code will see each steps has many fields which i need to allow users add textboxes and dropdownlist dynamically and save all the information to respective columns by clicking finish button at the final step. i was trying to make prototype as close to my screen shot Here. would you be able to modify my code to get UI as close to screenshot and save values from dynamically created textboxes and ddllist into database?

    <%@ Page Title="Project Summary" Language="C#" MasterPageFile="~/site.master" AutoEventWireup="true" CodeBehind="Summary.aspx.cs" Inherits="WebForm1.Summary" %>
    
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
        <link href="Content/styles.css" rel="stylesheet" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
        <script>
            $(function () {
                $("#Button1").on('click', function () {
                    event.preventDefault();
                    $("#example").append("<tbody><tr><td></td><td></td><td></td></tr></tbody>");
                })
            })
    
        </script>
        <style>
            #example tr td {
                border-color: black;
                border-width: medium;
                border-style: double;
                width: 200px;
                height: 50px;
            }
        </style>
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceholder1" runat="Server">
        <div class="demo-container">
            <telerik:RadWizard RenderMode="Lightweight" runat="server" ID="RadWizard1"
                RenderedSteps="Active" OnActiveStepChanged="RadWizard1_ActiveStepChanged" OnFinishButtonClick="RadWizard1_FinishButtonClick">
                <WizardSteps>
                    <telerik:RadWizardStep ID="RadWizardStep1" Title="Project Summary" StepType="Start">
                        <div>
                            <table border="1" style="width: 70%" align="center">
                                <tr>
                                    <td>
                                        <telerik:RadLabel runat="server" ID="RadLabel2" Text="Project Name" AssociatedControlID="RadTextBox1" />
                                    </td>
                                    <td style="text-align: left">
                                        <telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="RadTextBox1" Width="190px" />
                                    </td>
                                </tr>
                                <tr style="height: 40px">
                                    <td>
                                        <telerik:RadLabel runat="server" ID="RadLabel3" Text="Developers Name" AssociatedControlID="RadTextBox2" />
                                        <td style="text-align: left">
                                            <asp:Panel ID="pnlTextBoxes" runat="server" />
                                            <%--<asp:TextBox ID="Dev1Textbox" runat="server"></asp:TextBox>
                                            <asp:TextBox ID="Dev2Textbox" runat="server"></asp:TextBox>
                                            <asp:TextBox ID="Dev3Textbox" runat="server"></asp:TextBox>--%>
                                            <telerik:RadButton ID="btnAdd" runat="server" Text="Add New Rows" OnClick="AddTextBox"></telerik:RadButton>
                                            <%--<telerik:RadButton ID="btnSave" runat="server" Text="Save" OnClick="Save"></telerik:RadButton>--%>
                                        </td>
                                </tr>
                                <tr style="height: 40px">
                                    <td>
                                        <telerik:RadLabel runat="server" ID="RadLabel1" AssociatedControlID="RadDropDownList1" Text="HDC Programe" />
                                        <td style="text-align: left">
                                            <telerik:RadDropDownList RenderMode="Lightweight" ID="RadDropDownList1" runat="server" Width="190px"
                                                DefaultMessage="Select Program">
                                                <Items>
                                                    <telerik:DropDownListItem Text="ELLA" />
                                                    <telerik:DropDownListItem Text="Mixed Income: Mix & Match" />
                                                    <telerik:DropDownListItem Text="Mixed-Middle Income" />                                                
                                                </Items>
                                            </telerik:RadDropDownList>
                                        </td>
                                </tr>
                                <tr style="height: 40px">
                                    <td>
                                        <telerik:RadLabel runat="server" ID="RadLabel4" AssociatedControlID="RadDropDownList1" Text="New Construction/Rehab" />
                                        <td style="text-align: left">
                                            <telerik:RadDropDownList RenderMode="Lightweight" ID="RadDropDownList2" runat="server" Width="190px"
                                                DefaultMessage="Select Program">
                                                <Items>
                                                    <telerik:DropDownListItem Text="New Construction" />
                                                    <telerik:DropDownListItem Text="Moderate Rehab" />
                                                    <telerik:DropDownListItem Text="Substantial Rehab" />
                                                </Items>
                                            </telerik:RadDropDownList>
                                        </td>
                                </tr>
                                <tr>
                                    <td>
                                        <telerik:RadLabel runat="server" ID="RadLabel15" AssociatedControlID="RadNumericTextBox1" Text="Total Units"></telerik:RadLabel>
                                        <td style="text-align: left">
                                            <telerik:RadNumericTextBox RenderMode="Lightweight" runat="server" ID="RadNumericTextBox1" Width="190px"></telerik:RadNumericTextBox><br />
                                        </td>
                                </tr>
                                <tr>
                                    <td>
                                        <telerik:RadLabel runat="server" ID="RadLabel6" AssociatedControlID="RadNumericTextBox1" Text="# of Buildings"></telerik:RadLabel>
                                        <td style="text-align: left">
                                            <telerik:RadNumericTextBox RenderMode="Lightweight" runat="server" ID="RadNumericTextBox2" Width="190px"></telerik:RadNumericTextBox><br />
                                        </td>
                                </tr>
                                <tr>
                                    <td>
                                        <telerik:RadLabel runat="server" ID="RadLabel7" AssociatedControlID="RadNumericTextBox3" Text="Building Gross Square Footage"></telerik:RadLabel>
                                        <td style="text-align: left">
                                            <telerik:RadNumericTextBox RenderMode="Lightweight" runat="server" ID="RadNumericTextBox3" Width="190px"></telerik:RadNumericTextBox><br />
                                        </td>
                                </tr>
                                <tr>
                                    <td>
                                        <telerik:RadLabel runat="server" ID="RadLabel8" AssociatedControlID="RadNumericTextBox5" Text="Commercial Use and SF"></telerik:RadLabel>
                                    </td>
                                    <td>
                                        <div>
                                            <table border="1">
                                                <tr>
                                                    <td>
                                                        <telerik:RadRadioButton ID="RadRadioButton1" runat="server" Text="Yes" />
                                                        <telerik:RadRadioButton ID="RadRadioButton2" runat="server" Text="No" />
                                                    </td>
                                                    <td>
                                                        <telerik:RadNumericTextBox RenderMode="Lightweight" runat="server" ID="RadNumericTextBox4" Width="190px"></telerik:RadNumericTextBox><br />
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <telerik:RadLabel runat="server" ID="RadLabel5" AssociatedControlID="RadNumericTextBox5" Text="Community Facility Use and SF"></telerik:RadLabel>
                                    </td>
                                    <td>
                                        <div>
                                            <table border="1">
                                                <tr>
                                                    <td>
                                                        <telerik:RadRadioButton ID="RadRadioButton3" runat="server" Text="Yes" />
                                                        <telerik:RadRadioButton ID="RadRadioButton4" runat="server" Text="No" />
                                                    </td>
                                                    <td>
                                                        <telerik:RadNumericTextBox RenderMode="Lightweight" runat="server" ID="RadNumericTextBox7" Width="190px"></telerik:RadNumericTextBox><br />
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <telerik:RadLabel runat="server" ID="RadLabel9" Text="Parking" AssociatedControlID="RadTextBox2" />
                                    </td>
                                    <td style="text-align: left">
                                        <telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="RadTextBox2" Width="190px" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <telerik:RadLabel runat="server" ID="RadLabel10" AssociatedControlID="RadNumericTextBox5" Text="Tax Abatement / Exemption"></telerik:RadLabel>
                                    </td>
                                    <td>
                                        <div>
                                            <table border="1">
                                                <tr>
                                                    <td>
                                                        <%-- <asp:RadioButtonList ID="SecondQuestion" runat="server"
                                                            RepeatDirection="Horizontal">
                                                            <asp:ListItem Text="Yes" Value="1"></asp:ListItem>
                                                            <asp:ListItem Text="No" Value="0"></asp:ListItem>
                                                        </asp:RadioButtonList>--%>
                                                        <telerik:RadRadioButtonList ID="RadRadioButtonList1" runat="server" AutoPostBack="false" Direction="Horizontal">
                                                            <Items>
                                                                <telerik:ButtonListItem Text="Yes" Value="1" />
                                                                <telerik:ButtonListItem Text="No" Value="0" />
                                                            </Items>
                                                        </telerik:RadRadioButtonList>
                                                    </td>
                                                    <td>
                                                        <telerik:RadNumericTextBox RenderMode="Lightweight" runat="server" ID="RadNumericTextBox5" Width="190px"></telerik:RadNumericTextBox><br />
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td width="30%">
                                        <telerik:RadLabel runat="server" ID="RadLabel11" AssociatedControlID="RadDropDownList3" Text="Green Efficiencies" />
                                        <td style="text-align: left; height: 40px">
                                            <telerik:RadDropDownList RenderMode="Lightweight" ID="RadDropDownList3" runat="server" Width="190px"
                                                DefaultMessage="Select Program">
                                                <Items>
                                                    <telerik:DropDownListItem Text="Enterprise Green Communities" />
                                                    <telerik:DropDownListItem Text="LEED Basic" />                                                
                                                    <telerik:DropDownListItem Text="N/A" />
                                                    <telerik:DropDownListItem Text="Other" />
                                                </Items>
                                            </telerik:RadDropDownList>
                                        </td>
                                </tr>
                            </table>
                        </div>
                    </telerik:RadWizardStep>
                    <telerik:RadWizardStep ID="RadWizardStep2" Title="Location Information">
                    </telerik:RadWizardStep>
                    <telerik:RadWizardStep ID="RadWizardStep3" Title="Development Team">
                        <div>
                            <table border="1" style="width: 70%" align="center">
                                <tr>
                                    <td>
                                        <telerik:RadLabel runat="server" ID="RadLabel12" Text="Developer Contact" AssociatedControlID="RadTextBox1" />
                                    </td>
                                    <td>
                                        <div>
                                            <asp:Button ID="Button1" runat="server" Text="Add New Row" />
                                            <%--<asp:Button ID="Button2" runat="server" Text="Save" />--%>
                                            <table id="example">
                                                <thead>
                                                    <tr>
                                                        <th>Name</th>
                                                        <th>Email</th>
                                                        <th>Phone Number</th>
                                                    </tr>
                                                </thead>
                                            </table>
    
                                        </div>
                                    </td>
                                </tr>
                                <tr style="height: 40px">
                                    <td>
                                        <telerik:RadLabel runat="server" ID="RadLabel13" Text="Development Consultant" AssociatedControlID="RadTextBox2" />
                                        <td style="text-align: left">
                                            <asp:Panel ID="Panel1" runat="server" />
                                            <%--<asp:TextBox ID="Dev1Textbox" runat="server"></asp:TextBox>
                                            <asp:TextBox ID="Dev2Textbox" runat="server"></asp:TextBox>
                                            <asp:TextBox ID="Dev3Textbox" runat="server"></asp:TextBox>--%>
                                            <telerik:RadButton ID="RadButton1" runat="server" Text="Add New Rows" OnClick="AddTextBox"></telerik:RadButton>
                                            <%--<telerik:RadButton ID="btnSave" runat="server" Text="Save" OnClick="Save"></telerik:RadButton>--%>
                                        </td>
                                </tr>
                                <tr style="height: 40px">
                                    <td>
                                        <telerik:RadLabel runat="server" ID="RadLabel14" AssociatedControlID="RadDropDownList1" Text="Borrower’s Counsel" />
                                        <td style="text-align: left">
                                            <telerik:RadDropDownList RenderMode="Lightweight" ID="RadDropDownList4" runat="server" Width="190px"
                                                DefaultMessage="Select Program">
                                                <Items>
                                                    <telerik:DropDownListItem Text="ELLA" />
                                                    <telerik:DropDownListItem Text="Mixed Income: Mix & Match" />                                                
                                                    <telerik:DropDownListItem Text="Repair Loan" />
                                                </Items>
                                            </telerik:RadDropDownList>
                                        </td>
                                </tr>
                                <tr style="height: 40px">
                                    <td>
                                        <telerik:RadLabel runat="server" ID="RadLabel16" AssociatedControlID="RadDropDownList1" Text="New Construction/Rehab" />
                                        <td style="text-align: left">
                                            <telerik:RadDropDownList RenderMode="Lightweight" ID="RadDropDownList5" runat="server" Width="190px"
                                                DefaultMessage="Select Program">
                                                <Items>
                                                    <telerik:DropDownListItem Text="New Construction" />
                                                    <telerik:DropDownListItem Text="Moderate Rehab" />
                                                    <telerik:DropDownListItem Text="Substantial Rehab" />
                                                </Items>
                                            </telerik:RadDropDownList>
                                        </td>
                                </tr>
                            </table>
                        </div>
                    </telerik:RadWizardStep>
                    <telerik:RadWizardStep ID="RadWizardStep5" Title="Financial & Construction Info" StepType="Finish">
                    </telerik:RadWizardStep>
                </WizardSteps>
            </telerik:RadWizard>
    
        </div>
    </asp:Content>
    using System;
    using System.Collections.Generic;
    using System.Configuration;
    using System.Data.SqlClient;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Telerik.Web.UI;
    
    namespace WebForm1
    {
        public partial class Summary : System.Web.UI.Page
        {        
            protected void RadWizard1_ActiveStepChanged(object sender, EventArgs e)
            {
    
            }
            protected void Page_Load(object sender, EventArgs e)
            {
                List<string> keys = Request.Form.AllKeys.Where(key => key.Contains("txtDynamic")).ToList();
                int i = 1;
                foreach (string key in keys)
                {
                    this.CreateLabel("lblDynamic" + i);
                    this.CreateTextBox("txtDynamic" + i);
                    i++;
                }
            }
            protected void AddTextBox(object sender, EventArgs e)
            {
                int index2 = pnlTextBoxes.Controls.OfType<TextBox>().ToList().Count + 1;
                this.CreateLabel("lblDynamic" + index2);
                this.CreateTextBox("txtDynamic" + index2);
            }
            private void CreateTextBox(string id)
            {
                TextBox txt = new TextBox();
                txt.ID = id;
                pnlTextBoxes.Controls.Add(txt);
    
                Literal lt = new Literal();
                lt.Text = "<br />";
                pnlTextBoxes.Controls.Add(lt);
            }
            private void CreateLabel(string id)
            {
                Label lbl = new Label();
                lbl.ID = id;
                lbl.Text = "Developer" + id.Substring(10);
                pnlTextBoxes.Controls.Add(lbl);
    
                Literal lt = new Literal();
                lt.Text = "    ";
                pnlTextBoxes.Controls.Add(lt);
            }
            protected void Save(object sender, EventArgs e)
            {
                foreach (TextBox textBox in pnlTextBoxes.Controls.OfType<TextBox>())
                {
                    SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["TelerikConnectionString"].ConnectionString);
                    conn.Open();
                    string insertQuery = "insert into Developer(ProjectName,Developer1)values (@projectname,@developer1)";
                    SqlCommand cmd = new SqlCommand(insertQuery, conn);
                    cmd.Parameters.AddWithValue("@projectname", RadTextBox1.Text);
                    cmd.Parameters.AddWithValue("@developer1", textBox.Text);
                    cmd.ExecuteNonQuery();
                    cmd.Parameters.Clear();
    
                    Response.Write("Developer Form has submitted successfully!!!thank you");
                    conn.Close();
                    //foreach (TextBox textBox in pnlTextBoxes.Controls.OfType<TextBox>())
                    //{
                    //    string constr = ConfigurationManager.ConnectionStrings["TelerikConnectionString"].ConnectionString;
                    //    using (SqlConnection con = new SqlConnection(constr))
                    //    {
                    //        using (SqlCommand cmd = new SqlCommand("INSERT INTO Developer(ProjectName) VALUES(@projectname)"))
                    //        {
                    //            cmd.Connection = con;
                    //            cmd.Parameters.AddWithValue("@projectname", textBox.Text);
                    //            con.Open();
                    //            cmd.ExecuteNonQuery();
                    //            con.Close();
                    //        }
                    //    }
                    }
                }
    
            protected void RadWizard1_FinishButtonClick(object sender, WizardEventArgs e)
            {
                if (e.NextStepIndex == 3)
                {
                    uploadfiles();
                }
            }
            protected void uploadfiles()
            {
                try
                {
                    foreach (TextBox textBox in pnlTextBoxes.Controls.OfType<TextBox>())
                    {
                        SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["TelerikConnectionString"].ConnectionString);
                        conn.Open();
                        string insertQuery = "insert into Developer(ProjectName,Developer1,Developer2,Developer3)values (@projectname,@developer1,@developer2,@developer3)";
                        SqlCommand cmd = new SqlCommand(insertQuery, conn);
                        //cmd.Parameters.AddWithValue("@projectname", RadTextBox1.Text);
                        cmd.Parameters.AddWithValue("@developer1", textBox.Text);
                        cmd.Parameters.Clear();
                        cmd.Parameters.AddWithValue("@developer2", textBox.Text);
                        cmd.Parameters.Clear();
                        cmd.Parameters.AddWithValue("@developer3", textBox.Text);
                        cmd.ExecuteNonQuery();
                        cmd.Parameters.Clear();
    
                        Response.Write("Developer Form has submitted successfully!!!thank you");
                        conn.Close();
                    }
                }
                catch (Exception ex)
                {
                    Response.Write("Error" + ex.Message);
                }
    
            }
    
        }
    }
    


    Tuesday, April 21, 2020 5:05 PM
  • User1535942433 posted

    Hi Rakib1,

    Accroding to your description and codes,as far as I think,Telerik isn't free.I suggest you could ask Telerik Professionals.

    Best regards,

    Yijing Sun

    Wednesday, April 22, 2020 6:47 AM
  • User-1797368610 posted

    Hi Yijing,

    Thanks for reply again. i am just looking for the functionality like how can i add textboxes rows and drop-downlist dynamically and save values to sql database. l think Telerik wizard control works same as asp.net wizard control. how can i achieve my requirement with Asp.net wizard control?

    Wednesday, April 22, 2020 1:35 PM
  • User1535942433 posted

    Hi Rakib1,

    Accroding to your description and codes,I suggest  you could add textbox using javascript and get textbox value to save database using ajax.

    Besides,could you post the result you want again?I cann't your picture.You could browser here,then copy the link and paste in this thread.

    More details,you could refer to below codes:

     <script src="Scripts/jquery-3.4.1.min.js"></script>
        <script>
            $(function () {
                $("[id*=Button1]").on('click', function () {
                    event.preventDefault();
                    $("#example").append('<tr><td><input type="text" id="txtName" value="" /></td><td><input type="text" id="txtEmail" value="" /></td><td><input type="text" id="txtPhone" value=""/></td></tr>');
    
                    var lastRowIndex = $("#example tr").length - 2;
                    $("#example tr").last().find("input[type=text]").each(function () {
                        $(this).attr('id', $(this).attr('id') + '_' + lastRowIndex);
                    })
                })
    
                
            })
        </script>

    Best regards,

    Yijing Sun

    Thursday, April 23, 2020 8:46 AM
  • User-1797368610 posted

    Hey,

    Thanks again. Please Click here to see the result i want.  There will be Submit button at the bottom to save into database.

    Thursday, April 23, 2020 10:43 PM
  • User1535942433 posted

    Hi Rakib1,

    Accroding to your description,I'm guessing that you want to dynamically add table row in every step and save data after finishing.As far as I think,you could add tablerow in code-behind and viewstate the current table.Then you could save data to database.

    More details,you could refer to below article:

    https://stackoverflow.com/questions/28007863/addrow-from-codebehind-in-asp-net-table-does-not-add-a-row-properly

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, April 24, 2020 8:29 AM