I recently spoke at a Codecamp in Pittsburgh (fine city by the way) about moving from ASP.NET Webforms to ASP.NET MVC. I even wrote an accompanying blog article if you’re interested. As I was presenting, I realized I didn’t leave enough time to talk about the “web control” story in MVC. I promised on the spot to post an article about that very thing, and, so, here it is!
One reason a lot of Webforms developers might be hesitant to move to MVC is because the apparent lack of web controls. Web controls save time and make development of ASP.NET applications a breeze (sometimes). So, if developers want to branch out and get into MVC, they need to know that THERE ARE wonderful control-like things they can use with ease. Here are some examples to get you rolling:
Data Sources:
In WebForms, it’s typical to drag a data source like ObjectDataSource, XmlDataSource, or SqlDataSource onto your page in order to provide data to a control like a GridView or Repeater. We have no such construct in MVC. The closest equivalent can be found in the concept of a “view model”. A view model is an object that has been passed to the view in order to populate the it with data from the controller. With WebForms, you usually think of the page going out to get it’s data. In MVC, the view is given the data. It’s a subtle difference, but an important one. So, when you find yourself in MVC and you need to have dynamic data on your view, think “view model”.
GridViews:
The GridView is possibly one of the most important controls for a line-of-business application developer. It’s also one of the more involved controls to mimic since there’s so much going on (paging, sorting, grouping, searching, etc). However, there’s a company called Trirand who has put together an open source library that does what the GridView does plus a LOT more. The library is called JQuery Grid and is written completely in JavaScript using JQuery (of course). Check out a ton of demos and example code here. You can download JQuery Grid (jqGrid for short) from their team blog. Also, here’s an article by Phil Haack that explains one way of using jqGrid with MVC. Even though I mentioned view models above as the preferred way to get data to a view, you should also look into using a JsonResult (from the controller) to populate a JQuery Grid.
Labels:
I know this one might seem like a no brainer, but I remember using the Label control a lot when I was developing Webforms apps. When the Label renders down to HTML, you get a <span> tag surrounding your text. Also, you would set the value of the Label from code-behind (though, with a bunch of ViewState mess). Instead of a Label control adding tags for you, if you’re so inclined, you can easily add your own <span> tags. Otherwise, let your model do it’s thing. If the “Name” property on my view model has been set to “Byron”, then <%=Model.Name%> will render down to “Byron” (without the quotes). Sorry if that’s too simplistic, but I promised some web control replacements, and I aim to please.
TextBoxes:
The TextBox is an incredibly important UI control. In Webforms, you just drag a TextBox control onto your design surface and change its ID to something reachable from code-behind. With MVC, its almost the same, minus the clicking and dragging. Just enter <%=Html.TextBoxFor(x=>x.Name)%> into your view. This will render down to something like <input id=’Name’ name=’Name’ value=’Byron’ />. Pretty clean. Pretty easy.
Calendars:
I have to admit, the first time I used the old ASP.NET Calendar control was also the last. That thing was hard to use and it looked like death warmed over. Eventually, the AJAX Toolkit came out with a much better rendition, but I had already fallen in love with another open source calendar control. Nevertheless, those aren’t available to me in MVC. So, I just use a textbox and apply JQuery UI’s Datepicker plugin. Here’s the documentation page for the Datepicker plugin. You can download JQuery UI from the same site. If my model has a property on is like “Birthdate”, I could just enter <%=Html.TextBoxFor(x=>x.Birthdate, new { @class=”datepicker” })%> into my view. This would eventually get rendered down to something like <input type=’text’ id=’Birthdate’ name=’Birthdate’ value=’11/12/1978 17:35:00′ class=’datepicker’ />. Now, assuming you have a reference to JQuery UI in your view (or master) somewhere, you can equip your new textbox with a JQuery calendar by adding $(‘.datepicker’).datepicker(); somewhere in your JavaScript section.
Lists and Repeaters:
When a GridView won’t cut it, many WebForms developers turn to ListViews or Repeaters. ListViews were my particular favorite once I got the hang of them. If you’re familiar with these great controls, you will be right at home with MVC. As mentioned above, when you want to get data to a view, you pass it an object called a view model. The view model might contain a list of books or people along with other data that the view can use. If you have such a list, just code the iteration in HTML using a bit of c# to help it along (gasp! mixing c# with HTML?? — yes, get over it). You could do something like this:
<ul>
<%foreach(var book in Model.Books) {%>
<li><%=book.Name%></li>
<%}%>
</ul>
I think you get the point.
Try it out! Between JQuery, MVC’s HTML Helpers, and your own noggin’, you should be getting the web control warm fuzzies in no time. After the initial learning curve, you’ll be cranking out apps left and right.
