敏捷思维学习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();
}
运行此网页我们可以开到效果如下:
使用这些控件我们可以方便的选取各个控件值,功能可以跟商用开发的控件媲美。提交数据读取显示如下: