|
Back
Creating a Class to Deal with Common Form Based UI Functions
The following article shows you how to create a class that deals with a number of common UI requirements for web based forms in ASP.net. For example, lets say you want to do any of the following:
• Set the form field focus to a particular field
• Set the maximum length of a text area (maximum length normally only apply to single line text boxes
• Copy selected form items from one list to another when you click on them
• Remove selected form items from a list when you click on them
• Select all items in a form list
• Deselect all items in a form list
Here are the instructions on how to do it:
- Add a class call UI.cs to your Visual Studio.net project. Click here to download the class.
- Ensure it includes the following using statements at the top:
using System;
using System.Web.UI;
using System.Web.UI.WebControls;
- Also make sure it includes is uses the namespace Utils for purposes of this example.
- Paste the following code into your class. The methods with in it deal with all the functions listed above.
public static string SetFormFieldFocus(string field)
{
// String to set focus on a chosen form field
string s = "";
return s;
}
public static string MaxLengthTextArea(int length, string formField)
{
// This sets the maximum length of a text area
// It takes the parameters length which is the maximum length and formField which
// is the name of the form field
string s = "if (" + formField + ".value.length > " + length.ToString() + ") " + formField + ".value = " + formField + ".value.substring(0," + length.ToString() + ");";
return s;
}
public static void CopySelectedItemsFromOneFormListToAnother(System.Web.UI.WebControls.ListBox sourceCtrl, System.Web.UI.WebControls.ListBox destinationCtrl)
{
// This copies the selected items in a form list box to another list box
string selectionText;
string selectionValue;
for (int i= 0 ;i < sourceCtrl.Items.Count;i++)
{
if (sourceCtrl.Items[i].Selected == true)
{
selectionText = sourceCtrl.Items[i].Text.ToString();
selectionValue = sourceCtrl.Items[i].Value.ToString();
if (destinationCtrl.Items.FindByValue(selectionValue)== null)
{
destinationCtrl.Items.Add(new ListItem(selectionText, selectionValue));
}
}
}
}
public static void RemovedSelectedItemsFromFormList(System.Web.UI.WebControls.ListBox ctrl)
{
// This removes the selected items from the drop down list
for (int i=0; i {
if (ctrl.Items[i].Selected == true)
{
ctrl.Items.Remove(ctrl.Items[i]);
}
}
}
public static void SelectAllItemsInFormList(System.Web.UI.WebControls.ListBox ctrl)
{
// selects all items in a list box
for (int i=0; i {
ctrl.Items[i].Selected = true;
}
}
public static void DeSelectAllItemsInFormList(System.Web.UI.WebControls.ListBox ctrl)
{
// deselects all items from a list box
for (int i=0; i {
ctrl.Items[i].Selected = false;
}
}
public static string AddEncTypeToForm()
{
// Adds encryption type to a form. specifically for upload forms
string s = "";
return s;
}
To call the relevant functions from your code behind pages just use code as per the following:
To set the focus to a field in the form, where txtTitle is the name of the field
// Set focus to a particular field
this.RegisterStartupScript("focus", Utils.UI.SetFormFieldFocus("txtTitle"));
To set the maximum length of a textarea, where txtDescription is the field name, and 300 is the maximum length you want
// Set the max length of the textarea
txtDescription.Attributes.Add("OnKeyDown", Utils.UI.MaxLengthTextArea(300, "txtDescription"));
To copy a list box item from one list box to another
Putting the following code in your list box's SelectedIndexChanged operation (and ensuring the AutoPostBack parameter is set to true) will ensure that when someone clicks on an item in the list box it is transferred to another list box.
// Copy selected items from one list to another
Utils.UI.CopySelectedItemsFromOneFormListToAnother(lbSourceListBox, this.lblDestinationListBox);
To delete an item from a list box
Putting the following code in your list box's SelectedIndexChanged operation (and ensuring the AutoPostBack parameter is set to true) will delete that item from the list box.
// Copy selected items from one list to another
Utils.UI.RemovedSelectedItemsFromFormList(this.lblWhateverListBox);
Note that if you are using ASP.net 2 master pages then you need to consider that .net makes some changes to your field names before displaying in the browser. You need to find out the name of the field produced and add that to your field reference.
Back
|