devexpres MVC 使用指南系列（一）

VS2013 ,MVC5

DevExpress 14.2

新建VS  ASP.NET MVC项目，建议选择MVC5的，如下【文件】=》【新建】=》【项目】

然后我们选择C#语言，.NET4.5.1则对应的就是MCV5了，如果是.NET4.0的则显示MVC4，建议直接使用MVC5吧，并输入项目的名称

然后我们需要观察整个MVC的目录结构，我们找到Home对应的Index首页视图文件，这里我们来加入一个【按钮】和【文本框】并点击按钮显示文本框的值我们需要先导入Devexpress的引用

导入Devexpress的引用，在index.cshtml的空白处鼠标邮件导入Devexpress的支持，系统会系统导入对应的DLL相关库引用以及webconfig中的部分设置，都不需要人工去配置的【鼠标右键】=》【Devexpress14.2】

显示导入的界面，这里就是常见的控件集合了，根据需要导入吧，这里我们选择个【文本框】 TextBox类型的，然后【Insert】就行了

此时试图页面就会多了一段代码，       @Html.DevExpress().TextBox(settings => {    settings.Name = 'TextBox1'; }).GetHtml()这个就是基本的语法规则，其实跟服务端的@Html.TextBox差不多。这里注意下：导入的时候会提示需要讲【脚本】和【样式】保存到项目中，毕竟用的是人家的东西是吧

导入样式和JS文件到Layout中另外我们也会发现，系统自动引用了很多相关的devexpress相关的类库，这是比较好的，不用自己去操作了。                @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 })

运行MVC项目 ，查看结果只有一个文本框，而且样式这些需要自己去调整，这里就不啰嗦了，另外我们再把对应的按钮也【导入】进来，重复【步骤四】就可行了，在视图页面的空白处鼠标右键导入

导入只是完成界面的元素，那么如何实现功能呢？？脚本如下：@Html.DevExpress().TextBox(settings =>{    settings.Name = 'txtName';}).GetHtml()@Html.DevExpress().Button(settings =>{    settings.Name = 'btnOK';    settings.Text = '点我';    settings.ClientSideEvents.Click = 'ShowMessage';}).GetHtml()我们这里只是讲解了基本的例子，更为复杂的控件还要自己去探索哟，活到老学到老，如果您觉得好，我们需要您的点赞支持，一起分享，世界才会更美好！

另外给大家分享的就是，安装DevExpress后的自带例子比较丰富，可以自己多研究研究，一般放在这个目录下的，C:\Users\Public\Documents\DevExpress Demos 14.2\Components\ASP.NET\CS可以复制到资源管理器打开，或者找到文件的快捷方式定位。