# Friday, May 29, 2009

I have a few issues with the standard ASP.NET MVC view engine.  First off it is too verbose…you have type too much and in my opinion the views don’t look like html.  Luckily there are alternatives.  One of the most popular ASP.NET MVC view engine replacements is Spark.  Spark is replacement view engine that allows you to type less and makes your Views much easier to read.  So for part 3 of NerdDinnerAdvanced I am replacing the built in ASP.NET MVC view engine with Spark.

Replacing the view engine in the NerdDinnerAdvanced project was very straight forward.  Here are the steps.

    1. Reference Spark.dll and Spark.Web.MVC.dll in NerdDinnerAdvanced.UI
      Spark
    2. Register Spark as a view engine in Global.asax Application_Start
      /// <summary>
      /// Application Start
      /// </summary>
      protected void Application_Start() {
          RegisterRoutes(RouteTable.Routes);
          //Wire Up Spark as our ViewEngine (Step 1)
          SparkEngineStarter.RegisterViewEngine();
          //Initialize IoC
          InversionOfControlHelper.Initialize();
          //Wire up controller factory
          ControllerBuilder.Current.SetControllerFactory(new IoCControllerFactory());
      }
    3. Add a declaration for the Spark configuration section to the Web.config
      <!-- Spark Config Section Declaration (Step 2) -->
      <section name="spark" type="Spark.Configuration.SparkSectionHandler, Spark"/>
    4. Add Spark configuration to the Web.config
      <!-- Spark Configuration Section -->
      <spark>
          <compilation debug="true">
            <assemblies>
              <add assembly="NerdDinnerAdvanced.UI"/>
              <add assembly="System.Web.Mvc, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
            </assemblies>
          </compilation>
          <pages>
            <namespaces>
              <add namespace="System.Collections.Generic"/>
              <add namespace="System.Linq"/>
              <add namespace="System.Web.Mvc"/>
              <add namespace="System.Web.Mvc.Html"/>
              <add namespace="System.Web.Mvc.Ajax"/>
              <add namespace="NerdDinnerAdvanced.Domain.Models" />
            </namespaces>
          </pages>
          <use content="MainContent" />
      </spark>
    5. Create Spark master page

      How master pages are implemented in Spark is very cool.  I am not going to go into details all the ways you can implement master pages in Spark, but you can check it out here.  I am going to use the default behavior in which Spark will look for a file name Application.spark in either the Views/Layout or Views/Shared folders and will apply that to all the views in project.  So I no longer have to explicitly tell my view what master to use. So to setup our master page we need to;

      1. Add a new class file under Views –> Shared and name it Application.spark.
      2. Copy all the code from Site.master into Application.spark
      3. Remove the Page directive
      4. Remove the title content place holder
      5. Replace the main content place holder with Spark content div
        <div id="content">
        </div>
      6. Replace all '<%= xxx %>' with '${ xxx }'
      7. You should end up with…
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head runat="server">
            <title></title>
            <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
            <script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
            <script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>    
            <script src="/Scripts/jQuery-1.3.2.js" type="text/javascript"></script>
        </head>
        <body>
            <div class="page">
         
                <div id="header">
                    <div id="title">
                        <h1>Nerd Dinner For The Real World</h1>
                    </div>
                      
                    <div id="logindisplay">
                        <% Html.RenderPartial("LogOnUserControl"); %>
                    </div> 
                    <div id="menucontainer">
                        <ul id="menu">              
                            <li>${ Html.ActionLink("Find Dinner", "Index", "Dinners")}</li>
                            <li>${ Html.ActionLink("Host Dinner", "Create", "Dinners")}</li>
                            <li>${ Html.ActionLink("About","About","Home") }</li>
                        </ul>
                    </div>
                </div>
         
                <div id="main">
                    <div id="content">
                        <use content="MainContent" />
                    </div>
                    <div id="footer">
                    </div>
                </div>
            </div>
        </body>
        </html>
    6. Convert our first page.  Home/Index.aspx
      1. Rename Index.aspx to Index.spark
      2. Remove Page directive
      3. Remove Title content
      4. Replace ASP main content tag with Spark main content tag
      5. Replace all '<%= xxx %>' with '${ xxx }'
    7. Now we ran it!  What to notice here is first of all it runs.  The second thing to notice is the really cool part.  We are seeing a view created using the Spark View Engine but we are displaying a partial view created using the standard ASP.NET MVC View Engine.  The Log In/Out user control is still being rendered by the default view engine.
    8. Now we are ready to convert the remaining pages.  One difference from the built in view engine is how you tell the view about the model.  You need to explicitly specify what model the view uses.
      <viewdata model="NerdDinnerAdvanced.UI.Utility.PaginatedCollection<NerdDinnerAdvanced.Domain.Models.Dinner>"/>


The complete code can be downloaded here.  Stay tuned for part 4.

posted on Friday, May 29, 2009 11:05:00 PM (Central Daylight Time, UTC-05:00)  #    Comments [7]