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

//view----------DataBindingPartial

@model EditableEmployee   //使用强类型模型

@Html.DevExpress().FormLayout(settings => {
    settings.Name = "formLayout";
    settings.UseDefaultPaddings = false;
    settings.AlignItemCaptionsInAllGroups = true;

    settings.SettingsAdaptivity.AdaptivityMode = FormLayoutAdaptivityMode.SingleColumnWindowLimit;   

//自适应模式:单一列窗口限制  或者 关闭

    settings.SettingsAdaptivity.SwitchToSingleColumnAtWindowInnerWidth = 600;
//切换到窗口内宽度的单列
    settings.Items.Add(m => m.EmployeeID, i => {    //提供一个选项框给Dome使用
        i.Caption = "Select record";
        i.Width = Unit.Percentage(33);
        i.NestedExtension().ComboBox(s => {    //ComboBox直接赋值的用法
            s.Properties.ClientSideEvents.ValueChanged = "UpdateLayoutForm";   //客户端事件:当值改变时调用JS
            s.Properties.ValueType = typeof(int);    //值的类型为int
            for(var j = 1; j <= 5; j++) {
                s.Properties.Items.Add("Employee #" + j, j);
            }
        });
    });

    settings.Items.AddEmptyItem();

    settings.Items.AddGroupItem(g => {
        g.Caption = "Personal Information";
        g.ColCount = 2;                //设置分列为2
        g.Items.Add(m => m.FirstName, i => {
            i.NestedExtension().TextBox(tb => {
                tb.Width = Unit.Percentage(100);
                tb.ShowModelErrors = true;            //有错误时是否显示Model验证信息

                tb.Properties.ValidationSettings.Display = Display.Dynamic; 

//验证显示的方式为动态  Static Dynamic None

                tb.Properties.ValidationSettings.ErrorDisplayMode = ErrorDisplayMode.None;

//验证错误时错误提示的显示方式 Text ImageWithTooltip ImageWithText None

            });
        });
        g.Items.Add(m => m.LastName, i => {
            i.NestedExtension().TextBox(tb => {
                tb.Width = Unit.Percentage(100);
                tb.ShowModelErrors = true;
                tb.Properties.ValidationSettings.Display = Display.Dynamic;
                tb.Properties.ValidationSettings.ErrorDisplayMode = ErrorDisplayMode.None;
            });
        });
        g.Items.Add(m => m.BirthDate);
    });

    settings.Items.AddGroupItem(g => {            //第二组
        g.Caption = "Work Information";
        g.ColCount = 2;
        g.Items.Add(m => m.Title, i => i.NestedExtensionSettings.Width = Unit.Percentage(100));
        g.Items.Add(m => m.HireDate, i => i.NestedExtensionSettings.Width = Unit.Percentage(100));
        g.Items.Add(m => m.Notes, i => { //Memo的定义方式
            i.Width = Unit.Percentage(100);     //跨列的写法
            i.NestedExtensionType = FormLayoutNestedExtensionItemType.Memo;
            i.NestedExtensionSettings.Width = Unit.Percentage(100);
            i.NestedExtensionSettings.Height = Unit.Pixel(71);
        });
    });

    settings.Items.Add(i => {        //定义按钮直接使用submite提交
        i.ShowCaption = DefaultBoolean.False; 
        i.CssClass = "buttonAlign";
        i.Width = Unit.Percentage(100);
        i.NestedExtension().Button(s => {
            s.Name = "applyButton";
            s.Text = "Update Record";
            s.UseSubmitBehavior = true;
            s.Width = Unit.Pixel(150);
        });
    });

}).GetHtml()

//View-----

@model EditableEmployee

@{
    Html.EnableClientValidation();  //启用通过在浏览器中使用客户端脚本来执行的输入验证
    Html.EnableUnobtrusiveJavaScript();   //要启用不显眼的JavaScript。
}
@section AdditionalResources {

    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>

//使用JQ的验证脚本

    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

//使用JQ不显眼的验证脚本

     < style   type = "text/css" >
             . buttonAlign   {    //按钮排列
                 text-align :   right   ! important ;    //靠右,最高优先级
             }

             @ @ media( max-width : 600px )   {      //与窗口缩放相关的对齐方式
                 . buttonAlign   {
                     text-align :   center   ! important ;
                 }
             }
     </ style >
}

< script   type = "text/javascript" >
     function   UpdateLayoutForm ( s ,   e )   {    //ajax数据提交
         $ . ajax ( {
             type :   "POST" ,            //提交方式
             url :   '@Url.Action("DataBindingPartial", "FormLayout")' ,  //提交给的controller

            data: { employeeID: s.GetValue() },       

 //给后台提交的数据 键值对方式 键的名字与后台参数名要一致,不然接收不到数据

             success :   function ( response )   {        //定义回调函数:如果成功就返回一个值response
                 $ ( "#editableContainer" ) . html ( response ) ;  //在容器中显示回调返回的值response
             }
         } ) ;
     }
</ script >

@ using   ( Html . BeginForm ( "DataBindingApplyChanges" ,   "FormLayout" ) )   {  //指定提交的controller
     < div   id = "editableContainer"   style = "max-width: 700px" >  
         @ Html . Partial ( "DataBindingPartial" ,   Model )
     </ div >
}

//controller-----

namespace DevExpress.Web.Demos {
    public partial class FormLayoutController: DemoController {
        public ActionResult DataBinding() {

            return DemoView("DataBinding", NorthwindDataProvider.GetEditableEmployees().First());   

//model等于一条信息

        }
        [HttpPost]
        public ActionResult DataBindingApplyChanges(EditableEmployee employee) {
            if(!ModelState.IsValid)   //没有错误信息
                return DemoView("DataBinding", employee);
            NorthwindDataProvider.UpdateEditableEmployee(employee);
            return DemoView("DataBinding", NorthwindDataProvider.GetEditableEmployeeByID(employee.EmployeeID));
        }
        public ActionResult DataBindingPartial(int employeeID) {
            return PartialView("DataBindingPartial", NorthwindDataProvider.GetEditableEmployeeByID(employeeID));
        }
    }
}