San Diego Code Camp

Thanks to all who attended my presentations at the San Diego Code Camp.  Here are the slides and code samples. Sorry for the delay in posting these, the past week was extremely hectic at work! 🙂

    • What’s New in MVC 2
      Download the Powerpoint slides.
      Download the
      Sample Project
      Download the Asynchronous Controller Example
    • ASP.NET MVC 2 Best Practices 1
      Download the Powerpoint slides.
      Download the ToDoList.Bad projectThis is an example of poorly created mvc application. Some of the problems with it:

      • Data Access Code (linq 2 sql in this case) is placed in the controller instead of a business layer.
      • Action method extracts value from Request.Form instead of action method input parameters.
      • Validation is in the controller and is repeated across multiple actions via copy paste.
      • Controller creates html as a string. (Violates the mvc pattern)
      • PRG (Post-Redirect-Get) pattern not used. After a post, a user clicking refresh can cause data to be modified again!
      • Code Duplication via copy paste. Violates DRY (don’t repeat yourself) principle.

      Download the ToDoList project
      Here’s the same project but built using a good separation of concerns and unit testing.

      Download the ExcelService project
      I didn’t get a chance to demo this at code camp as we ran out of time. The Excel service library allows you to easily take an easting model collection and render a binary excel file.

Advertisements

Configuring Telerik Extensions for ASP.NET MVC on a new project

In this post, I’m going to show you to set up the Telerik Extensions for mvc 2 on a new asp.net mvc website.

The Telerik Extensions provide some great ui tools that add extra polish to any web application. My favorite of their mvc controls is their grid control. Using the grid control is incredibly easy and with a few lines of code in your view you get a stylized grid with out of the box support for filtering, sorting and paging.

So let’s get started. First go download the extensions from this site (you will have to register, but it is free):
http://www.telerik.com/products/aspnet-mvc.aspx

Click the manual installation icon to download the zip file. If you choose to you can download the documentation file separately (this is a good idea).

After downloading the file extract the files to a location on your hard drive and make note of that (I put the files in c:\telerik)

Read the EULA to make sure it fits in with your project requirements.

Now go create a new asp.net mvc project in Visual Studio. When asked if you want to create an asp.net mvc test project, pick no.
Go back to the folder where you unzipped the telerik mvc extensions (c:\telerik in my case).

Open the content folder. In there you will find a folder called 2010.1.309 (as of this writing , future releases will have different dates). Copy this folder to your content folder.

Note: You might be tempted to directly copy the folders inside 2010.1.309 to your content folder, don’t. Copying the entire folder has the added benefit in that it makes upgrading extremely easy. You never have to reference this folder directly.

Go back to the telerik folder and go into the scripts. Copy the dated folder in there into your scripts folder.

Note: Just like the content folder, copy the entire folder and not individual script files inside it. This will make upgrading easy.

In your asp.net mvc folder create a new folder called Lib.

Now go back to the telerik folder and go into the Binaries folder.

Then go into the mvc2 folder. In there you will find two files: Telerik.Web.Mvc.dll & Telerik.Web.Mvc.xml. Copy both those files to the Lib folder in your mvc project.



Now in your mvc project. Right click on the References section and select “Add Reference”.  Click on the “Browse” tab and open the Lib folder. Then select Telerik.Web.Mvc.dll to add it to your project
Open your web.config file and go to the namespaces section.

Add the following namespace to the list “Telerik.Web.Mvc.UI”

    <pages>
      <namespaces>
        <add namespace="System.Web.Mvc" />
        <add namespace="System.Web.Mvc.Ajax" />
        <add namespace="System.Web.Mvc.Html" />
        <add namespace="System.Web.Routing" />
        <add namespace="Telerik.Web.Mvc.UI" />
      </namespaces>
    </pages>

Next, go into the views folder and open the Shared folder. Double click the site.master file to open the master page.
Modify the head section to include the following telerik declaration

<head runat="server">
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
    <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
    <%= Html.Telerik().StyleSheetRegistrar()
        .DefaultGroup(group => group.Add("telerik.common.css")
                                    .Add("telerik.vista.css"))
    %>

</head>

Go to the bottom of the file, before the ending body tag add the following line

            <div id="footer">
            </div>
        </div>
    </div>
     <%= Html.Telerik().ScriptRegistrar() %>
</body>
</html>

That’s it! Now, your ready to use the telerik extensions for asp.net mvc. For a working example see the following project.

While the steps outlined above may seem cumbersome, once you become familiar with it, you will find setting up a new project a quick and easy task. In a future post I’m going to describe how to use the grid control in an asp.net mvc application.