DevExpress看明白代码--Menu.Features完整案例解读

//View

@model MenuFeaturesDemoOptions    //指定强类型model

@ {
     DemoHelper . Instance . ControlAreaMaxWidth = Unit . Pixel ( 600 ) ;    //定义本Dome在页面实例中的宽度
     DemoHelper . Instance . ControlOptionsRightBlockWidth = 332 ;    //定义本Dome中选项部份所占的宽度
}

@ section AdditionalResources {                    //定义代码段的名称"附加资源",主要是为了好管理
     < script >
         function submitForm ( ) {                        //定义函数,用途:实时提交表单
             $ ( "form" ) . submit ( ) ;
         }
     </ script >
}

@ section StartDemoRegion {                    //定义代码段的名称
     @ { Html . BeginForm ( ) ; }                            //提交表单的用法，拆开使用是为了代码更清楚，注意结尾部分
}
     @ Html . DevExpress ( ) . Menu (
         settings =>
         {
             settings . Name = "mFeatures" ;                                        //name，唯一标识
             settings . AllowSelectItem = Model . AllowSelectItem ;            //允许选择项目，其实是标识已经选择的项目
             settings . EnableHotTrack = Model . EnableHotTrack ;            //是否允许鼠标经过时变更底色强调显示
             settings . EnableAnimation = Model . EnableAnimation ;        //是否允许动画效果
             settings . AppearAfter = Model . AppearAfter ;                        //动画延迟时间，防止过份敏感，页面动作过多
             settings . DisappearAfter = Model . DisappearAfter ;                //鼠标离开后菜单消失时间
             settings . MaximumDisplayLevels = Model . MaximumDisplayLevels ;            //最多显示菜单的层数    
             settings . AutoSeparators = Model . AutoSeparators ;           //自动拆分菜单的方式，注意提供内容的方式                    
             settings . ShowPopOutImages = DefaultBoolean . True ;        //不理解，后补

             settings . Items . Add ( item => {                //定义菜单项目
                 item . Text = "Home" ;                        //最上层名称
                 item . Items . Add ( subItem => {            //点开后第一层
                     subItem . Text = "News" ;                //点开后第一层的名称
                     subItem . Items . Add ( "For Developers" ) ;            //点开后第一层箭头下的项目
                     subItem . Items . Add ( "Website News" ) ;
                 } ) ;
                 item . Items . Add ( "Our Mission" ) ;            //点开后第一层
                 item . Items . Add ( "Our Customers" ) ;        //点开后第一层
             } ) ;
             settings . Items . Add ( item => {
                 item . Text = "Products" ;
                 item . Items . Add ( "Subscriptions / Packs" ) ;
                 item . Items . Add ( ".NET Windows Forms Components" ) ;
                 item . Items . Add ( "Reporting / Printing Suites" ) ;
                 item . Items . Add ( "VCL Components and Tools" ) ;
                 item . Items . Add ( "ASP.NET Components" ) ;
             } ) ;
             settings . Items . Add ( item => {
                 item . Text = "Support" ;
                 item . Items . Add ( "Knowledge Base" ) ;
                 item . Items . Add ( "Documentation" ) ;
                 item . Items . Add ( "Support Center" ) ;
                 item . Items . Add ( "Newsgroups" ) ;
                 item . Items . Add ( "Best Practicies" ) ;
             } ) ;
         } ) . GetHtml ( )                                                //渲染为Html页面,容易忘记,后果就是看见一堆原码

@ section DemoOptions {                                    //代码段名称为:DemoOptions
     @ Html . DevExpress ( ) . FormLayout ( settings => {                //使用表单布局
         settings . Name = "OptionsFormLayout" ;

        settings.RequiredMarkDisplayMode = RequiredMarkMode.None;       

//是否显示必填标记,就是必填字段的小星星,由model定义,此处不需要是因为系统已经赋初值

         settings . Items . AddGroupItem ( group => {        //定义一个分组内容
             group . Caption = "Options" ;                            //标题头
             group . Items . Add ( m => m . AllowSelectItem , item => {            //强类型的写法之一,会自动定义标题和name
                 item . NestedExtensionType = FormLayoutNestedExtensionItemType . CheckBox ;        //嵌套组件的写法

                CheckBoxSettings checkBoxSettings = (CheckBoxSettings)item.NestedExtensionSettings;

                //注意这个写法:定义一个变量,把item.NestedExtensionSettings强转为CheckBoxSettings组件,目的是使用它的属性

                checkBoxSettings.Properties.ClientSideEvents.ValueChanged = "submitForm";

                //如果写成item.NestedExtensionSettings是点不出Properties,因为......(大概跟理氏转换有关)

                //定义客户端事件,也就是JS定义的方法,如果只有一个可以改为:  "function () { submit()}";  忘记了,需要确认

                //意思是:当客户端值改变时,直接提交表单给controller,会刷新页面

             } ) ;
             group . Items . Add ( m => m . EnableAnimation , item => {                        //同上
                 item . NestedExtensionType = FormLayoutNestedExtensionItemType . CheckBox ;
                 CheckBoxSettings checkBoxSettings = ( CheckBoxSettings ) item . NestedExtensionSettings ;
                 checkBoxSettings . Properties . ClientSideEvents . ValueChanged = "submitForm" ;
             } ) ;
             group . Items . Add ( m => m . EnableHotTrack , item => {                        //同上
                 item . NestedExtensionType = FormLayoutNestedExtensionItemType . CheckBox ;
                 CheckBoxSettings checkBoxSettings = ( CheckBoxSettings ) item . NestedExtensionSettings ;
                 checkBoxSettings . Properties . ClientSideEvents . ValueChanged = "submitForm" ;
             } ) ;
             group . Items . Add ( m => m . AppearAfter , item => {                            //同上
                 item . NestedExtensionType = FormLayoutNestedExtensionItemType . TextBox ;
                 TextBoxSettings textBoxSettings = ( TextBoxSettings ) item . NestedExtensionSettings ;

                textBoxSettings.Properties.MaskSettings.Mask = "<0..1000>";          

                 //这个定义可以限制输入数值的范围 ,这个办法不错,比较简单

             } ) ;
             group . Items . Add ( m => m . DisappearAfter , item => {                //同上
                 item . NestedExtensionType = FormLayoutNestedExtensionItemType . TextBox ;
                 TextBoxSettings textBoxSettings = ( TextBoxSettings ) item . NestedExtensionSettings ;
                 textBoxSettings . Properties . MaskSettings . Mask = "<0..1000>" ;
             } ) ;
             group . Items . Add ( m => m . MaximumDisplayLevels , item => {                //同上
                 item . NestedExtensionType = FormLayoutNestedExtensionItemType . TextBox ;
                 TextBoxSettings textBoxSettings = ( TextBoxSettings ) item . NestedExtensionSettings ;
                 textBoxSettings . Properties . MaskSettings . Mask = "<0..1000>" ;
             } ) ;

            group.Items.Add(m => m.AutoSeparators, item => {                

//m.AutoSeparators这个方式应该是自动绑定枚举内容的值在ComboBox里面,待验证

                 item . NestedExtensionType = FormLayoutNestedExtensionItemType . ComboBox ;
                 ComboBoxSettings comboBoxSettings = ( ComboBoxSettings ) item . NestedExtensionSettings ;
                 comboBoxSettings . Width = 100 ;
             } ) ;
         } ) ;
        DemoHelper.Instance.PrepareControlOptions(settings, new MvcControlOptionsSettings {
            ColumnMinWidth = 300,
            ColumnCountMode = RecalculateColumnCountMode.ChildGroups

        });

//不太理解,后补

     } ) . GetHtml ( )
< div class = "apply-button-container" >
     @ Html . DevExpress ( ) . Button ( settings => {                            //定义一个提交按钮
         settings . Name = "btnApply" ;                                            //name
         settings . Text = "Apply Changes" ;                                       //按钮上显示的文字
         settings . Width = 200 ;                                                            //宽度
         settings . Theme = "MaterialCompactOrange" ;                    //使用的主题样式
         settings . ClientSideEvents . Click = "submitForm" ;                //客户端事件调用JS的名称
     } ) . GetHtml ( )
</ div >
}
@section EndDemoRegion {
    @{ Html.EndForm(); }                        //提交表单的结束部分

}

//Controller

namespace DevExpress.Web.Demos {
    public partial class MenuController: DemoController {          //定义部分类
        [HttpGet]                                                                            //只接受Get方式访问
        public ActionResult Features() {
            return DemoView("Features", new MenuFeaturesDemoOptions());                //返回视图,并提供一个model
        }
        [HttpPost, ValidateInput(false)]                                    //接受Post访问,不验证文本输入

        public ActionResult Features([Bind]MenuFeaturesDemoOptions options) {       

//接受一个绑定model的参数

            if(!ModelState.IsValid) {             

//获得包含模型状态和模型绑定验证的模型状态字典对象。获取一个值，表明模型状态字典的这个实例是否有效。   

                if(!ModelState.IsValidField("AppearAfter"))         

//返回的是ModelErrorCollection对象,所以要用"!"  

                    options.AppearAfter = MenuFeaturesDemoOptions.DefaultAppearAfter;

//人话:如果没有关于"AppearAfter"的错误,就用view中的模型赋值

                if(!ModelState.IsValidField("DisappearAfter"))
                    options.DisappearAfter = MenuFeaturesDemoOptions.DefaultDisappearAfter;
                if(!ModelState.IsValidField("MaximumDisplayLevels"))

                    options.MaximumDisplayLevels = MenuFeaturesDemoOptions.DefaultMaximumDisplayLevels;

//控制展开的层级,值选择 "0"

            }
            return DemoView("Features", options);      
        }
    }

}

//Model

using System.ComponentModel.DataAnnotations;     //命名空间提供了用于为 ASP.NET 动态数据控件定义元数据的属性类。

namespace DevExpress.Web.Demos {
    public class MenuFeaturesDemoOptions {     //利用构造函数赋初值
        public const int DefaultAppearAfter = 300;                        
        public const int DefaultDisappearAfter = 500;
        public const int DefaultMaximumDisplayLevels = 0;

        public MenuFeaturesDemoOptions() {
            AllowSelectItem = true;
            EnableHotTrack = true;
            EnableAnimation = true;
            AppearAfter = DefaultAppearAfter;
            DisappearAfter = DefaultDisappearAfter;
            MaximumDisplayLevels = DefaultMaximumDisplayLevels;
            AutoSeparators = AutoSeparatorMode.None;
        }

        public bool AllowSelectItem { get; set; }
        public bool EnableHotTrack { get; set; }
        public bool EnableAnimation { get; set; }

        [Range(0, int.MaxValue, ErrorMessage = "Must be 0 or greater.")]     

//验证数值范围是从0到int的最大值,错误文本="Must be 0 or greater." 其实验证输入框中根本就不能输入符号

        public int AppearAfter { get; set; }
        [Range(0, int.MaxValue, ErrorMessage = "Must be 0 or greater.")]
        public int DisappearAfter { get; set; }
        [Range(0, int.MaxValue, ErrorMessage = "Must be 0 or greater.")]
        public int MaximumDisplayLevels { get; set; }
        public AutoSeparatorMode AutoSeparators { get; set; }
    }

}