Dynamic Forms

[Cudabean]

I want to use ASP.NET to present a dynamic form. That is, I want most of my Web page window to be standardized, but the content of the page may vary widely in terms of the number and types of fields. I want a particular database table to determine which fields to display where.

So by checking the table I find that I need two checkboxes and two text boxes. I also find which stored procedure I need to get the data.

The table also provides an HTML snippet. The snippet describes just the fields and their relationship to each other and any style features.

For this to work, we would have to be able to count on two things that I'm not sure .NET will allow us to do:
1. We must be able to insert HTML design at a precise location at runtime.
2. We want to be able to insert viewstate aware <inputs>

Can it be done?

cudabean

[nemaroller]

When i think of a datalist or repater... these controls basically provide for dynamic creation of controls.

The whole thing with dynamic controls is you have to be able to recreate the form exactly the way it went out with the previous request. The most important part is having the recreated controls match up with the sent form, and that all hinges on the id of each dynamic control as far as I have been able to tell. So you will need a vehicle to store the controls that were sent out, probably viewstate.

For instance datalist's child controls are often labeled DataList1_ctr0, DataList1_ctr1.... and so forth.

Anyway, this would obviously be a custom control you will build, that contains these other dynamic controls. The custom control itself is of couse not dynamic, but its a mere placeholder of sorts. Plus you will be overriding some low to the metal asp.net methods.

I'm pretty sure It can be done the way out want to... it isn't very click and shoot as .Net 2.0 will be... Whidbey incorporates a lot of what we have to do manually with 1.1, such as client-side focus. I have built a menu-bar control that dynamically adds and replaces button in its Overridable On_PreRender method... it works well.

As you can see below, its the same control. Before edit, it has x number of buttons, and opposed to the number of buttons it has when in Edit mode (SAVE, CANCEL).

[Cudabean]

Thanks Nemaroller. Are you familiar with the PlaceHolder control? As I understand it, it allows you to place a generic control on a page and then designate it at runtime. This is the direction I'm currently researching, but I'm not sure how to control the graphic layout.

cudabean

[Magiaus]

Have you thought about using a panel and constructing you controls in code then adding them to the panel?

For layout you can actual build a table, insert controls and text into the table by using the Html Control and using Controls.Add.

This is very powerful and very tedious. I have pages that use this tech to load UserControls. Meaning I have one page. With twelve link buttons and a panel. On the first OnLoad.Page_Load it loads a default control. Then if you click a link button it then loads the correct UserControl after calling Panel.Controls.Clear.

This allows my page work as if it were 12 pages and I get the bonus of easily being able to use any form anywhere because I can simply load it. It's important to set the ID of the control you load and to alway load in the same order. I also alway make sure my dummy control is declared top level so it doesn't scope out when the method/event is over.

The biggest problem I have had so far is with having a cancel button on my UserControl forms. I mean it has no idea where it is or what to do to preform the correct Cancel. The solution I came up with was to make my own page class that superclasses post back. my button calls __doPostBack('Cancel','') and the page class has a method PostBackCommand(string) that can be overridden. In the method I run a switch/select on string to check for what to do.

It is somewhat of a pain but it works......

[Magiaus]

I hjave a book by O'Riely about ASP 2.0 it has a script that create forms dynamicly based on a query string and regexp

it supports full validation and some other things. If you are using SQL Server you could read the Information_Schema and get exact field info about a table and generate a form. The work in this is how do you control what fields are displayed or editable or deletable...... you could use and exclude list aspx?el=filed%20field2%20

split on space... this is a complex concept

the regExp use a format of

s:field-vld exp

h:field

one field is displayed and has validation preformed one is hidden does not

I have an app I'm building that does some stuff like this. it read the db and works like a wizard to build data classes, collections, grids, forms, views, and maybe even menus

it is broken right now though and I'm busy

[Cudabean]

Thanks Magiaus.

Lots of food for thought there. I'm going to have to spend some time mulling this all over. What sucks is that I'm such a newbie at .NET, so I'm not familiar with panels and stuff.

cudabean

[rem736]

hi,

i'm new to .net and have been given a project to convert a microsoft database project into a web-based data entry and report system.

as far as the data entry part goes, the fields are set. but the number of records are not. they may vary anywhere from 1 record to 100 records. as such, i do not want to create a form with 100 rows.

i am thinking that when the form loads, only one row of controls (textboxes, checkboxes, drop-down lists) would show. as soon as anything is entered into the first control of the first row, a second row would show up. when the content of the first control in the second row is changed, a third row would show up, and so forth.

i would like to be able to do this in the code-behind pages in vb. any help would be greatly appreciated.

<rem736>

[Magiaus]

okay. make a user control for 1 row. have a save button. when the save button is clicked raise an event for that user control. Attach the event which lives in your page when you load the control in code. load one control on load and load one new control in your event. to set focus you could try having the row control reg a start up script to set focus.

sorry for sloppy grammer

[rem736]

thanks magiaus,

but i rather not use a button at all. rather, i want to use the onTextChanged event to trigger the creation of a new row.

in the example below, it works. but only for one additional row. in order to make it work for additional rows i would have to declare additional controls explicity.

my aspx page:

<%@ Page Language="vb" AutoEventWireup="false" Codebehind="index3.aspx.vb" Inherits="test.index3"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
	<HEAD>
		<title>index3</title>
		<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
		<meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
		<meta name="vs_defaultClientScript" content="JavaScript">
		<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
	</HEAD>
	<body>
		<form id="DynamicControls" method="post" runat="server">
			<asp:Label id="label_first" Text="First Name" Width=100 runat="server"/><br>
			
			<asp:TextBox id="first1" Width=100 visible=True runat="server" onTextChanged="first_Changed" /><br>
		</form>
	</body>
</HTML>

and my code-behind:

Public Class index3
    Inherits System.Web.UI.Page
    Dim thisForm As HtmlForm
    Dim txtFirst As New TextBox
    Shared r As Integer

    Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        r += 1
    End Sub

    Sub first_Changed(ByVal sender As System.Object, ByVal e As System.EventArgs)
        r += 1
        thisForm = FindControl("DynamicControls")

        thisForm.Controls.Add(txtFirst)
        With txtFirst
            .ID = "first" & r
            .Width = New Unit(100)
            .AutoPostBack = True
        End With
        thisForm.Controls.Add(New LiteralControl("<br>"))
        
    End Sub
End Class

when the form loads, it loads the first textbox. typing something into this textbox triggers the first_Changed event, which loads the second textbox and a line break. but in order to repeat this process for additional rows, i have to declare another textbox.

is there a way that i could declare the object (txtFirst) only once and create new instances of it for as many times as i need, giving it a new ID each time as i have tried to do above?

<rem736>

[Magiaus]

no you don't. simply set an id and use load control and set the event to the event in the page. I use this method all the time.

this is c sharp code but the basic idea is the same just keep a count in viewstate to increment you control id.

this loads a control and sets the event for image change. it is part of a web page builder that allows you to order the display of picturues and add delete them.

it's c# but but read it. it makes since.

example page code

        void LoadImages()
        {
            if(pnl__pictures.Visible && ProductExSourceQuoteKey != System.Guid.Empty)
            {
                Business.Orders.Products.Source src = new Business.Orders.Products.Source(ProductExSourceKey);
                Business.Images.SourceQuoteCollection imgs = new Business.Images.SourceQuoteCollection(ProductExSourceQuoteKey);
                

                pnl_pictures.Controls.Clear();
                for(int i = 0; i < pnl_pictures.Controls.Count; i++)
                {
                    pnl_pictures.Controls.RemoveAt(i);
                }
                if(imgs.Count > 0)
                {
                    for(int i = 0; i < imgs.Count;i++)
                    {
                        _img = LoadControl("../../../../Forms/Edit/Images/SourceQuote.ascx"); //<~~~~~ this
                        _img.ID = "img" + i.ToString();
                        ((Web.UserControls.Forms.Edit.Images.SourceQuote)_img).SourceQuoteKey = ProductExSourceQuoteKey;
                        ((Web.UserControls.Forms.Edit.Images.SourceQuote)_img).SourceQuoteImageKey = imgs[i].Key;
                        ((Web.UserControls.Forms.Edit.Images.SourceQuote)_img).ImageKey = imgs[i].ImageKey;
                        ((Web.UserControls.Forms.Edit.Images.SourceQuote)_img).ImageChanged += new System.EventHandler(ImageChanged); //<~~~ this
                    
                        this.pnl_pictures.Controls.Add(_img);
                    }
                }
            }
        } 

just make an event in the user control and raise it from on text changed.

example event

        public event System.EventHandler ImageChanged;
        public void OnImageChanged(System.EventArgs e)
        {
            ImageChanged(this, e);
        } 

example event call

        {
            Business.Images.SourceQuote img_x = new Business.Images.SourceQuote(SourceQuoteImageKey);
            Business.Images.SourceQuote.ReSequence(img_x, Business.Images.SourceQuote.Count(img_x.QuoteKey) - 1);
            Business.Images.SourceQuote.Delete(img_x);
            OnImageChanged(System.EventArgs.Empty);
        } 

sorry but i don't know vb.net well enough to quickly make an example

[rem736]

thanks. i'll give it a try.

[wild_bill]

Is there a way to set a pattern like that, into a command button's background?

[Magiaus]

like what?

[wild_bill]

I was wondering if VS.NET had a way to set a buttons background so that it faded, rather than being one color.

[nemaroller]

The backgrounds of those buttons are a one-pixel wide by 80pixel graphic which is repeated via css to fill the required width of the button (so, look at those buttons, imagine only see 1px wide of any one button, and you get the idea). Specifically, nothing more than a css class attribute on a button, with a css definition similiar to the following:

buttonBackgroundNormal
{
background-image:url(../images/buttonbackground.gif");
background-repeat: repeat-x;
}

Internet Explorer does has a gradient feature which you can set via css rules, and you simply set two colors and it fills the gradient between them - buts it is only recognized in IE, so quite useless and non-standard on the Internet.

[Magiaus]

oh, I wasn't sure what you meant. That IE only gradient uses style="filter:" I think not sure.