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

最新推荐文章于 2022-06-02 09:21:35 发布

xmusee

最新推荐文章于 2022-06-02 09:21:35 发布

阅读量707

点赞数

分类专栏： DevExpress-MVC学习记录

本文链接：https://blog.csdn.net/xmusee/article/details/80154142

版权

DevExpress-MVC学习记录专栏收录该内容

7 篇文章 0 订阅

订阅专栏

//-----------view

@model FormLayoutFeaturesModel
@{
    DemoHelper.Instance.ControlAreaMaxWidth = Unit.Pixel(400);              //案例在页面中的宽度
    DemoHelper.Instance.ControlOptionsRightBlockWidth = Unit.Pixel(400);          //选项在页面中的宽度
}

@section StartDemoRegion {      //提交表单
    @{ Html.BeginForm(); }
}
<div style="padding-top:30px">
    @Html.DevExpress().FormLayout(settings => {
        settings.Name = "formLayout";
        settings.EncodeHtml = false;          //不接受Html编码文本提交
        settings.UseDefaultPaddings = false;      //不使用默认的内边距
        settings.Width = Unit.Percentage(100);      //使用指定范围内的100%宽度

        var groupItem = settings.Items.AddGroupItem(i => { //添加一个分组
            i.Caption = "Group Caption";              //分组标题
            i.SettingsItemHelpTexts.Position = HelpTextPosition.Bottom; //帮助文本的位置在下方
        });
        groupItem.Items.Add(m => m.Name, i => {          //添加分组中的项目
            i.HelpText = "Please, enter your login name";      //帮助文本
            i.NestedExtension().TextBox(s => s.Width = Unit.Percentage(100)); //使用嵌套模式指定录入时组件名称
        });
        groupItem.Items.Add(m => m.Email, i => {
            i.HelpText = "Please, enter your e-mail";
            i.NestedExtension().TextBox(s => s.Width = Unit.Percentage(100));
        });
        groupItem.Items.Add(m => m.Description, i => {
            i.HelpText = "Leave a little bit of information<br/>about yourself";
            i.NestedExtension().Memo(s => {
                s.Height = 50;
                s.Width = Unit.Percentage(100);
            });
        });

FormLayoutFeaturesDemoOptions options = ViewBag.FeaturesDemoOptions;

//定义一个变量options ,其值由controller以ViewBag的方式提供数据

groupItem.GroupBoxDecoration = options.GroupSettingsGroupBoxDecoration;

//FormLayout的显示方式 Default Box HeadingLine None

groupItem.ShowCaption = options.GroupSettingsShowCaption ? DefaultBoolean.True : DefaultBoolean.False;

//是否显示组标题

groupItem.SettingsItems.ShowCaption = options.ItemCaptionSettingsShowCaption ? DefaultBoolean.True : DefaultBoolean.False;

//是否显示项目标题,也就是输入框前面的文本

groupItem.SettingsItemCaptions.Location = options.ItemCaptionSettingsLocation;

//显示项目标题的位置上下左右均可设置

groupItem.SettingsItemCaptions.HorizontalAlign = options.ItemCaptionSettingsHorizontalAlign;

//显示项目标题文本的水平对齐方式

groupItem.SettingsItemCaptions.VerticalAlign = options.ItemCaptionSettingsVerticalAlign;

//显示项目标题文本的垂直对齐方式包括帮助文本一起计算

groupItem.SettingsItemHelpTexts.Position = options.ItemHelpTextSettingsPosition;

//显示帮助文本的显示位置自动上下左右

groupItem.SettingsItemHelpTexts.HorizontalAlign = options.ItemHelpTextSettingsHorizontalAlign;

//显示帮助文本水平对齐方式自动左中右

groupItem.SettingsItemHelpTexts.VerticalAlign = options.ItemHelpTextSettingsVerticalAlign;

//显示帮助文本垂直对齐方式自动上中下

foreach ( MVCxFormLayoutItem layoutItem in groupItem . Items ) {
if ( ! options . ItemHelpTextSettingsShowHelpText )

layoutItem.HelpText = string.Empty;

//遍历所有项目组件,如果没有设置帮助文本的设置为空

         }
     } ) . GetHtml ( )
</ div >
@ section DemoOptions {
     @ Html . DevExpress ( ) . FormLayout ( settings => {
         settings . Name = "FormLayoutSettings" ;
         settings . AlignItemCaptionsInAllGroups = true ; //设置所有项目的标题在组内对齐
         settings . SettingsItemCaptions . HorizontalAlign = FormLayoutHorizontalAlign . Left ; //对齐方式为左对齐

         settings . Items . AddGroupItem ( group => { //添加项目
             group . Caption = "Group Settings" ;
             group . Items . Add ( i => i . FieldName = "GroupSettingsGroupBoxDecoration" ) ;
             group . Items . Add ( i => i . FieldName = "GroupSettingsShowCaption" ) ;
         } ) ;

         settings . Items . AddGroupItem ( group => {
             group . Caption = "Item Caption Settings" ;

             group . Items . Add ( i => i . FieldName = "ItemCaptionSettingsShowCaption" ) ;
             group . Items . Add ( i => i . FieldName = "ItemCaptionSettingsLocation" ) ;
             group . Items . Add ( i => i . FieldName = "ItemCaptionSettingsHorizontalAlign" ) ;
             group . Items . Add ( i => i . FieldName = "ItemCaptionSettingsVerticalAlign" ) ;
         } ) ;

         settings . Items . AddGroupItem ( group => {
             group . Caption = "Item HelpText Settings" ;
             group . Items . Add ( i => i . FieldName = "ItemHelpTextSettingsShowHelpText" ) ;
             group . Items . Add ( i => i . FieldName = "ItemHelpTextSettingsPosition" ) ;
             group . Items . Add ( i => i . FieldName = "ItemHelpTextSettingsHorizontalAlign" ) ;
             group . Items . Add ( i => i . FieldName = "ItemHelpTextSettingsVerticalAlign" ) ;

});

//以上内容由model定义

         DemoHelper . Instance . PrepareControlOptions ( settings , new MvcControlOptionsSettings {
             ColumnMinWidth = 350 ,
             ColumnCountMode = RecalculateColumnCountMode . ChildGroups
         } ) ;
     } ) . Bind ( ViewBag . FeaturesDemoOptions ) . GetHtml ( ) //绑定模型
     < div class = "apply-button-container" >
         @ Html . DevExpress ( ) . Button ( s => {      //定义按钮
             s . Name = "ApplyButton" ;
             s . Text = "Apply Changes" ;
             s . Theme = "MaterialCompactOrange" ;
             s . UseSubmitBehavior = true ;
         } ) . GetHtml ( )
     </ div >
}

@ section EndDemoRegion {
     @ { Html . EndForm ( ) ; }

}

//---------model

using System.ComponentModel.DataAnnotations;

//引用类属性标示验证的特性,详情参阅:https://msdn.microsoft.com/zh-cn/library/cc490428

namespace DevExpress.Web.Demos {
    public class FormLayoutFeaturesDemoOptions {
        public FormLayoutFeaturesDemoOptions() { //构造方法初始化选项的值
            GroupSettingsGroupBoxDecoration = GroupBoxDecoration.Box;
            GroupSettingsShowCaption = true;

            ItemCaptionSettingsShowCaption = true;
            ItemCaptionSettingsLocation = LayoutItemCaptionLocation.Left;
            ItemCaptionSettingsHorizontalAlign = FormLayoutHorizontalAlign.Left;
            ItemCaptionSettingsVerticalAlign = FormLayoutVerticalAlign.Top;

            ItemHelpTextSettingsShowHelpText = true;
        }

        [Display(Name = "Group Box Decoration")]          //定义显示的名称
        public GroupBoxDecoration GroupSettingsGroupBoxDecoration { get; set; }
        [Display(Name = "Show Caption")]
        public bool GroupSettingsShowCaption { get; set; }

        [Display(Name = "Show Caption")]
        public bool ItemCaptionSettingsShowCaption { get; set; }
        [Display(Name = "Location")]
        public LayoutItemCaptionLocation ItemCaptionSettingsLocation { get; set; }
        [Display(Name = "Horizontal Align")]
        public FormLayoutHorizontalAlign ItemCaptionSettingsHorizontalAlign { get; set; }
        [Display(Name = "Vertical Align")]
        public FormLayoutVerticalAlign ItemCaptionSettingsVerticalAlign { get; set; }

        [Display(Name = "Show Help Text")]
        public bool ItemHelpTextSettingsShowHelpText { get; set; }
        [Display(Name = "Position")]
        public HelpTextPosition ItemHelpTextSettingsPosition { get; set; }
        [Display(Name = "Horizontal Align")]
        public HelpTextHorizontalAlign ItemHelpTextSettingsHorizontalAlign { get; set; }
        [Display(Name = "Vertical Align")]
        public HelpTextVerticalAlign ItemHelpTextSettingsVerticalAlign { get; set; }
    }

}

此案例比较简单,特别的用法不多