Infragistics jQuery Rating Control in WebMatrix with Razor

The guys in Engineering are hard at work and are experimenting with native jQuery plug-in controls for the web. With the recent release of WebMatrix and the Razor view engine I thought this might be a good time to show off some of what’s to come.

Note: This code is pre-beta and is not yet available for download. I will post again when we are ready to announce release dates.

The following screenshot shows the client rating control rendered with associated movies and their rating values:

The sample is very easy to construct and gave me good reason to show off how you might use it in WebMatrix/Razor:

To dig in a bit, let’s zoom in just on the code. The image below depicts how I am pulling movie information from the Movies table and setting the rows aside in a variable. Then, after including the required CSS and JavaScript files, the rating control is configured during the jQuery ready handler:

The control is fed a few arguments to get it set up. The voteCount parameter represents the total number of possible votes for the rating, the value is the actual rating value and valueAsPercent tells the control whether or not to treat the value as a percent of the total or as a numeric value in the range.

In the body of the document, I prepared a table to have its contents constructed from a loop that injects the appropriate values from each row in the query result.

There you have it - simple and effective.

More to Come! 

Soon you’ll have access to an array of controls that will work great in ASP.NET WebForms, ASP.NET MVC, WebMatrix and on down the line to PHP and even static HTML files.

Fun times!