使用 Kendo UI 结合 S#arp Architecture 的指南
5.00/5 (1投票)
这是一篇关于使用 Kendo UI 结合 S#arp Architecture 的指南
我们已经使用S#arp架构相当长一段时间了，它已被证明是我们公司内部开发的一些企业应用程序的良好平台。虽然它为我们的Web应用程序提供了良好的平台，但它并没有提供易于重用的表示层组件。这就是Kendo UI发挥作用的地方。之前我们使用的是旧版本Telerik MVC，但此后我们升级到了这个较新的版本。本指南将介绍如何使用这两个产品启动项目。
在开始之前，我假设您已经创建了数据库，并使用了与Fluent NHibernate兼容的命名约定。这意味着以下几点：
- 表名使用复数形式（例如：
Employees、Positions、Departments） - 表主键为表名单数形式并以Id结尾（例如：
EmployeeId、PositionId、DepartmentId） - 数据库对象的任何属性都使用驼峰命名法（例如：
ThisIsASampleDatabaseColumn） - 定义您的外键关系，并保持与相关表列相同的命名。
此外，如果您的开发机器上尚未安装Kendo UI for ASP.NET MVC，您可以从此处获取（http://www.kendoui.com/download.aspx）。
让我们开始吧。
- 下载并安装Templify，您可以从此处获取最新版本（http://opensource.endjin.com/templify/）。
- 下载并安装S#arp架构，您可以从此处获取最新版本（http://sharparchitecture.net/downloads.htm）。安装完成后，运行Templify并将Templify部署到您选择的文件夹中。选择一个模板和命名空间，在本示例中我们将其命名为
MyWebApp。
- 现在点击部署。
- 完成后，它会在您的通知栏中通知您。
- 转到您的文件夹，它应该具有类似于这样的结构。
- 进入Solutions文件夹，您的解决方案将位于其中。
- 您会注意到它被创建为Visual Studio 2010版本，我们不需要那样，所以我们将使用Visual Studio 2012打开它。我想截至目前，它不是受支持的版本，但我们已经在S#arp项目中使用2012一年了，并且已经部署了两个应用程序而没有问题。
- 打开后，它将显示升级说明。转到您的表示层，选择Web项目并将其设置为启动项目。
- 通过转到NHibernate.config并选择您的数据库服务器来设置您的数据库。如果您的应用程序名称与数据库名称相同（我建议您这样做），则无需更改数据库名称。
- 升级您的项目以使用MVC 4。请遵循这篇文章。
- 第一次运行您的项目。
- 现在让我们转换您的网站以使用Kendo UI。右键单击您的Web项目，选择Kendo UI for ASP.NET MVC，然后单击转换。
- 只勾选“复制编辑器模板”，然后单击下一步。
- 完成后，右键单击引用并管理NuGet包。恢复任何缺少的包。
- 添加并安装Microsoft.AspNet.Web.Optimization，这用于捆绑和优化CSS和JS文件。
- 添加以下内容
- App_Start文件夹
- 创建一个BundleConfig.cs
- 添加jquery-1.9.1.min.js
- 添加jquery.json-2.4.min.js
- 添加jquery.unobtrusive-ajax.min.js
- 添加jquery.validate.js
- 添加jquery.validate.unobtrusive.js
复制并粘贴此BundleConfig.cs代码
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")); } } }
- 删除共享布局中所有旧的JS和CSS引用。您可以在MyWebApp.Web.Mvc/Views/Shared/_Layout.cshtml中找到它们。
- 替换为捆绑的代码行
@Styles.Render("~/content/css") @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/mywebapp")
- 在Global.asax中注册它们。
BundleConfig.RegisterBundles(BundleTable.Bundles);
还要注册您的站点地图。
SiteMapManager.SiteMaps.Register<XmlSiteMap>("Web", sitemap => sitemap.Load());
- 现在添加一个站点地图。右键单击您的项目，选择添加，然后选择站点地图。
- 尝试使用一些Kendo UI组件。在您的主页->索引页面上添加日历。用类似这样的代码替换整个S#arp默认页面
@{ ViewBag.Title = "Home"; Layout = "~/Views/Shared/_Layout.cshtml"; } @(Html.Kendo().Calendar().Name("calendar"))然后在您的共享->布局中添加一个菜单，因此用类似这样的代码替换默认菜单
<!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>尝试运行您的项目。然后它应该看起来像这样。在这个阶段，您的网站已经准备好了，但让我们配置一些组件，以便您的表示层可以与您的任务层通信。
- 更新到最新的Json，因为S#arp使用的是4.0.8.0。
- 我们将使用Json 4.5.10，您必须在表示层和任务层安装此引用。
- 还要在您的任务层添加SharpArch.Nhibernate，因为您将在此处使用它。您可以在您的引用程序集文件夹中找到它。
- 修改您ComponentRegistrar.cs的一部分，您可以在Web项目的CastleWindsor文件夹中找到它。
旧代码应该如下所示
private static void AddTasksTo(IWindsorContainer container) { container.Register( AllTypes .FromAssemblyNamed("MyWebApp.Tasks") .Pick() .WithService.FirstNonGenericCoreInterface("MyWebApp.Domain")); }您必须将其更改为类似这样的代码
private static void AddTasksTo(IWindsorContainer container) { container.Register( AllTypes .FromAssemblyNamed("MyWebApp.Tasks") .InNamespace("MyWebApp.Tasks") .WithService.FirstNonGenericCoreInterface("MyWebApp.Domain")); }
一切就绪。
下周初，我将分享一个名为Sharpener的开源项目，此应用程序将根据您的数据库设计自动为您生成代码。这意味着您无需手动编写域对象、查询及其接口、视图模型、控制器、视图、命令和命令处理程序。这将节省您大量时间，并确保您的项目符合正确的命名和编程约定。
