Thursday, July 27, 2006

 

Panel Dynamics

Browser renderings of data and controls can produce dynamic displays that traditional client-side applications could only hope for. Particularly useful is a scrollable collection of controls, including ones such as buttons that produce actions. In a sterling example of cuteness and opacity, Microsoft's ASP.NET 2.0 documentation hints that creating such a display might be possible but won't tell you how to do it. Neither will the usually helpful Dino Esposito, although his book "Programming ASP.NET 2.0 Core Reference" does have a sentence explaining that dynamic controls must be regenerated each time a page loads (see page 113).

Microsoft recommends its PlaceHolder as a container for dynamic controls, but that is a dead object, offering no mobility. Much more useful is Panel, which can provide both horizontal and vertical scrolling. Action controls inside a Panel operate normally as long as they are visible, no matter where they may be moved on the display.

Each action control has one or more collections of event handlers. Button has Click, CheckBox has CheckChanged, and so on. Server-side event handler functions are connected to the corresponding events by adding a delegate in C#. To get the events from dynamic controls, the code to create the controls and specify their event handler functions can be placed in the Page_Load function and must execute every time. For example, using a statically declared Panel:

In the .aspx markup --
    < asp:Panel id="ofPanelView" runat="server" >

In the .aspx.cs Page_Load function --
    ControlCollection oControls = ofPanelView.Controls;
    oControls.Clear();
    Button oSpecialButton1 = new Button();
    oSpecialButton1.CommandName = "1";
    oSpecialButton1.Click += new System.EventHandler(SpecialButton_Click);
    oControls.Add(oSpecialButton1);
    Button oSpecialButton2 = new Button();
    oSpecialButton2.CommandName = "2";
    oSpecialButton2.Click += new System.EventHandler(SpecialButton_Click);
    oControls.Add(oSpecialButton2);

Elsewhere in the .aspx.cs code --
    SpecialButton_Click(object sender, EventArgs e)
    {   string sCommandName = ((Button)sender).CommandName;
        . . .

If you will be changing a pattern of dynamic controls for a page, then you must also assign the .ID property of each control and do so in a consistent way, so that on postback values and events will be paired with corresponding server-side objects. If a pattern of dynamic controls does not change, default ID values will do the job.


[Note: because of display limitations, characters "< " and " >" here are shown with a space after or before them.]

Tuesday, July 04, 2006

 

DIV and conquer

ASP.NET 2.0 becomes most unfriendly to JavaScript when you want to change the visibility of Web form controls. Documentation won't explain how to do this, but it's simple. Set style.visibility to "visible" or "hidden" for most browsers. Problems arise when you want to change controls such as CheckBox or RadioButton that generate multiple elements, an input and a label in these cases. Addressing a control in the usual way affects only one element. In these cases, it does not change the label.

The solution is to put an HTML DIV element around one or more controls that you want to change, such as:

< div id="ofDivCheck23" style="visibility: hidden" runat="server" >
    < asp:CheckBox ID="ofCheck23" runat="server" Text="Report Required" / >
< /div >

Be sure to put "id" in lower case, or Visual Studio 2005 will bark at you with a diagnostic such as "Error...name contains uppercase characters, which is not allowed," a rule routinely violated by its own markups.

With such a div element in place, show or hide everything that it brackets with JavaScript statements such as:

var oDivCheck23 = document.getElementById('< % = ofDivCheck23.ClientID % >');
var oCheckEnabled = document.getElementById('< % = ofCheckEnabled.ClientID % >');
if (oCheckEnabled.checked == true)
{
    oDivCheck23.style.visibility = "visible";
}
else
{
    oDivCheck23.style.visibility = "hidden";
}

[Note: because of display limitations, characters "< " and " >" here are shown with a space after or before them.]

This page is powered by Blogger. Isn't yours?

Subscribe to Posts [Atom]