Dynamic webcontrol

Discussion in 'ASP .Net Web Controls' started by Fabiano, May 5, 2004.

  1. Fabiano

    Fabiano Guest

    Please,

    at my webpage i need to create some webcontrols based on a button click.
    This way:

    My page have a specifc area at top where i show some data to user. at the
    bottom i have something kind a grid (or table) with 4 columns and inside of
    them webcontrols like DropDownList, TextBox, etc.
    When the user fill the data at the 1st row, he clicks on Add New Button and
    a 2nd row must be created whith all webcontrols.

    With ASP i used DHTML and Javascript to add a HTML text into a DIV. But with
    ..NET i would like to use something with code behind. How could i simulate
    something like that? The best way is use a TABLE component, a Datagrid?

    Is there a tutorial or article about it at some place over the internet?

    tks in adv.

    Fabiano
     
    Fabiano, May 5, 2004
    #1
    1. Advertising

  2. Hi Fabiano,

    I've found that you've posted another issue on the similiar problem titiled
    with
    "Subject: RE: Unbounded Datagrid"

    I've provide my suggestion that "use DataGrid and generate the DataSource
    programatically", you may have a look there for detailed reference.

    As for the problem in the thread, I think I'd like to discuss something on
    dynamic created web controls on asp.net web page:

    In asp.net generally, we put all the controls (Html or ASP.NET Server
    controls) as well as normal html element in the page template "aspx" file.
    And at runtime, when the page is requested, the page class will be
    generated at runtime by parsing the aspx page template and then the actual
    page class know what controls need to be render out every time. If we add
    control dynamically via code at runtime in code behind, if you only add it
    once and not add it when the page is posted back again, you 'll find the
    control disappear. For example, if we use the following means to add a
    TExtBox
    in Page_load

    private void Page_Load(object sender, System.EventArgs e)
    {
    if(!IsPostBack)
    {
    TextBox tb = new TextBox();
    tb.Id = "txtDynamic";
    // add it into a placeholder or other
    container control's Controls collection
    }

    }

    Then, when the page is posted back( click a button ), the TextBox will
    disappear because we haven't added it when page post back. The same problem
    will occur when we add controls in Button's Click serverside event.
    For detailed info, you can have a look at the following articles:

    #Adding Controls to a Web Forms Page Programmatically
    http://msdn.microsoft.com/library/en-us/vbcon/html/vbtskaddingcontrolstowebf
    ormspageprogrammatically.asp?frame=true

    Also, here is a form thread maybe also helpful on understanding dynamic
    added control:
    http://groups.google.com/groups?hl=zh-CN&lr=&ie=UTF-8&oe=UTF-8&threadm=#n4
    Lib46DHA.260%40TK2MSFTNGP11.phx.gbl&rnum=1&prev=/groups%3Fhl%3Dzh-CN%26lr%3D
    %26ie%3DUTF-8%26oe%3DUTF-8%26q%3DDonald%2Bxie%2Bsteven%2BCheng

    So as for your situation, I recommend that you not create dynamic controls
    but use the DataGrid Template DataBound control. And modify the DataSource
    dynamically and rebind it with the DataGrid when necessary., For example,
    when the user hit the add button to add a new item, you can retrieve the
    DataSource( maybe a DataTable stored in ViewState or Session) and add a new
    record in the datatable and rebind the DataGrid.
    To make this clearly ,I've created a simple demo page , here is the page's
    source:

    ===============aspx page source=================
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
    <HTML>
    <HEAD>
    <title>demogrid</title>
    <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
    <meta name="CODE_LANGUAGE" Content="C#">
    <meta name="vs_defaultClientScript" content="JavaScript">
    <meta name="vs_targetSchema"
    content="http://schemas.microsoft.com/intellisense/ie5">
    </HEAD>
    <body>
    <form id="Form1" method="post" runat="server">
    <table width="100%" align="center">
    <tr>
    <td>
    <asp:DataGrid id="dgMain" runat="server" AutoGenerateColumns="False">
    <Columns>
    <asp:BoundColumn DataField="name"
    HeaderText="Name"></asp:BoundColumn>
    <asp:TemplateColumn HeaderText="Gender">
    <ItemTemplate>
    <asp:DropDownList ID="lstGender" Runat="server" Enabled="False"
    SelectedIndex='<%# DataBinder.Eval(Container.DataItem,"gender") %>'>
    <asp:ListItem Selected="True" Value="Male">Male</asp:ListItem>
    <asp:ListItem Value="Female">Female</asp:ListItem>
    </asp:DropDownList>
    </ItemTemplate>
    </asp:TemplateColumn>
    <asp:BoundColumn DataField="email"
    HeaderText="Email"></asp:BoundColumn>
    <asp:ButtonColumn Text="Delete"
    CommandName="Delete"></asp:ButtonColumn>
    </Columns>
    </asp:DataGrid>
    </td>
    </tr>
    <tr>
    <td>
    Name:<asp:TextBox id="txtName" runat="server"></asp:TextBox>
    Gender:<asp:DropDownList id="lstGender" runat="server">
    <asp:ListItem Value="Male" Selected="True">Male</asp:ListItem>
    <asp:ListItem Value="Female">Female</asp:ListItem>
    </asp:DropDownList>
    Email:<asp:TextBox id="txtEmail" runat="server"></asp:TextBox>
    <asp:Button id="btnAdd" runat="server" Text="Add New"></asp:Button>
    </td>
    </tr>
    <tr>
    <td></td>
    </tr>
    </table>
    </form>
    </body>
    </HTML>


    ===========code behind page class================
    public class demogrid : System.Web.UI.Page
    {
    protected System.Web.UI.WebControls.DataGrid dgMain;
    protected System.Web.UI.WebControls.TextBox txtName;
    protected System.Web.UI.WebControls.DropDownList lstGender;
    protected System.Web.UI.WebControls.Button btnAdd;
    protected System.Web.UI.WebControls.TextBox txtEmail;

    private void Page_Load(object sender, System.EventArgs e)
    {
    if(!IsPostBack)
    {
    Init_Data();
    Bind_Data();
    }

    }

    private void Init_Data()
    {
    DataTable tb = new DataTable("Users");
    tb.Columns.Add("name",typeof(string));
    tb.Columns.Add("gender",typeof(int)); // 0(male) or 1(female)
    tb.Columns.Add("email",typeof(string));

    DataRow row = tb.NewRow();
    row["name"] = "Steven Cheng";
    row["gender"] = 0;
    row["email"] = "";

    tb.Rows.Add(row);

    ViewState["DATA_SOURCE"] = tb;
    }

    private void Bind_Data()
    {
    DataTable tb = ViewState["DATA_SOURCE"] as DataTable;
    if(tb != null)
    {
    dgMain.DataSource = tb;
    dgMain.DataBind();
    }
    }

    #region Web Form Designer generated code
    override protected void OnInit(EventArgs e)
    {
    InitializeComponent();
    base.OnInit(e);
    }

    private void InitializeComponent()
    {
    this.dgMain.DeleteCommand += new
    System.Web.UI.WebControls.DataGridCommandEventHandler(this.dgMain_DeleteComm
    and);
    this.btnAdd.Click += new System.EventHandler(this.btnAdd_Click);
    this.Load += new System.EventHandler(this.Page_Load);

    }
    #endregion

    private void btnAdd_Click(object sender, System.EventArgs e)
    {
    DataTable tb = ViewState["DATA_SOURCE"] as DataTable;
    if(tb != null)
    {
    string name = txtName.Text;
    string email = txtEmail.Text;
    int gender = lstGender.SelectedIndex;

    DataRow row = tb.NewRow();
    row["name"] = name;
    row["gender"] = gender;
    row["email"] = email;

    tb.Rows.Add(row);
    ViewState["DATA_SOURCE"] = tb;
    }

    Bind_Data();
    }

    private void dgMain_DeleteCommand(object source,
    System.Web.UI.WebControls.DataGridCommandEventArgs e)
    {
    DataTable tb = ViewState["DATA_SOURCE"] as DataTable;
    if(tb != null)
    {
    int index = e.Item.ItemIndex;

    tb.Rows[index].Delete();

    ViewState["DATA_SOURCE"] = tb;
    }

    Bind_Data();
    }

    }
    ================================================
    Hope helps. Thanks.


    Regards,

    Steven Cheng
    Microsoft Online Support

    Get Secure! www.microsoft.com/security
    (This posting is provided "AS IS", with no warranties, and confers no
    rights.)

    Get Preview at ASP.NET whidbey
    http://msdn.microsoft.com/asp.net/whidbey/default.aspx
     
    Steven Cheng[MSFT], May 6, 2004
    #2
    1. Advertising

  3. Hi Fabiano,

    Have you had a chance to check out the suggestions in my last reply or have
    you got any further ideas on this issue? If you have anything unclear or if
    there're anything else we can help, please feel free to post here. Thanks.

    Regards,

    Steven Cheng
    Microsoft Online Support

    Get Secure! www.microsoft.com/security
    (This posting is provided "AS IS", with no warranties, and confers no
    rights.)

    Get Preview at ASP.NET whidbey
    http://msdn.microsoft.com/asp.net/whidbey/default.aspx
     
    Steven Cheng[MSFT], May 11, 2004
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Guest
    Replies:
    2
    Views:
    755
  2. Luis Ramírez.

    Can a webcontrol (webcontrol.dll) have a configuration file?

    Luis Ramírez., Jul 5, 2004, in forum: ASP .Net Building Controls
    Replies:
    2
    Views:
    218
    Luis Ramírez
    Jul 6, 2004
  3. Kasabaarde Sumta

    WebControl inside of WebControl and attaching events

    Kasabaarde Sumta, Dec 13, 2004, in forum: ASP .Net Building Controls
    Replies:
    0
    Views:
    212
    Kasabaarde Sumta
    Dec 13, 2004
  4. Fabricio

    Custom webcontrol that references another webcontrol

    Fabricio, Sep 21, 2005, in forum: ASP .Net Building Controls
    Replies:
    0
    Views:
    201
    Fabricio
    Sep 21, 2005
  5. Peter Morris [Air Software Ltd]

    WebControl with non-WebControl property

    Peter Morris [Air Software Ltd], Dec 7, 2004, in forum: ASP .Net Web Controls
    Replies:
    1
    Views:
    148
    Peter Morris [Air Software Ltd]
    Dec 7, 2004
Loading...

Share This Page