Optimization Tips: RadInput vs. RadInputManager

[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.

Continue reading RadInputManager optimization tip

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:

1. You add standard ASP.NET TextBoxes to your form where you want to collect values
2. You configure RadInputManager to apply RegularExpression, Numeric, DateTime, or RequiredField validations the appropriate textboxes
3. 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:

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

To observe this, we'll create a simple test that is made-up of two pages: one page has 40 RadInput controls (10 of each flavor, Numeric, DateInput, MaskedTextBox, and TextBox) and the other 40 standard TextBox controls with RadInputManager (configured with 10 controls for each setting type, Numeric, Date, RegEx, and TextBox). We'll load both of these pages in FireFox six times (on an empty cache each time) and measure total bytes received, JavaScript bytes received, HTML bytes received, requests, and average page load time. We'll then compare the numbers to see the relative difference (not absolute, since absolute times are impacted by many factors) RadInputManager has on page performance.

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

This chart shows us the difference in bytes sent over the wire when using RadInput vs. RadInputManager for the exact same scenario (40 inputs). I did not include the results of the tests with the RadManagers because they do not significantly effect the bytes sent to the client (in this test, they only reduced total bytes by about 1%). What we see right away is that RadInputManager reduces the total bytes sent to the client by about 22%, but it sends about 5% more JavaScript to the client than RadInput. To achieve he overall reduction, RadInputManager is sending much less HTML- about 55% less in these tests. That's significant for one very important reason:

When a page is requested, all page resources (like JavaScript) will be cached and the cached versions will be used on subsequent page loads. The HTML, however, will be requested and sent every time the page loads.

So while RadInputManager does send slightly more JavaScript, those resource gets cached on the initial page request and then the lightweight HTML gets exchanged after that. With RadInput, you're passing twice as much HTML for every page request.

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:

• 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

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.