Guide in Using Kendo UI with S#arp Architecture

We have been using S#arp Architecture for quite sometime now and it has proved to be a good platform for some of the enterprise applications we developed in-house for our company. While it provided us a good platform for our web apps, it does not provide something that you can easily reuse for your presentation layer. That is where Kendo UI comes into play. Before we were using the old version called Telerik MVC, but since then, we upgraded to this newer version. This guide will be how to start a project using these two products.

Before we start, I am under the assumption that you have created your database with proper naming conventions that works with Fluent NHibernate. This means the following:

• Table in Plural Form (i.e., Employees, Positions, Departments)
• Table Primary Key is the Singular Form of the Table Name ending in Id (i.e., EmployeeId, PositionId, DepartmentId)
• Use Camel Case in any objects of your Database (i.e., ThisIsASampleDatabaseColumn)
• Define your Foreign Key relationships, maintain the same Naming to the Related Table Column.

Also, you should have Kendo UI for ASP.NET MVC installed in your development machine if not, you can get them here (http://www.kendoui.com/download.aspx).

Let's start.

1. Download and Install Templify, you can get the latest version here (http://opensource.endjin.com/templify/).

   

2. Download and install S#arp architecture, you can get the latest version here (http://sharparchitecture.net/downloads.htm). Once installed, run templify and deploy templify in the folder of your choice. Choose a template and a namespace, in this sample we call it MyWebApp.

   

3. Now click deploy.

   

4. Once finished, it will notify you in your notification bar.

   

5. Go to your folder and it should have a similar structure like this:

   

6. Go into the Solutions folder and your solution will be there.

   

7. You will notice it is created as a Visual Studio 2010 version, we don't want that so we will be opening it with Visual Studio 2012. I guess as of this moment, it is not a supported version but we’ve been using 2012 in a S#arp project for a year now and had deployed 2 applications without issues.

   

8. Once it opens, it will show you the upgrade notes. Go to your Presentation Layer, choose the Web Project and set it as StartUp Project.

   

9. Set up your database by going to NHibernate.config and choose your database server. If your Application name is the same as the database name (which I suggest you do) then there is no need to change the database name.

   

10. Upgrade your Project to use MVC 4. Follow this article.
11. Run your project for the first time.

    

12. Now let's convert your Website to use Kendo UI. Right click your web project, choose Kendo UI for ASP.NET MVC, then click convert.

    

13. Tick only Copy Editor Templates, then click next.

    

14. Once finished, right click on references and Manage NuGet packages. Restore any missing packages.

    

15. Add and Install Microsoft.AspNet.Web.Optimization, this is used for bundling and optimizing CSS and JS files.

    

16. Add the following:
    • App_Start folder
    • Create a BundleConfig.cs
    • Add jquery-1.9.1.min.js
    • Add jquery.json-2.4.min.js
    • Add jquery.unobtrusive-ajax.min.js
    • Add jquery.validate.js
    • Add jquery.validate.unobtrusive.js

    Copy and paste this BundleConfig.cs code:

    C#

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Optimization;
    namespace MyWebApp.Web.Mvc.App_Start
    {
        public class BundleConfig
        {
            public static void RegisterBundles(BundleCollection bundles)
            {
                // Clear all items from the default ignore list to allow 
                // minified CSS and JavaScript files to be included in debug mode
                bundles.IgnoreList.Clear();
    
                // Add back the default ignore list rules 
                // sans the ones which affect minified files and debug mode
                bundles.IgnoreList.Ignore("*.intellisense.js");
                bundles.IgnoreList.Ignore("*-vsdoc.js");
                bundles.IgnoreList.Ignore("*.debug.js", OptimizationMode.WhenEnabled);
    
                //Scripts Section
                bundles.Add(new ScriptBundle("~/bundles/jquery")
                    .Include("~/scripts/jquery-1.9.1.min.js")
                    .Include("~/scripts/jquery.validate.js")
                    .Include("~/scripts/jquery.unobtrusive-ajax.min.js")
                    .Include("~/scripts/jquery.validate.unobtrusive.min.js")
                    .Include("~/scripts/jquery.json-2.4.min.js"));
    
                //KendoSection
                bundles.Add(new ScriptBundle("~/bundles/mywebapp")
                    .Include("~/Scripts/Kendo/2013.1.514/jquery.unobtrusive-ajax.min.js")
                    .Include("~/scripts/kendo/2013.1.514/kendo.core.min.js")
                    .Include("~/scripts/kendo/2013.1.514/kendo.data.min.js")
                    .Include("~/scripts/kendo/2013.1.514/kendo.fx.min.js")
                    .Include("~/scripts/kendo/2013.1.514/kendo.popup.min.js")
                    .Include("~/scripts/kendo/2013.1.514/kendo.list.min.js")
                    .Include("~/scripts/kendo/2013.1.514/kendo.calendar.min.js")
                    .Include("~/scripts/kendo/2013.1.514/kendo.datepicker.min.js")
                    .Include("~/scripts/kendo/2013.1.514/kendo.numerictextbox.min.js")
                    .Include("~/scripts/kendo/2013.1.514/kendo.validator.min.js")
                    .Include("~/scripts/kendo/2013.1.514/kendo.menu.min.js")
                    .Include("~/scripts/kendo/2013.1.514/kendo.binder.min.js")
                    .Include("~/scripts/kendo/2013.1.514/kendo.dropdownlist.min.js")
                    .Include("~/scripts/kendo/2013.1.514/kendo.filtermenu.min.js")
                    .Include("~/scripts/kendo/2013.1.514/kendo.pager.min.js")
                    .Include("~/scripts/kendo/2013.1.514/kendo.sortable.min.js")
                    .Include("~/scripts/kendo/2013.1.514/kendo.userevents.min.js")
                    .Include("~/scripts/kendo/2013.1.514/kendo.draganddrop.min.js")
                    .Include("~/scripts/kendo/2013.1.514/kendo.groupable.min.js")
                    .Include("~/scripts/kendo/2013.1.514/kendo.editable.min.js")
                    .Include("~/scripts/kendo/2013.1.514/kendo.selectable.min.js")
                    .Include("~/scripts/kendo/2013.1.514/kendo.resizable.min.js")
                    .Include("~/scripts/kendo/2013.1.514/kendo.reorderable.min.js")
                    .Include("~/scripts/kendo/2013.1.514/kendo.grid.min.js")
                    .Include("~/scripts/kendo/2013.1.514/kendo.window.min.js")
                    .Include("~/scripts/kendo/2013.1.514/kendo.upload.min.js")
                    .Include("~/scripts/kendo/2013.1.514/kendo.aspnetmvc.min.js")
                    .Include("~/scripts/kendo/2013.1.514/cultures/kendo.culture.en-NZ.min.js")
                    .Include("~/scripts/mywebapp*"));
    
                //Css Section
                bundles.Add(new StyleBundle("~/content/css").Include(
                  "~/Content/Kendo/2013.1.514/kendo.common.min.css",
                  "~/Content/Kendo/2013.1.514/kendo.blueopal.min.css",
                  "~/Content/*.css"));
            }
        }
    }

    

17. Remove all old JS and CSS references in your Shared Layout. You can find them at MyWebApp.Web.Mvc/Views/Shared/_Layout.cshtml.

    

18. Replace with the bundled lines:
    JavaScript

    @Styles.Render("~/content/css")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/mywebapp")

    
19. Register them on Global.asax.

    BundleConfig.RegisterBundles(BundleTable.Bundles);

    Also register your sitemap.

    SiteMapManager.SiteMaps.Register<XmlSiteMap>("Web", sitemap => sitemap.Load());

    

20. Now add a site map. Right cick on your project, choose add, then Site Map.

    

21. Try using some Kendo UI components. Add a calendar on your Home -> Index. Replace the whole S#arp default page with something like this:
    JavaScript

    @{
        ViewBag.Title = "Home";
        Layout = "~/Views/Shared/_Layout.cshtml";
    }
    
    @(Html.Kendo().Calendar().Name("calendar"))

    Then add a menu on your Shared -> Layout, so replace the default one with something like this:

    HTML

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head id="Head1" runat="server">
        <meta http-equiv="Content-Type" 
        content="text/html; charset=iso-8859-1" />
    
        <title>@ViewBag.Title</title>
    
        @Styles.Render("~/content/css")
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/mywebapp")
    
    </head>
    <body>
        <div class="page">
            <div id="header">
                @(Html.Kendo().Menu()
                .Name("Menu")
                .HighlightPath(true)
                .BindTo("Web", (item, node) =>
                {
                    var url = node.Attributes["imageurl"];
                    if (url != null)
                        item.ImageUrl = node.Attributes["imageurl"].ToString();
                })
            )
            </div>
            <div id="mainContent">
                <div class="columnsContainer">
                    <div class="leftColumn">
                    </div>
                    <!--/leftColumn-->
                    <div class="rightColumn">
                        @RenderBody()
                    </div>
                    <!--/rightColumn-->
                    <div class="clear">
                    </div>
                </div>
                <!--/columnsContainer-->
            </div>
        </div>
        <!--/page-->
    </body>
    </html>

    Try to run your project. Then it should look something like this. At this stage, your website is ready but let's configure some compoments so your presentation layer can communicate with your Tasks Layer.

    

22. Update to the latest Json as S#arp uses 4.0.8.0.

    

23. We will be using Json 4.5.10 and you have to install this reference on your Presentation and Task layer.

    

24. Add also the SharpArch.Nhibernate on your task layer as you will be using it here. You can find it in your Referenced Assemblies folder.

    

25. Modify a part on your ComponentRegistrar.cs which you can find in the CastleWindsor folder of your Web Project.

    Old code should look like this:

    C#

    private static void AddTasksTo(IWindsorContainer container)
    {
        container.Register(
            AllTypes
                .FromAssemblyNamed("MyWebApp.Tasks")
                .Pick()
                .WithService.FirstNonGenericCoreInterface("MyWebApp.Domain"));
    }

    You have to change it to something like this:

    C#

    private static void AddTasksTo(IWindsorContainer container)
    {
        container.Register(
            AllTypes
                .FromAssemblyNamed("MyWebApp.Tasks")
                .InNamespace("MyWebApp.Tasks")
                .WithService.FirstNonGenericCoreInterface("MyWebApp.Domain"));
    }

You’re all good to go.

Early next week, I will be sharing an open source project I called Sharpener, this application will auto generate codes for you based on your database design. This means you don't need to manually code your Domain Object, Query and its interfaces, View Models, Controllers, View, Commands and CommandHandlers. This will save you lots of time and make sure that your project conforms to proper naming and programming conventions.

Filed under: Architecture, CodeProject, Programming
Tagged: C#, Kendo UI, S#arp Architecture