One of the new controls in the 10.2 release includes the WebRating control. What makes this control special is that this is one of the first of our controls to feature HTML5 rendering. When rendered to the browser, the default appearance is a standard star rating layout:
When you view source of the page that hosts the control, you may see XHTML (HTML4) or HTML5 markup - depending on the format of the control and the client’s environment. The following screen shot depicts the control’s markup when it is rendering in HTML5 mode:
The CANVAS element is added explicitly to the DOM while the associated script adds in individual rating items. The script is also responsible for setting the appropriate values and wiring up the necessary interactivity.
During initialization, the control builds the canvas by examining the applied CSS and then figures out how to render the images. The images are rendered by first drawing the empty images, followed by “selected” and then “hovered” images (if necessary). Animations for the control work during mouse and keyboard interactions.
Note: One of the interesting possibilities about the canvas support is that developers could draw additional information on the canvas to highlight extra parts of the rating!
In order to make the HTML5 mode possible, you must set EnableHtml5Redering equal to true:
If the browser in question does not support HTML5 or the EnableHtml5Rendering flag is set to false, then markup like the following is generated:
The HTML4 markup will render 3 DIVs along with a corresponding number of spans for each image in the rating range.
During design time, the control will always render in the non-HTML5 mode as for the time being Visual Studio does not support HTML5 tags.
You may safely turn on EnableHtml5Rendering and rest assured that older browsers will not crash when encountering the control. The WebRating uses a resolved property that looks at EnableHtml5Rendering and the browser context to see if it is running inside a HTML5 capable browser. The control will only render HTML5 markup if the flag is enabled AND the browser supports the updated markup.
There are a number of other notable features and behaviors of the WebRating control.
Should you choose to allow your users to rate an item more than once, the control will track the number of times rated and also expose the average rating value.
The rating metaphor may be applied under a number of different contexts. The image below shows you how you can use custom images to communicate a speed rating – from a snail’s pace to a rocket’s blast:
The WebRating control will seamlessly integrate with the WebDataGrid as a custom editor provider.
Note: To see exactly how to setup this editing scenario, watch this introductory video on the WebRating control.
Some of the most commonly used properties are shown in the screenshot below. Rating precision options include whole, exact and half.
The final “goodness” I’d like to point out is how the control is entirely CSS based. Instead of building nodes that point to explicit image locations, the control allows you to point to CSS classes for the different states of the control. This allows you to completely style the control using CSS.
Note: An entirely CSS-based approach allows you to have full control over the look and feel of the control. Should you ever add a feature to allow uses to switch style sheets for the application, the WebRating control will respond seamlessly to the changes.
I hope you’ve enjoyed getting to know the WebRating control!
Special thanks to David Young on our ASP.NET Product Team for help writing this article.