DevExpress是 Developer Express的缩写,DevExpress是一家全球知。DevExpress 出品的控件集合或某系列控件或其中某控件。
工具/原料
方法/步骤
1新建VS ASP.NET MVC项目,建议选择MVC5的,如下【文件】=》【新建】=》【项目】
2然后我们选择C#语言,.NET4.5.1则对应的就是MCV5了,如果是.NET4.0的则显示MVC4,建议直接使用MVC5吧,并输入项目的名称
3然后我们需要观察整个MVC的目录结构,我们找到Home对应的Index首页视图文件,这里我们来加入一个【按钮】和【文本框】并点击按钮显示文本框的值我们需要先导入Devexpress的引用
4导入Devexpress的引用,在index.cshtml的空白处鼠标邮件导入Devexpress的支持,系统会系统导入对应的DLL相关库引用以及webconfig中的部分设置,都不需要人工去配置的【鼠标右键】=》【Devexpress14.2】
5显示导入的界面,这里就是常见的控件集合了,根据需要导入吧,这里我们选择个【文本框】 TextBox类型的,然后【Insert】就行了
6此时试图页面就会多了一段代码, @Html.DevExpress().TextBox(settings => { settings.Name = 'TextBox1'; }).GetHtml()这个就是基本的语法规则,其实跟服务端的@Html.TextBox差不多。这里注意下:导入的时候会提示需要讲【脚本】和【样式】保存到项目中,毕竟用的是人家的东西是吧
7导入样式和JS文件到Layout中另外我们也会发现,系统自动引用了很多相关的devexpress相关的类库,这是比较好的,不用自己去操作了。
@ViewBag.Title - 我的 ASP.NET 应用程序 @Styles.Render('~/Content/css') @Scripts.Render('~/bundles/modernizr') @Html.DevExpress().GetStyleSheets( new StyleSheet { ExtensionSuite = ExtensionSuite.NavigationAndLayout }, new StyleSheet { ExtensionSuite = ExtensionSuite.Editors }, new StyleSheet { ExtensionSuite = ExtensionSuite.HtmlEditor }, new StyleSheet { ExtensionSuite = ExtensionSuite.GridView }, new StyleSheet { ExtensionSuite = ExtensionSuite.PivotGrid }, new StyleSheet { ExtensionSuite = ExtensionSuite.Chart }, new StyleSheet { ExtensionSuite = ExtensionSuite.Report }, new StyleSheet { ExtensionSuite = ExtensionSuite.Scheduler }, new StyleSheet { ExtensionSuite = ExtensionSuite.TreeList }, new StyleSheet { ExtensionSuite = ExtensionSuite.Spreadsheet }, new StyleSheet { ExtensionSuite = ExtensionSuite.SpellChecker }) @Html.DevExpress().GetScripts( new Script { ExtensionSuite = ExtensionSuite.NavigationAndLayout }, new Script { ExtensionSuite = ExtensionSuite.HtmlEditor }, new Script { ExtensionSuite = ExtensionSuite.GridView }, new Script { ExtensionSuite = ExtensionSuite.PivotGrid }, new Script { ExtensionSuite = ExtensionSuite.Editors }, new Script { ExtensionSuite = ExtensionSuite.Chart }, new Script { ExtensionSuite = ExtensionSuite.Report }, new Script { ExtensionSuite = ExtensionSuite.Scheduler }, new Script { ExtensionSuite = ExtensionSuite.TreeList }, new Script { ExtensionSuite = ExtensionSuite.Spreadsheet }, new Script { ExtensionSuite = ExtensionSuite.SpellChecker })
8运行MVC项目 ,查看结果只有一个文本框,而且样式这些需要自己去调整,这里就不啰嗦了,另外我们再把对应的按钮也【导入】进来,重复【步骤四】就可行了,在视图页面的空白处鼠标右键导入
9导入只是完成界面的元素,那么如何实现功能呢??脚本如下:@Html.DevExpress().TextBox(settings =>{ settings.Name = 'txtName';}).GetHtml()@Html.DevExpress().Button(settings =>{ settings.Name = 'btnOK'; settings.Text = '点我'; settings.ClientSideEvents.Click = 'ShowMessage';}).GetHtml()我们这里只是讲解了基本的例子,更为复杂的控件还要自己去探索哟,活到老学到老,如果您觉得好,我们需要您的点赞支持,一起分享,世界才会更美好!
10另外给大家分享的就是,安装DevExpress后的自带例子比较丰富,可以自己多研究研究,一般放在这个目录下的,C:\Users\Public\Documents\DevExpress Demos 14.2\Components\ASP.NET\CS可以复制到资源管理器打开,或者找到文件的快捷方式定位。
注意事项
如果您觉得好,我们需要您的点赞支持,一起分享,世界才会更美好!