More than half a year ago I posted a similar guide but since then S#arp and Kendo upgraded so those articles will not be helpful for this new versions as there are some changes in both Frameworks. So here I am again creating this guide for this newer versions.
Like what I had said before we have been using S#arp Architecture for quite sometime now and it proved to be a good platform for some of the enterprise applications we developed in-house for our company, but lately I suddenly lost hope as there were no updates for S#arp but after checking several weeks ago there was an update after 2 years of no releases. Yay!
For a list of changes a look here
https://github.com/sharparchitecture/Sharp-Architecture/releases
You can also directly download them here
https://github.com/sharparchitecture/Sharp-Architecture/releases/download/2.1.2/SharpArch-2.1.2-nh-templify-package.zip
So lets start but before we do that let me tell you this article is taking into consideration that you have created your database with proper naming conventions that works with Fluent NHibernate. This means the following
- Table in Plural Form (ie. Employees, Positions, Departments)
- Table Primary Key is the Singular Form of the Table Name ending in Id (ie. EmployeeId, PositionId, DepartmentId)
- Use Camel Case in any objects of your Database (ie. 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 2013.2 or greater installed in your development machine if not, you can get them here (http://www.kendoui.com/download.aspx)
Now lets start!
- Download and Install Templify, you can get the latest version here (http://opensource.endjin.com/templify/).
Download and install S#arp architecture version 2.1.2, you can get the latest version here (https://github.com/sharparchitecture/Sharp-Architecture/releases). 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 WebDemo
- Now click deploy.
- Go to your folder and it should have a similar structure like this.
- Go into the Solutions folder and your solution will be there.
- Click the solution file, it should open Visual Studio and your solution will look like this.
- Once it opens go to your Presentation Layer, choose the Web Project and set it as StartUp Project.
- 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 no need to change the database name.
- Run your project for the first time to check if everything is OK
- Now lets convert your Website to use Kendo UI. Right click your web project, choose Kendo UI for ASP.NET MVC then click convert.
Choose the latest version and tick only Copy Editor Templates then click next.
- Choose a theme you like
13. Add and Install Microsoft.AspNet.Web.Optimization, this is used for bundling and optimizing css and js files.
- Add also the new Microsoft jQuery Unobtrusive Ajax, we will need this
- Now add the following
- App_Start folder
- Create a BundleConfig.cs
- jquery.json-2.4.min.js – You can download this one here (https://code.google.com/p/jquery-json/)
Take note the references in your Shared Layout (You can find them at /Views/Shared/_Layout.cshtml) they should be included in your BundleConfig.cs
To make your life easier here is a sample BundleConfig.cs code, add and remove references you might need or not need.
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using System.Web.Optimization; namespace WebDemo.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-2.0.3.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") .Include("~/scripts/modernizr-2.7.1.js") ); //KendoSection bundles.Add(new ScriptBundle("~/bundles/webdemo") .Include("~/scripts/kendo/2013.2.918/jquery.min.js") .Include("~/Scripts/Kendo/2013.2.918/kendo.all.min.js") .Include("~/scripts/kendo/2013.2.918/kendo.aspnetmvc.min.js") .Include("~/scripts/kendo/2013.2.918/kendo.binder.min.js") .Include("~/scripts/kendo/2013.2.918/kendo.calendar.min.js") .Include("~/scripts/kendo/2013.2.918/kendo.core.min.js") .Include("~/scripts/kendo/2013.2.918/kendo.data.min.js") .Include("~/scripts/kendo/2013.2.918/kendo.datepicker.min.js") .Include("~/scripts/kendo/2013.2.918/kendo.draganddrop.min.js") .Include("~/scripts/kendo/2013.2.918/kendo.dropdownlist.min.js") .Include("~/scripts/kendo/2013.2.918/kendo.editable.min.js") .Include("~/scripts/kendo/2013.2.918/kendo.filtermenu.min.js") .Include("~/scripts/kendo/2013.2.918/kendo.fx.min.js") .Include("~/scripts/kendo/2013.2.918/kendo.grid.min.js") .Include("~/scripts/kendo/2013.2.918/kendo.groupable.min.js") .Include("~/scripts/kendo/2013.2.918/kendo.list.min.js") .Include("~/scripts/kendo/2013.2.918/kendo.menu.min.js") .Include("~/scripts/kendo/2013.2.918/kendo.modernizr.custom.js") .Include("~/scripts/kendo/2013.2.918/kendo.numerictextbox.min.js") .Include("~/scripts/kendo/2013.2.918/kendo.pager.min.js") .Include("~/scripts/kendo/2013.2.918/kendo.popup.min.js") .Include("~/scripts/kendo/2013.2.918/kendo.reorderable.min.js") .Include("~/scripts/kendo/2013.2.918/kendo.resizable.min.js") .Include("~/scripts/kendo/2013.2.918/kendo.selectable.min.js") .Include("~/scripts/kendo/2013.2.918/kendo.sortable.min.js") .Include("~/scripts/kendo/2013.2.918/kendo.upload.min.js") .Include("~/scripts/kendo/2013.2.918/kendo.userevents.min.js") .Include("~/scripts/kendo/2013.2.918/kendo.validator.min.js") .Include("~/scripts/kendo/2013.2.918/kendo.window.min.js") .Include("~/scripts/kendo/2013.2.918/kendo.web.min.js") .Include("~/scripts/webdemo*")); //Css Section bundles.Add(new StyleBundle("~/content/css").Include( "~/Content/Kendo/2013.2.918/kendo.common.min.css", "~/Content/Kendo/2013.2.918/kendo.blueopal.min.css", "~/Content/kendo/2013.2.918/kendo.dataviz.min.css", "~/Content/kendo/2013.2.918/kendo.dataviz.blueopal.min.css", "~/Content/*.css")); } } }
16. Remove all old js and css references in your Shared Layout. You can find them at /Views/Shared/_Layout.cshtml
- Replace with the bundled lines
@Styles.Render("~/content/css") @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/mywebapp")
18. Register them on Global.asax.
BundleConfig.RegisterBundles(BundleTable.Bundles);
- Add reference to System.Web.Optimization in your web.config
<add namespace="System.Web.Optimization" />
- Now check if your bundling works by running it and looking at the code behind
- Try using some Kendo UI components. For this sample I used a window. You’re free to copy the codes below to try.
@{ ViewBag.Title = "Home"; Layout = "~/Views/Shared/_Layout.cshtml"; } @(Html.Kendo().Window() .Name("window") .Title("Test Kendo and S#arp") .Content(@<text> <div class="armchair"> <img src="@Url.Content("http://www.lipsum.com/images/lipsum07.gif")" alt="Lorem Ipsum" /> Lorem Ipsum </div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dictum, quam aliquam aliquam condimentum, ipsum nisi gravida lorem, non dapibus lacus est a est. Integer non convallis dui. Nullam sollicitudin risus id sem varius, eu sagittis lectus condimentum. Integer consectetur euismod justo, nec eleifend lacus cursus sit amet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus scelerisque dui dolor, ac suscipit enim mollis sit amet. Morbi sit amet diam at dolor dictum ullamcorper. Aliquam erat volutpat. Donec gravida pellentesque dignissim. Donec magna nisi, porta eu posuere vitae, fringilla a urna. Mauris sed mi urna. Vivamus et porta est. Donec commodo et odio quis ultrices. Quisque velit purus, iaculis vel ligula id, sagittis molestie neque. </p> <p> Aliquam iaculis eros a posuere varius. Quisque fringilla sapien in leo fringilla, eget varius purus placerat. Donec sed leo iaculis, convallis nunc quis, fringilla tellus. Duis luctus, est nec ullamcorper placerat, risus nisi tristique magna, ut suscipit sem nibh vel erat. Nunc aliquam, sem eget consectetur pharetra, mauris libero sollicitudin odio, nec semper nisl neque sed nunc. Integer nec magna mi. Proin eget lacus ut felis gravida interdum. Maecenas ut rhoncus ligula. Sed urna lorem, eleifend in tincidunt vitae, dictum venenatis tortor. Quisque vehicula, enim vel scelerisque lobortis, neque enim volutpat sem, sed consectetur leo quam eu arcu. </p> <p> In nec velit non libero vehicula porta. Cras eros sem, viverra vitae tellus vel, tincidunt posuere turpis. Nam vel sodales turpis, vitae commodo magna. Curabitur mattis nunc lacus, quis aliquet ante posuere eget. Vivamus gravida tellus vitae metus tristique, vel malesuada tortor imperdiet. Curabitur nibh velit, porta ut porta quis, bibendum sed orci. Phasellus eu facilisis sem, ac tempor tellus. Aliquam et eros id enim tristique hendrerit. Nullam sed adipiscing ligula, at blandit elit. Sed at metus quis tellus hendrerit pharetra a ut urna. Nam in pretium ligula. Aliquam at ipsum at nunc imperdiet rutrum non in metus. Vivamus lobortis adipiscing lorem eget gravida. Donec sollicitudin velit diam, a sollicitudin dolor convallis at. Suspendisse fringilla ac magna eget feugiat. </p> <p> Source: <a href="http://www.lipsum.com/feed/html" title="Lorem Ipsum">www.lipsum.com</a> </p> </text>) .Draggable() .Resizable() .Width(600) .Actions(actions => actions.Pin().Minimize().Maximize().Close()) .Events(ev => ev.Close("onClose")) ) <span id="undo" style="display: none" class="k-button">Click here to open the window.</span> <script> function onClose() { $("#undo").show(); } $(document).ready(function () { $("#undo").bind("click", function () { $("#window").data("kendoWindow").open(); $("#undo").hide(); }); }); </script> <style scoped> #example { min-height: 500px; } #undo { text-align: center; position: absolute; white-space: nowrap; padding: 1em; cursor: pointer; } .armchair { float: left; margin: 30px 30px 120px 30px; text-align: center; } .armchair img { display: block; margin-bottom: 10px; } </style>
Try to run your project then it should look something like this.
At this stage your website is ready but if want to make your life easier, I created an open source code generator for S#arp so it generates the domain, presentation (view model, controllers, queries and view) as well as the task layer. You can download them here
http://macaalay.com/tag/sarp-architecture/ or here
http://sourceforge.net/projects/sharpener/
You have to change one thing though so your presentation layer can communicate with your Tasks Layer.
First add a reference to SharpArch.Nhibernate on your Task layer
then go to your presentation layer, under CastleWindsor folder go to TaskInstaller.cs and replace
public void Install(IWindsorContainer container, IConfigurationStore store) { container.Register( Classes.FromAssemblyNamed("WebDemo.Tasks") .Pick().Unless(t => t.Namespace.EndsWith("Handlers")) .WithService.DefaultInterfaces() .Configure(c => c.LifestylePerWebRequest()) ); }
with this one so we can do Inversion of Control on all of the classes with the WebDemo.Tasks namespace
public class TasksInstaller : IWindsorInstaller { public void Install(IWindsorContainer container, IConfigurationStore store) { container.Register( Classes.FromAssemblyNamed("WebDemo.Tasks") .InNamespace("WebDemo.Tasks") .WithService.DefaultInterfaces() .Configure(c => c.LifestylePerWebRequest()) ); } }
You’re all good to go!