敏捷思维学习Ext.Net MVC--3.10Form表单组件之其它常用组件

敏捷思维学习Ext.Net MVC--3.10Form表单组件之其它常用组件

    前面介绍了常用的Form表单组件，下面再介绍几种组件，就可以应付大多数表单组件的问题了。我们接下类介绍的有多行文本字段、日期字段，甚至还有多选数字条，这在有些场合特别有用。当然ExtJs还设计了很多控件，如果有兴趣研究可以找出各个XXXXFor生成函数所需要的数据类型，使用此数据类型加上我们的通信方式便都可生成。

    一、在FormModel中建立生成控件所需的数据模型如下：
public class OtherFormModel

    {

        [Field(FieldLabel = "简介")]//(1)

        public string intro

        {

            get;

            set;

        }

        [Field(FieldLabel = "多选数字条")]//(2)

        public int[] MultiSliderValue

        {

            get;

            set;

        }

 

        [Field(FieldLabel = "生日")]//(3)

        public DateTime Birthday

        {

            get;

            set;

        }

    }

（1）为多行文本字段的属性，也用字符串属性表示。（2）多选数字条属性，使用数组表示。（3）生日字段属性，使用日期格式。

    二、在FormController添加如下函数：

public ActionResult OtherForm()

        {

            return View(

                new OtherFormModel {//(1)

                    MultiSliderValue = new int[] { 10, 40, 70 },

                    intro = "前面介绍了常用的Form表单组件，下面再介绍几种组件，就可以应付大多数表单组件的问题了。我们接下类介绍的有多行文本字段、日期字段，甚至还有多选数字条，这在有些场合特别有用。",

                    Birthday=DateTime.Now

                }

                );

        }

(1) 新建OtherFormModel类对象并对对象中各个属性赋初值。

三、给OtherForm函数增加View界面，并将OtherForm.cshtml中的内容替换如下：

@model ExtExamples.Models.OtherFormModel

@{

    Layout = "~/Views/Shared/_BaseLayout.cshtml";

    var X = Html.X();

}

@section example

{

    @(

 Html.X().FormPanel()

        .Title("其他字段")

        .Width(350)

        .Height(300)

        .Layout(LayoutType.Form)//（1）必须属性

        .Margin(10)

                .FieldDefaults(d => { d.LabelWidth = 150; })

        .Items(

        X.TextAreaFor(m => m.intro),

       

        X.SliderFor(m => m.MultiSliderValue),

        X.DateFieldFor(m => m.Birthday)

                )

        .Buttons(Html.X().Button()

            .Text("提交")

            .DirectClickUrl(Url.Action("OtherFormSubmit"))

    )

    )

}

（1）这里需要注意此属性为必须属性，它的意思为布局使用Form表单布局，否则多选数字条无法使用。

四、在FormController中建立数据处理函数OtherFormSubmit函数如下：

public FormPanelResult OtherFormSubmit(OtherFormModel OFModel)

        {

            X.Msg.Alert("其他文本字段", JSON.Serialize(OFModel)).Show();//(1)

            return this.FormPanel();

        }

运行此网页我们可以开到效果如下：

 

使用这些控件我们可以方便的选取各个控件值，功能可以跟商用开发的控件媲美。提交数据读取显示如下：