Generate 4 textboxes in a row

I need a C# asp code that would add 4 textboxes next to each other in a row when the "Create Additional Space" button is clicked. Then if the user clicks it again, it would add another row of 4 textboxes below the previous one....
pauledwardianAsked:
Who is Participating?
 
käµfm³d 👽Commented:
Also, I need to include this into a table format since users will put the information in and print it so there will be some borders
If that's the case, then I would say to just use an actual Table control as opposed to the Placeholder (in the markup) that I used. Instead of working with a literal <div>, you can simply add a new row to the table.

e.g. (Adding in YZlat's suggestion):

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="WebApplication6._Default" %>

<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
    <asp:Table ID="container" runat="server"></asp:Table>
    <asp:Button ID="btnMoreSpace" runat="server" Text="Create Additional Space"
        OnClick="btnMoreSpace_Click" />
</asp:Content>

Open in new window


using System;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication6
{
    public partial class _Default : Page
    {
        protected override void OnInit(EventArgs e)
        {
            if (Session["clickCount"] == null)
            {
                Session["clickCount"] = 1;
            }

            if (IsPostBack)
            {
                for (int j = 0; j < (int)Session["clickCount"]; j++)
                {
                    TableRow row = new TableRow();
                    TextBox box = null;

                    for (int i = 0; i < 4; i++)
                    {
                        TableCell cell = new TableCell();

                        box = new TextBox();
                        cell.Controls.Add(box);
                        row.Cells.Add(cell);
                    }

                    box.Height = 50;

                    this.container.Rows.Add(row);
                }
            }

            base.OnInit(e);
        }

        protected void btnMoreSpace_Click(object sender, EventArgs e)
        {
            Session["clickCount"] = ((int)Session["clickCount"]) + 1;
        }
    }
}

Open in new window

0
 
käµfm³d 👽Commented:
It would be super easy to generate the row by simply wrapping the 4 TBs with a <div>. You haven't really specified your architecture, so I'm going to assume you are using WebForms. Something like this should do the trick:

Default.aspx
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="_27864391._Default" %>

<asp:Content runat="server" ID="FeaturedContent" ContentPlaceHolderID="FeaturedContent">
</asp:Content>

<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
    <asp:PlaceHolder ID="container" runat="server"></asp:PlaceHolder>
    <asp:Button ID="btnMoreSpace" runat="server" Text="Create Additional Space" 
        OnClick="btnMoreSpace_Click" />
</asp:Content>

Open in new window


Default.aspx.cs
using System;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;

namespace _27864391
{
    public partial class _Default : Page
    {
        protected override void OnInit(EventArgs e)
        {
            if (Session["clickCount"] == null)
            {
                Session["clickCount"] = 1;
            }

            if (IsPostBack)
            {
                for (int i = 0; i < (int)Session["clickCount"]; i++)
                {
                    HtmlGenericControl div = new HtmlGenericControl("div");

                    div.Controls.Add(new TextBox());
                    div.Controls.Add(new TextBox());
                    div.Controls.Add(new TextBox());
                    div.Controls.Add(new TextBox());

                    this.container.Controls.Add(div);
                }
            }

            base.OnInit(e);
        }

        protected void btnMoreSpace_Click(object sender, EventArgs e)
        {
            Session["clickCount"] = ((int)Session["clickCount"]) + 1;
        }
    }
}

Open in new window


Yields:

Screenshots
0
 
käµfm³d 👽Commented:
P.S.

Note that the for loop is required in order to preserve the previously added dynamic TBs.

Dynamic controls must be added prior to the ViewState being loaded if you want them to preserve any values that were contained within them. This is why I put the creation and addition of the TBs in the overridden OnInit method. This is also why I kept track of the number of times the button was clicked within the Session object.
0
Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

 
pauledwardianAuthor Commented:
Thank you! how can I change the 4th textbox property to multi line ? And how can I make the textboxes bigger? Also, I need to include this into a table format since users will put the information in and print it so there will be some borders, etc. FYI: nothing is comming from the database. Its more like something to type on the web and print it.
0
 
YZlatCommented:
tb.TextMode = TextBoxMode.MultiLine;
                tb.Height = 30;
                tb.Width = 150;
0
 
Obadiah ChristopherCommented:
<div>
<asp:GridView ID="gvTextBox" runat="server" AutoGenerateColumns="false" ShowHeader="false">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:TextBox ID="txt1" runat="server" Width="100px"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:TextBox ID="txt2" runat="server" Width="100px"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:TextBox ID="txt3" runat="server" Width="100px"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:TextBox ID="txt4" runat="server" Width="100px" TextMode="MultiLine"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
</div>
<div>
<asp:Button ID="btnAddRows" runat="server" Text="Add Rows" 
            onclick="btnAddRows_Click" />
</div>

Open in new window

        protected void btnAddRows_Click(object sender, EventArgs e)
        {
DataTable dtText;
            if (Session["dt"] == null)
                dtText = new DataTable();
            else
                dtText = (DataTable)Session["dt"];

            DataRow dr;

            dr = dtText.NewRow();
            dtText.Rows.Add(dr);

            gvTextBox.DataSource = dtText;
            gvTextBox.DataBind();
        }

Open in new window

0
 
pauledwardianAuthor Commented:
Thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.