There is no strict definition of ASP .NET rich control but generaly these are controls whose object model is largely separate from the HTML they generate. Rich controls are still handled as single objects, they only differ from normal controls in terms of more complex HTML and user interface being generated.
Let’s take a look at some of the standard rich controls in ASP .NET:
Calendar
It generates a calendar that developers can place anywhere on a page. The Calendar control as a code looks like this:
<asp:Calendar id="MyCalendar" runat="server" />However it renders a complex HTML that can look like this:
Or like this if it’s with it’s default style and properties:
Users can click on the arrows on the upper corners to switch from month to month or click on a date to select it. The selected date can be retrieved as a DateTime object from the property Calendar.SelectedDate.
As you can see above, the Calendar can be altered both as style and functionality. Apart from ordinary CSS tricks, there are several properties that can be used to achieve a better looking calendar: DayHeaderStyle, DayStyle, NextPrevStyle, OtherMonthDayStyle, SelectedDayStyle, SelectorStyle, TitleStyle, TodayDayStyle, WeekendDayStyle.
When it comes up to more advanced styling, there are several Calendar Members that can modify it: Caption, CaptionAlign, CellPadding, CellSpacing, DayNameFormat, FirstDayOfWeek, NextMonthText, NextPrevFormat, PrevMonthText, SelectedDate, SelectedDates, SelectionMode, SelectMonthText, SelectWeekText, ShowDayHeader, ShowGridLines, ShowNextPrevMonth, ShowTitle, TitleFormat, TodaysDate, VisibleDate.
Example of the code behind a modified calendar:
<asp:Calendar ID="MyCalendar" runat="server"
BackColor="Yellow" BorderColor="#001122" CellPadding="1" DayNameFormat="Shortest"
Font-Names="Arial" Font-Size="10px" ForeColor="Red" Height="240px"
Width="300px" ondayrender="calDate_DayRender">
<SelectedDayStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />
<WeekendDayStyle BackColor="#FFFFFF" />
<DayHeaderStyle BackColor="#FFAA99" ForeColor="#333333" />
<OtherMonthDayStyle ForeColor="#330000" />
<TitleStyle BorderWidth="3px" Font-Bold="True" Font-Size="16px"
Height="25px" />
</asp:Calendar>
// This is an example of the usage of the e.Day object
// Depending on the goal, other objects such as e.Cell can be used
// Code editors like VisualStudio provide hints for the usage of all
// such objects
protected void MyCalendar_DayRender(Object source, DayRenderEventArgs e)
{
// Restricting all weekends before today.
if (e.Day.Date < DateTime.Now && e.Day.IsWeekend)
{
e.Day.IsSelectable = false;
}
} FileUpload
The FileUpload control is a simple and straightforward control yet considered to be among the rich controls. As the name suggests, its purpose is to upload files and it easily resolves the problem to retrieve data from the user’s computer by using a programming language that executes entirely on the server. The FileUpload is declared like this:
<asp:FileUpload ID="MyUpload" runat="server" />When inspecting the result on the browser, you can find out that this control generates the well known “<input type=”file”>” HTML tag. Since this tag doesn’t provide almost any customisation options, the FileUpload control isn’t quite customisable either. Generally, it represents a rectangular box containing a button-like graphic inside. When clicked on, this control opens a dialogue window to browse for files from. Once a file is chosen, it is displayed on the FileUpload control. However, this doesn’t mean the file is uploaded. It’s just readied and is uploaded later, when the page is posted back.
As mentioned above, the FileUpload is not especially customisable. There are, however, a few commonly used solutions to add some more functionality to the uploader. A couple of examples:
- Allowing multiple files to be uploaded at once by using the AllowMultiple property:
<asp:FileUpload ID="MyUpload" AllowMultiple="true" runat="server" />- Modifying the uploaded file size limit: by default this limit is set to 4MB. Unlike the above example, this functionality can be altered through the config file by specifying a value for the maxRequestLength setting in the httpRuntime tag. In the following example files up to 16384 bytes (16MB) are allowed:
<?xml version="1.0" encoding="utf-8" ?>
<configuration>
<system.web>
<!-- Other settings omitted for clarity. -->
<httpRuntime maxRequestLength="16384" executionTimeout="3600"/>
</system.web>
</configuration> executionTimeout is commonly used alongside maxRequestLength and it restricts the time in seconds for a file request to be executed.
While extremely useful in some scenarios, maxRequestLength shouldn’t be used when not needed because abnormally large files can temporarily block the ASP .NET threads and even be part of Denial of Service (DoS) attacks.
AdRotator
AdRotator is mainly used to switch through randomly selected images previously collected in a group. Most users have seen the AdRotator in action when they open a page containing banner ads. AdRotator’s are easily implementable on ASP .NET pages and even more, the predefined images can be stored separately inside the config file.
The list of images must be stored in XML format. This is an example of two images stored for the AdRotator:
<Advertisements>
<Ad>
<ImageUrl>ad1.jpg</ImageUrl>
<NavigateUrl>https://www.mysite.com</NavigateUrl>
<AlternateText>My Ad Site</AlternateText>
<Impressions>5</Impressions>
<Keyword>Test</Keyword>
</Ad>
<Ad>
<ImageUrl>ad2.jpg</ImageUrl>
<NavigateUrl>https://www.mysite.com</NavigateUrl>
<AlternateText>My Ad Site</AlternateText>
<Impressions>4</Impressions>
<Keyword>Another Test</Keyword>
</Ad>
</Advertisements>As you can see above, the AdRotator control can be modified through several properties. They are the following:
- ImageUrl
- NavigateUrl – link to open when clicked on the banner
- AlternateText – the alt attribute of the banner image
- Impressions – determines how often the banner will appear. A banner with impressions value of 8 will appear twice more often than one with value of 4.
- Keyword – used for filtering. For example, developers can restrict banners with certain keywords from appearing on the page
Example of an AdRotator control:
<asp:AdRotator id="Ad" runat="server" AdvertisementFile="MyAdRotator.xml"
Target="_blank" KeywordFilter="Test" />MultiView and Wizard
Unlike most cases when users surf through multiple web pages, these controls provide the option to load different views for the same page or different steps of the task performed on the same page. Or to avoid troubles connected with the transfer of data from one page to another.
MultiView
This is the more straightforward control that loads whatever HTML and other controls the developers add to the view. Let’s see the example:
<asp:MultiView id="MultiView1" runat="server" >
<asp:View ID="View1" runat="server">
Choose a pet:<br />
<asp:DropDownList ID="pet" runat="server"
AutoPostBack="True"
OnSelectedIndexChanged="ControlChanged" />
<br />
Choose a pet name:<br />
<asp:DropDownList ID="name" runat="server"
AutoPostBack="True"
OnSelectedIndexChanged="ControlChanged" />
</asp:View>
<asp:View ID="View2" runat="server">
Choose pet food:<br />
<asp:RadioButtonList ID="food" runat="server"
AutoPostBack="True"
OnSelectedIndexChanged="ControlChanged" RepeatColumns="2" />
<br />
</asp:View>
</asp:MultiView> Additionally, there are few useful tricks when developers have to manipulate views. MultiView recognises button controls by specific command names. Buttons are all controls implementing the IButtonControl interface. By adding button controls to a view that uses command names, developers achieve additional functionality without writing additional code. Example:
<asp:Button ID="ButtonNext" runat="server" CommandArgument="View2"
CommandName="SwitchViewByID" Text="Go to View2" />The recognised command names are: PrevView, NextView, SwitchViewByID and SwitchViewByIndex. In the example above the value in CommandArgument is used for the purpose of the command name SwitchViewByID (in other words switching to the view with id=”View2″). Command names PrevView and NextView do not need this CommandArgument.
Wizard
Wizard is the more complex version of MultiView. It can (and will do by default) show a sidebar with navigation through different steps in a task thus providing the option for the user to skip certain task steps.
This is how a Wizard looks as code. This is an example similar to the one for the MultiView:
<asp:Wizard ID="Wizard1" runat="server" ActiveStepIndex="0"
BackColor="Yellow" CellPadding="10">
<WizardSteps>
<asp:WizardStep runat="server" Title="Step 1 - Pets">
Choose a pet:<br />
<asp:DropDownList ID="pet" runat="server" />
<br />
</asp:WizardStep>
<asp:WizardStep runat="server" Title="Step 2 - Names">
Choose a name:<br />
<asp:DropDownList ID="name" runat="server" />
<br />
</asp:WizardStep>
<asp:WizardStep runat="server" Title="Step 3 - Food">
Choose pet food:<br />
<asp:DropDownList ID="food" runat="server" />
<br />
</asp:WizardStep>
</WizardSteps>
</asp:Wizard> An important difference between Wizard and MultiView is that controls in the Wizard aren’t set to automatically post back. This is like that because wizards are generally used when a task needs to be completed without strict step order limitations. In wizards the postback happens once the final step is completed. This provides an additional advantage because the page is not slowed down due to all of the postbacks that happen when using MiltiView.
Leave A Comment