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:
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:
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:
ASPX <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 />
Notice the duplication of properties we have to set for each control. Also note that if we want to change the validation in the future, we have to replace the entire input control. With RadInputManager, the same configuration might look like this:
ASPX <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>
Where in the above code snippet I have "TextBox1" through 5 somewhere on my form. Now I'm only setting my validation rules once, and I even have the ability set the "IsRequired" flag (something not available with RadInput). If I need to change the validation of a TextBox in the future, it's a simple matter of defining a new "Validation Setting" in my RadInputManager and adding the TextBox to its "TargetControls" collection.
IMPACT ON PERFORMANCE
When you use RadInputManager instead of RadInput, you're optimizing your page in two ways:
1) You're reducing the bytes sent over the wire
2) 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
Average Page Load Time
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:
Hopefully the evidence presented in this article will help you understand the benefit of using RadInputManager in your own projects and show you yet another way Telerik is trying to deliver more than expected when it comes to helping you optimize your web applications.
@toddanglin on Twitter