Click here to Skip to main content
15,867,986 members
Articles / Kendo UI

Guide in Using Kendo UI with S#arp Architecture

Rate me:
Please Sign up or sign in to vote.
5.00/5 (1 vote)
4 Oct 2013CPOL4 min read 9.7K   2  
This is a guide in using Kendo UI with S#arp architecture

This article appears in the Third Party Products and Tools section. Articles in this section are for the members only and must not be used to promote or advertise products in any way, shape or form. Please report any spam or advertising.

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/).

    01 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.

    02 Select Template

  3. Now click deploy.

    03 Generating

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

    04 Completed

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

    05 Output Folders

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

    06 Output Folders 2

  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.

    07 Open

  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.

    08 Set Web 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.

    09 Configure nHibernate

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

    11 Running

  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.

    12 Convert App To Kendo

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

    13 Start Convert

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

    14 Restore Missing Packages

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

    15 Download Optimization Framework

  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"));
            }
        }
    }

    16 Dowload Latest jQuery

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

    17 Remove all old references

  18. Replace with the bundled lines:
    JavaScript
    @Styles.Render("~/content/css")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/mywebapp")
    18 Add bundled references
  19. Register them on Global.asax.
    BundleConfig.RegisterBundles(BundleTable.Bundles);

    Also register your sitemap.

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

    19 Modify Global.asax

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

    20 Add Sitemap

  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.

    21 Menu Added

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

    22 Adding References (Newtonsoft)

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

    23 Adding References (Newtonsoft)

  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.

    24 Adding References (Sharp nHibernate)

  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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Technical Lead
New Zealand New Zealand
http://nz.linkedin.com/in/macaalay
http://macaalay.com/

Comments and Discussions

 
-- There are no messages in this forum --