Posts
202
Comments
1112
Trackbacks
51
August 2011 Entries
MVC Scaffolding Course on Pluralsight–Free for the Next 24 Hours!

I recently had the pleasure of creating a course for Pluralsight on MVC Scaffolding. For the next 24-hours the course will be completely free! Click here to view the course now.

I’ve divided the course up into three modules. In the first module, I cover everything you need to know to be quickly productive with MVC Scaffolding. This includes mastering the command line, understanding one-to-many relationships, and scaffolding Actions and Unit Tests.

In the second module, I do a deep dive on customizing MVC Scaffolding. In my opinion, this is really the sweet spot for MVC Scaffolding. I always say, if you don’t like the output Scaffolding produces in some area, change it! The beauty of MVC Scaffolding is that it was built on top of T4Scaffolding with true extensibility in mind. In this module, I show how to customize view and controller templates as well as taking a deeper dive on understanding Scaffolders, how they function, and what they do.

In the third module, I deep dive on building your own custom scaffolders. In fact, to emphasize the extensibility, I build a custom scaffolder *outside* the context of MVC. Instead, I build a custom scaffolder for the WCF Web API where I essentially show how I built Web API Scaffolding on CodePlex. In this module, I show not only the basics of creating your own custom scaffolder, but also how to leverage the built-in T4 Scaffolders and built-in T4 Commandlets to build a multi-file scaffolder. I also show how you package your custom scaffolder into a NuGet package for easy distribution.

Enjoy!

Posted On Monday, August 22, 2011 11:23 PM | Comments (4)
Studio for Wijmo MVC Review

I was recently asked to review Studio for Wijmo MVC by Component One and, overall, I am impressed. There are 2 major components of this. The first is Wijmo Complete which is a collection of over 30 UI widgets (very similar to jQuery UI). The second is Wijmo Scaffolding for MVC which builds upon the scaffolding that was released as part of the MVC 3 Tools Update (note: is does *not* build on top of powershell-based MVC Scaffolding which Microsoft released earlier this year).

Some of the Wijmo widgets have corresponding widgets in jQuery UI – the idea is for them to *extend* jQuery UI. For example:

In addition to these widgets, Wijmo contains several pretty cool widgets that have some functionality that you don’t get out of the box with jQuery UI. For example, the Wijmo Charts are stunning and really enable a rich experience with minimal implementation required.

wijmochart

 

Also, the Menu widget is very rich and highly customizable.

wijmomenu

 

The Wijmo Grid is another widget that is extremely impressive and is on par with jqGrid. These rich widgets like the Chart, Menu, Grid, etc. are where Wijmo really shines. Although Wijmo does offer some widgets that are similar to what you can find in other libraries like jQuery UI, the fact that they bundle all of them together and add several widgets that you cannot find in jQuery UI make it quite compelling. Additionally, the Wijmo Documentation is comprehensive as well.

When MVC first came out, many Microsoft control vendors went down the path of trying to create MVC Helpers for complex controls that were for C# centric. This often led to an awkward API that didn’t feel right in web development. Fortunately, Component One did not take this path with Wijmo MVC – instead the widgets follow the typical jQuery API so could be used outside the context of MVC. However, they do add some niceties that integrate nicely with some MVC concepts (e.g., Data Annotation metadata on view models) so that if you *are* using MVC, you get some nice value adds.

Wijmo Scaffolding for MVC

The Wijmo Scaffolding is a nice feature for quickly getting up and running with Wijmo controls but there were a couple of aspects that fell a little short of my expectations overall. When I first heard about Wijmo Scaffolding I was initially very excited because I thought it was integrated with PowelShell-based MVC Scaffolding. However, that is not the case. Specifically, Wijmo Scaffolding comes with some replacement T4 templates for the templates that work with the MVC 3 Tools Update scaffolding dialog (i.e., the new “Add Controller” dialog). The differences between the Wijmo templates and the default templates are not earth shattering. The primary differences are:

  • Wijmo adds additional CSS styles to support the Wijmo styles
  • Wijmo templates work with the 3 Editor Templates that ship with Wijmo Scaffolding
  • Wijmo templates do *not* take into account one-to-many relationships

Let’s take an example walkthrough for building something with Wijmo Scaffolding. Consider view models that look like this:

   1:  public class Task
   2:  {
   3:      public int Id { get; set; }
   4:   
   5:      [Required]
   6:      public string Name { get; set; }
   7:   
   8:      [DisplayName("Due Date")]
   9:      [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:d}")]
  10:      public DateTime? DueDate { get; set; }
  11:   
  12:      public int StatusId { get; set; }
  13:      public virtual Status Status { get; set; }
  14:   
  15:      [StringLength(100)]
  16:      public string Notes { get; set; }
  17:  }
  18:   
  19:  public class Status
  20:  {
  21:      public int Id { get; set; }
  22:      public string Name { get; set; }
  23:  }

 

Notice there is a typical one-to-many relationship between Status and Task. After going through the standard “Add Controller” dialog box with Wijmo scaffolding, the resulting “Create” screen looks like this:

wijmoCreate

I’ve got nice looking styles and the date field conveniently gets the Wijmo Input Date widget. However, the foreign key to StatusId is not taken into account automatically as it would be with traditional MVC Scaffolding. This would be a great enhancement for Component One to make.

After adding a few items, the List view, which gets scaffolded using the Wijmo grid widget, looks like this:

wijmoGrid

 

There’s automatic sorting/paging and the styles look nice as well (though we have the same pesky problem with the foreign key on StatusId). However, when I sorted by the “Name” column, although the alphabetical sort worked great, the visual styles were lost:

wijmoGrid

 

This may be just a minor bug but I did not dig into trying to debug it.

Wijmo MVC comes with 3 Editor templates:

  • DateTime – which uses the Wijmo Input Date widget
  • Decimal – which uses the Wijmo Input Number widget based on Data Annotations [Range] attribute
  • IntSlider – which uses the Wijmo Int Slider widget also taking into account the Data Annotations [Range] attributes. Note: since this editor is not named for the Integer data type, it is meant to be used by invoking a [UIHint].

These editor templates all do the intended job nicely. However, as a small nitpick, I’d probably choose to change the implementation slightly. The DateTime editor looks like this:

   1:  @inherits System.Web.Mvc.WebViewPage<System.DateTime?>
   2:  @if (Model.HasValue)
   3:  { 
   4:      @Html.TextBox("", (Model.Value), new { @class = "datePicker" })
   5:  }
   6:  else {
   7:      @Html.TextBox("", "", new { @class = "datePicker" })
   8:      
   9:  }
  10:  <script type='text/javascript'>
  11:      $(document).ready(function () {
  12:          $("#@ViewData.TemplateInfo.GetFullHtmlFieldId("")").wijinputdate({ showTrigger: true});
  13:      });
  14:  </script>

 

Since the wijinputdate() widget is applied directly the the element itself (as seen on line #12), it means that you’ll have a snippet of jQuery like this interspersed throughout your markup for *every* DateTime on your page:

   1:  <script type='text/javascript'>
   2:      $(document).ready(function () {
   3:          $("#DueDate").wijinputdate({ showTrigger: true});
   4:      });
   5:  </script>

 

My preference is that they take a more “unobtrusive” approach. For example, since they are already adding a class=”datePicker” to the text box, all we’d need to do is to add 1 line of jQuery to the page that would take care of *all* of these like this:

   1:  <script type="text/javascript">
   2:      $(function () {
   3:          $(".datePicker").wijinputdate({ showTrigger: true });
   4:      });
   5:  </script>

So rather than having multiple jQuery calls through the page for this – it’s just one (i.e., any element with a class of “datePicker”). This would also make the payload sent to the browser smaller as well. But again, this is a small nitpick.

 

Conclusion

Overall, I was very impressed with Wijmo MVC and I think it is a compelling option for any developer building rich MVC applications. Although the widgets can be used for any jQuery solution, the integration with MVC is a nicety that makes things more seamless. In my opinion, the sweet spot for Wijmo are the incredibly rich widgets such as the charts, graphs, menus, and grids. My constructive suggestions are that I’d like to see Component One extend the scaffolding support by supporting the integration with the Powershell-based MVC Scaffolding. At the same time, it would not be difficult to add support for foreign keys of one-to-many relationships – this would also enable Repository support that MVC Scaffolding provides as well. Overall, if you’re looking for a cohesive suite of UI widgets for your MVC application, I’d definitely recommend checking out Studio for Wijmo MVC.

Posted On Sunday, August 21, 2011 11:49 PM | Comments (0)

View Steve Michelotti's profile on LinkedIn

profile for Steve Michelotti at Stack Overflow, Q&A for professional and enthusiast programmers




Google My Blog

Tag Cloud