Dynamically add and remove UserControl using C# in ASP.Net

roon3y

SOLVED CLOSED ACTIVE ANSWERED
User: roon3y
Posted: on Nov 12, 2017 10:53 PM
Forum: User Controls
Answer: 1
Views: 6872

Im in a little dillimah. I have group on textboxes, that i'd like to be able to add/remove on the fly.

Here is html:

        <table  class="table" style="width:50%;">
            <tr>
                <td>
                    <asp:Button ID="btnAddOperators" runat="server" Text="ADD OP" type="button" class="btn btn-info btn-sm" OnClick="btnAddOperators_Click" />
                    <asp:Button ID="btnRemoveOperators" runat="server" Text="REMOVE OP" type="button" class="btn btn-info btn-sm" visible="false" />
                </td>
                <td>
                    <asp:Button ID="btnAddRiggers" runat="server" Text="ADD RIGGERS" type="button" class="btn btn-info btn-sm" OnClick="btnAddRiggers_Click" />
                    <asp:Button ID="btnRemoveRiggers" runat="server" Text="REMOVE RIGGERS" type="button" class="btn btn-info btn-sm" visible="false" />
                </td>
                <td>
                    <asp:Button ID="btnAddDrivers" runat="server" Text="ADD DRIVERS" type="button" class="btn btn-info btn-sm" OnClick="btnAddDrivers_Click" />
                    <asp:Button ID="btnRemoveDrivers" runat="server" Text="REMOVE DRIVERS" type="button" class="btn btn-info btn-sm" visible="false" />
                </td>
            </tr>
        </table>

        <div id="addOperators" class="form-group" runat="server" visible="false">
            <table  class="table">
                <tr>
                    <td><asp:TextBox ID="txtOperatorName1" runat="server" CssClass="form-control" placeholder="Operator Name" Width="90px"></asp:TextBox></td>
                    <td><asp:TextBox ID="txtOperatorEmpNo1" runat="server" CssClass="form-control" placeholder="Operator Emp No" Width="90px"></asp:TextBox></td>
                    <td><asp:TextBox ID="txtST1" runat="server" CssClass="form-control" placeholder="Operator ST" Width="90px"></asp:TextBox></td>
                    <td><asp:TextBox ID="txtOT1" runat="server" CssClass="form-control" placeholder="Operator OT" Width="90px"></asp:TextBox></td>
                </tr>
                <tr>
                    <td><asp:TextBox ID="txtShift1" runat="server" CssClass="form-control" placeholder="Shift" Width="90px"></asp:TextBox></td>
                    <td><asp:TextBox ID="txtTravelTime1" runat="server" CssClass="form-control" placeholder="Travel Time" Width="90px"></asp:TextBox></td>
                    <td><asp:TextBox ID="txtTravelRate1" runat="server" CssClass="form-control" placeholder="Travel Rate" Width="90px"></asp:TextBox></td>
                    <td><asp:TextBox ID="txtPerDiem1" runat="server" CssClass="form-control" placeholder="Per Diem" Width="90px"></asp:TextBox></td>
                </tr>
            </table>
        </div>

        <div id="addRiggers" class="form-group" runat="server" visible="false">
            <table  class="table">
                <tr>
                    <td><asp:TextBox ID="txtRiggerName1" runat="server" CssClass="form-control" placeholder="Rigger Name" Width="90px"></asp:TextBox></td>
                    <td><asp:TextBox ID="txtRiggerEmpNo1" runat="server" CssClass="form-control" placeholder="Rigger Emp No" Width="90px"></asp:TextBox></td>
                    <td><asp:TextBox ID="txtRiggerST1" runat="server" CssClass="form-control" placeholder="Rigger ST" Width="90px"></asp:TextBox></td>
                    <td><asp:TextBox ID="txtRiggerOT1" runat="server" CssClass="form-control" placeholder="Rigger OT" Width="90px"></asp:TextBox></td>
                </tr>
                <tr>
                    <td><asp:TextBox ID="txtRiggerShift1" runat="server" CssClass="form-control" placeholder="Shift" Width="90px"></asp:TextBox></td>
                    <td><asp:TextBox ID="txtRiggerTravelTime1" runat="server" CssClass="form-control" placeholder="Travel Time" Width="90px"></asp:TextBox></td>
                    <td><asp:TextBox ID="txtRiggerTravelRate1" runat="server" CssClass="form-control" placeholder="Travel Rate" Width="90px"></asp:TextBox></td>
                    <td><asp:TextBox ID="txtRiggerPerDiem1" runat="server" CssClass="form-control" placeholder="Per Diem" Width="90px"></asp:TextBox></td>
                </tr>
            </table>
        </div>

        <div id="addDrivers" class="form-group" runat="server" visible="false">
            <table  class="table">
                <tr>
                    <td><asp:TextBox ID="txtDriverName1" runat="server" CssClass="form-control" placeholder="Driver Name" Width="90px"></asp:TextBox></td>
                    <td><asp:TextBox ID="txtDriverEmpNo1" runat="server" CssClass="form-control" placeholder="Driver Emp No" Width="90px"></asp:TextBox></td>
                    <td><asp:TextBox ID="txtDriverST1" runat="server" CssClass="form-control" placeholder="Driver ST" Width="90px"></asp:TextBox></td>
                    <td><asp:TextBox ID="txtDriverOT1" runat="server" CssClass="form-control" placeholder="Driver OT" Width="90px"></asp:TextBox></td>
                </tr>
                <tr>
                    <td><asp:TextBox ID="txtDriverShift1" runat="server" CssClass="form-control" placeholder="Shift" Width="90px"></asp:TextBox></td>
                    <td><asp:TextBox ID="txtDriverTravelTime1" runat="server" CssClass="form-control" placeholder="Travel Time" Width="90px"></asp:TextBox></td>
                    <td><asp:TextBox ID="txtDriverTravelRate1" runat="server" CssClass="form-control" placeholder="Travel Rate" Width="90px"></asp:TextBox></td>
                    <td><asp:TextBox ID="txtDriverPerDiem1" runat="server" CssClass="form-control" placeholder="Per Diem" Width="90px"></asp:TextBox></td>
                </tr>
            </table>
        </div>

how can i get them to add multiple group of operators/riggers/drivers and remove if needed. And at the same time insert them to sql?

Please help.

Mudassar

0 8

Reply
ANSWER
User: Mudassar
Replied: on Nov 14, 2017 12:30 PM
Report

Here is a very Simple sample in which I have created a Page and UserControl.

UserControl contains the TextBoxes and the dynamically added UserControls are maintained using Session.

Page

HTML

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Src = "~/UC_TextBoxes.ascx" TagName = "TextBoxes" TagPrefix = "uc" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:Button Text="AddDigger" runat="server" OnClick = "AddDigger" />
    <asp:Button Text="RemoveDigger" runat="server" OnClick = "RemoveDigger" />
    <hr />
    <asp:Panel ID = "Panel1" runat="server">
    </asp:Panel>
    </form>
</body>
</html>

Code

protected void Page_Load(object sender, EventArgs e)
{
    if (this.IsPostBack)
    {
        List<UC_TextBoxes> textBoxes = GetSessionControls();
        foreach (UC_TextBoxes textBox in textBoxes)
        {
            Panel1.Controls.Add(textBox);
        }
    }
}

protected void AddDigger(object sender, EventArgs e)
{
    UC_TextBoxes ucDigger = (UC_TextBoxes)LoadControl("~/UC_TextBoxes.ascx"); ;
    ucDigger.ID = Guid.NewGuid().ToString();
    List<UC_TextBoxes> textBoxes = GetSessionControls();
    textBoxes.Add(ucDigger);
    Panel1.Controls.Add(ucDigger);
    textBoxes.Add(ucDigger);
    Session["UserControls"] = textBoxes;
}

private List<UC_TextBoxes> GetSessionControls()
{
    List<UC_TextBoxes> textBoxes;
    if (Session["UserControls"] == null)
    {
        textBoxes = new List<UC_TextBoxes>();
    }
    else
    {
        textBoxes = (List<UC_TextBoxes>)Session["UserControls"];
    }

    return textBoxes;
}

UserControl

HTML

<div id="addOperators" class="form-group" runat="server">
    <table  class="table">
        <tr>
            <td><asp:TextBox ID="txtName1" runat="server" CssClass="form-control" placeholder="Operator Name" Width="90px"></asp:TextBox></td>
            <td><asp:TextBox ID="txtEmpNo1" runat="server" CssClass="form-control" placeholder="Operator Emp No" Width="90px"></asp:TextBox></td>
            <td><asp:TextBox ID="txtST1" runat="server" CssClass="form-control" placeholder="Operator ST" Width="90px"></asp:TextBox></td>
            <td><asp:TextBox ID="txtOT1" runat="server" CssClass="form-control" placeholder="Operator OT" Width="90px"></asp:TextBox></td>
        </tr>
        <tr>
            <td><asp:TextBox ID="txtShift1" runat="server" CssClass="form-control" placeholder="Shift" Width="90px"></asp:TextBox></td>
            <td><asp:TextBox ID="txtTravelTime1" runat="server" CssClass="form-control" placeholder="Travel Time" Width="90px"></asp:TextBox></td>
            <td><asp:TextBox ID="txtTravelRate1" runat="server" CssClass="form-control" placeholder="Travel Rate" Width="90px"></asp:TextBox></td>
            <td><asp:TextBox ID="txtPerDiem1" runat="server" CssClass="form-control" placeholder="Per Diem" Width="90px"></asp:TextBox></td>
        </tr>
    </table>
</div>

Dynamically add and remove UserControl using C# in ASP.Net

Company

Explore

Follow us

Contact Us