[Cross-post of content from my Telerik.com blog for your technical reading pleasure.]
In the Q3 2008 release, Telerik introduced a new control to the RadControls for ASP.NET AJAX suite called RadInputManager. Like RadInput, it is designed to enable you to provided textboxes to your users that give real-time validation and feedback based on the entered text. The big difference with RadInputManager, though, is that you don't have to add lots of Telerik Input controls on your page to get this real-time feedback. Instead, you can quickly convert "standard" ASP.NET TextBoxes to RadInput textboxes via the RadInputManager configuration- similar to how you can use RadAjaxManager to quickly ajaxify your page without littering it with UpdatePanels.
RadInputManager is a very innovative control and- in my opinion- one of the biggest steps forward in simplifying ASP.NET form validation to come around in a long time. In this optimization tip, we'll take a look a the RadInputManager (RIM) control to see how it simplifies form validation and see how it helps us improve page performance.
SIMPLIFYING FORM VALIDATION
When ASP.NET developers want to validate form inputs today, that usually represents the beginning of a time consuming task where form validation controls are add to the page for every input that needs to be validated. After the assorted RequiredField, RegularExpression, and Range validators are added, their prosperities set, and some type of UI added to display their error messages, you're left with a page cluttered with markup that is unrelated to the actual layout or function of the form. Further, any complex validations on the page are usually set such that they do not get evaluated until the form has been submitted, meaning users get feedback regarding their input errors long after the mistake has been made. Not great for usability.
With RadInputManager that all changes. Instead, validating form inputs becomes easy and painless:
- You add standard ASP.NET TextBoxes to your form where you want to collect values
- You configure RadInputManager to apply RegularExpression, Numeric, DateTime, or RequiredField validations the appropriate textboxes
- You run the page
No markup littering. No need to set properties over and over again on controls that are providing the same validation. And as a bonus, when you use RadInputManager, users get real-time feedback when their input does not validate, enabling them to correct it before submitting the form.
RADINPUTMANAGER VALIDATION TYPES
We won't go in to fully detailing the RadInputManager's properties- there are great docs available for that- but I will highlight it's capabilities as a form input validation control. Via the control's simple configuration properties, you can accomplish any of these validations:
- Numeric - only accept numeric digits, specify Max and Min number range, specify negative number formatting, specify decimal formatting
- Date- specify allowed DateTime format, specify allowed DateTime range
- RegularExpression- specify any regular expression to validate
- TextBox- use as simple RequiredField validator
In addition to these specific validation types, RadInputManager allows you make any textbox required (essentially replacing the need for separate required field validators) and it enables any textbox's validation to be declaratively connected to a web service for powerful server-side validation. With a single control, you're replacing the need for separate TypeValidators, RangeValidators, RequiredFieldValidators, and CustomValidators for every input on your form.
RADINPUT VS. RADINPUTMANAGER
RadInput has been part of the Telerik RadControls for quite some time and- like the RadInputManager- it provides rich, validated text input. In fact, the RadInputManager is really just simplifying and optimizing the creation of RadInput controls on your page. Rather than manually adding a RadInput every place you need input validation and then initializing all of those controls separately, RadInputManager allows you to simplify the the configuration and optimize the initialization on the client. For example, if you needed to validate 5 numeric textboxes on a form, you might do this with RadInput:
<telerik:RadNumericTextBox ID="RadNumericTextBox1" runat="server" MaxValue="100" MinValue="0"> </telerik:RadNumericTextBox><br /> <telerik:RadNumericTextBox ID="RadNumericTextBox2" runat="server" MaxValue="100" MinValue="0"> </telerik:RadNumericTextBox><br /> <telerik:RadNumericTextBox ID="RadNumericTextBox3" runat="server" MaxValue="100" MinValue="0"> </telerik:RadNumericTextBox><br /> <telerik:RadNumericTextBox ID="RadNumericTextBox4" runat="server" MaxValue="100" MinValue="0"> </telerik:RadNumericTextBox><br /> <telerik:RadNumericTextBox ID="RadNumericTextBox5" runat="server" MaxValue="100" MinValue="0"> </telerik:RadNumericTextBox><br />
<telerik:RadInputManager runat="server" ID="radInputManager1"> <telerik:NumericTextBoxSetting MaxValue="100" MinValue="0"> <Validation IsRequired="true" /> <TargetControls> <telerik:TargetInput ControlID="TextBox1" /> <telerik:TargetInput ControlID="TextBox2" /> <telerik:TargetInput ControlID="TextBox3" /> <telerik:TargetInput ControlID="TextBox4" /> <telerik:TargetInput ControlID="TextBox5" /> </TargetControls> </telerik:NumericTextBoxSetting> </telerik:RadInputManager>
IMPACT ON PERFORMANCEWhen you use RadInputManager instead of RadInput, you're optimizing your page in two ways:
- You're reducing the bytes sent over the wire
- You're reducing the page initialization time
As a follow-up, we'll also re-run the tests- both with RadInput and RadInputManager- with the RadManagers to see how they affect overall page performance.
Bytes Over the Wire
When it comes to page load time, we also see a significant gain in performance with RadInputManager. Since the Manager can coordinate the initialization of the validation logic (as opposed to having 40 separate controls trying to initialize on page load with RadInput), overall page load time can be reduced. In these tests, the page with RadInputManager took an average of 23% less time to load than the page with RadInput controls. Page load performance was even better when the RadManagers (RadScriptManager and RadStyleSheetManager, for the unfamiliar) were added, extending RadInputManager's benefit to about 27% less loading time while cutting total requests in half (from 11 to 5).
OPTIMIZATION TIP SUMMARY
RadInput and RadInputManager are two very capable input validation controls. Both have features that make them compelling- such as RadInput's support for numeric "spinners" and RadInputManager's support for RequiredFields- so it's important to pick the right control when designing your pages. For richer UI with more interactive controls, RadInput is currently your best choice. For top performance and highly optimized pages, RadInputManager is the best choice for a few simple reasons:
- It reduces the bytes sent over the wire and has a better caching story
- It is much faster to configure than RadInput or traditional ASP.NET validation controls
- It improves overall page load performance