Razor MVC3 Quick Reference (comparison with ASP.NET)

A good Razor quick reference page found by my friend Petro.  It compares Razor syntax with ASP.NET for those migrating.

http://haacked.com/archive/2011/01/06/razor-syntax-quick-reference.aspx

Nice cheat sheet on many HTML5 and CSS3 features

Here is a nice cheat sheet for some of the more requested items related to HTML5 and CSS3.  Not too bad.

Stories In Flight

ASP.NET generic content box with title and body

Here is a quick example of creating a simple ASP.NET web control that allow you to have a region/box that contains a title and body where each of three elements can each have their own CSS class.

You can use the content box in a web page like:

Code:

using System.Web.UI.WebControls;

namespace CarverPainting
{
   public class ContentBox : Panel
   {
      public string CssClassBody
      {
         get { return base.CssClass; }
         set { base.CssClass = value; }
      }

      public override string CssClass
      {
         get
         {
            return ViewState["CssClassMain"] == null ? string.Empty : ViewState["CssClassMain"].ToString();
         }

         set
         {
            ViewState["CssClassMain"] = value;
         }
      }

      public string CssClassTitle
      {
         get
         {
            return ViewState["CssClassTitle"] == null ? string.Empty : ViewState["CssClassTitle"].ToString();
         }

         set
         {
            ViewState["CssClassTitle"] = value;
         }
      }

      public string Title
      {
         get
         {
            return ViewState["Title"] == null ? string.Empty : ViewState["Title"].ToString();
         }

         set
         {
            ViewState["Title"] = value;
         }
      }

      protected override void Render(System.Web.UIHtmlTextWriter writer)
      {
         bool hasClass = !string.IsNullOrWhiteSpace(CssClass);
         bool hasClassTitle = !string.IsNullOrWhiteSpace(CssClassTitle);
         bool hasClassBody = !string.IsNullOrWhiteSpace(CssClassBody);

         // contentbox class
         writer.Write("<div{0}>", hasClass ? string.Format(" class=\"{0}\"", CssClass) : string.Empty);

         if (!string.IsNullOrWhiteSpace(Title))
         {
            writer.Write("<div{0}>{1}</div>", hasClassTitle ? string.Format(" class=\"{0}\"", CssClassTitle) : string.Empty, Title);
         }

         base.Render(writer);

         // contentbox class
         writer.Write("</div>");
      }
   }
}

Using dotlesscss with Visual Studio and IIS

I've started to use LESS the dynamic stylesheet language with Microsoft's ASP.NET.  For starters, it really does help write and maintain stylesheets.  The .NET version can be downloaded at http://www.dotlesscss.org/.

I did however run into an issue when I deployed my development code to a production server.  It turns out that the Visual Studio 2010 web server handles the dotlesscss DLL differently from IIS 7.5.  In a nutshell, to use dotlesscss in both environments (local, production) without having to made changes to one of the environments the setup I use is:

1. Set my web project to use IIS Express (separate download from Microsoft).
2. Add the following items to my web.config file

xml version="1.0" encoding="utf-8"?>

<configuration>
   <configSections>
      <section name="dotless" type="dotless.Core.configuration.DotlessConfigurationSectionHandler,dotless.Core" />
   configSections>
   <system.web>
      <compilation debug="true" targetFramework="4.0" />
      <pages>
         <controls>
            <add tagPrefix="ajaxToolkit" assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" />
         controls>
      pages>
   system.web>
   <system.webServer>
      <handlers>
         <add name="dotless" type="dotless.Core.LessCssHttpHandler,dotless.Core" path="*.less.css" verb="*"/>
      handlers>
   system.webServer>
   <dotless minifyCss="false" cache="false" />
configuration>