敏捷思维学习Ext.Net MVC--3.9Form表单组件之多项选择下拉菜单

来源：互联网发布：经纬度距离计算器软件编辑：程序博客网时间：2024/05/16 04:20

经过了上一节对前后台通信的扩展我们可以开发一些很实用的组件，以往的下拉菜单往往是单项选择的，ExtJs中X.ComboBoxFor()函数不单能自动生成单项选择的下拉菜单，而且当使用数据结构IEnumerable<ListItem> 时还可以自动生成多选下拉菜单项，但是如何接收数据成了一个问题，我试了好久都没有成功，有了Bind(Prefix = "Enums.ESex")函数后就方便多了我们可以很方便的读出各种各样的数据类型。

在Model中添加以下类

public class ComboxFieldAnimal

{

[Field(FieldLabel = "单选")]

public ListItem ComboSingle

{

get;

set;

}

[Field(FieldLabel = "多选")]

public IEnumerable<ListItem> ComboMulti//(1)

{

get;

set;

}

[Field(FieldLabel = "使用ID选择")]

public string ComboByID

{

get;

set;

}

public IEnumerable<ListItem> animals

{

get;

set;

}

IEnumerable<T>泛型接口是使用C#2.0泛型技术实现的一个接口，该接口允许对接口内部的元素进行列举操作，实现了IEnumerable<T>接口的集合对象叫做序列，可以在这个集合对象上使用标准查询操作符。我们这里只是建立了一个简单的对象没有用到特殊的方法，按照我们敏捷的哲学我们在这里只对它进行简单的了解具体的功能我们在使用中慢慢学习。

一、在FormController中添加以下函数：

public ActionResult ComBoxField()

{

ComboxFieldAnimal CFAnimal = new ComboxFieldAnimal//(1)

{

ComboSingle = new ListItem("狗", "1"),

ComboMulti=new ListItem[]{

new ListItem("狗", "1"),

new ListItem("猫","3")

ComboByID="2",

animals = new ListItem[]{

new ListItem("狗", "1"),

new ListItem("鸟", "2"),

new ListItem("猫","3"),

new ListItem("老虎", "4"),

new ListItem("熊", "5")

}

};

return View(CFAnimal);

}

(1)新建ComboxFieldAnimal对象CFAnimal并将此对象推送到View端

二、为此函数添加View界面ComBoxField.cshtml，将该文件内容替换如下：

@model ExtExamples.Models.ComboxFieldAnimal

Layout = null;

var X = Html.X();

}

<!DOCTYPE html>

<html>

<head>

<title>ComBoxField</title>

</head>

<body>

@X.ResourceManager()

X.FormPanel()

.Title("下拉菜单")

.Width(300)

.Height(300)

.Margin(10)

.Items(

X.ComboBoxFor(m => m.ComboSingle).Items(Model.animals),//(1)

X.ComboBoxFor(m=>m.ComboMulti).Items(Model.animals),//(2)

X.ComboBoxFor(m=>m.ComboByID).Items(Model.animals),//(3)

X.Button()

.ID("Text_submit")

.Text("提交")

.Disable(true)

.FormBind(true)

.DirectClickUrl(Url.Action("ComBoxFieldSubmit")

)

</body>

</html>

（1）使用ListItem对象生成ComboBox控件，此控件为单选控件。

（2）使用IEnumerable<ListItem> 对象生成的多选ComboBox控件。

（3）使用string对象ComboByID生成的单选ComboBox控件。

三、添加提交数据处理函数ComBoxFieldSubmit 从提交的Request中提取需要读取的数据：

public ActionResult ComBoxFieldSubmit([Bind(Prefix = "ComboMulti")]int[] multi, [Bind(Prefix = "ComboByID")]int ById, [Bind(Prefix = "ComboSingle")]int Single)//(1)

{

ComboxFieldAnimal CFAnimal = new ComboxFieldAnimal

{

ComboSingle = new ListItem("狗", "1"),

ComboMulti = new ListItem[]{

new ListItem("狗", "1"),

new ListItem("猫","3")

ComboByID = "2",

animals = new ListItem[]{

new ListItem("狗", "1"),

new ListItem("鸟", "2"),

new ListItem("猫","3"),

new ListItem("老虎", "4"),

new ListItem("熊", "5")

}

};

string MultiAnimal="";

int length = multi.Count();

for (int i = 0; i < length; i++)

{

int j=multi[i];

MultiAnimal += CFAnimal.animals.ToArray()[j-1].Text;

}

string ByIdAnimal = "";

ByIdAnimal = CFAnimal.animals.ToArray()[ById-1].Text;

string SingleAnimal = CFAnimal.animals.ToArray()[Single-1].Text;//(2)

string formString = "单选值为:";

formString += SingleAnimal;

formString += " 多选值为:";

formString += MultiAnimal;

formString += " 使用ID选择值为:";

formString += ByIdAnimal;

// string single = CFAnimal.ComboSingle.Value;

X.Msg.Alert("Employee", formString).Show();

return this.Direct();

}

（1）三种生成方式生成的comobox，多选ComboBox控件提交数据的绑定函数Bind(Prefix = "ComboMulti")]int[] multi，这里需要注意ComboBox控件提交上来的数据都是数据的ID属性，即ListItem("狗", "1")后面的那个数字，由于是多项选择提交上的就是整型数字列表。ListItem对象生成ComboBox控件绑定函数[Bind(Prefix = "ComboSingle")]int Single，string对象ComboByID生成的单选ComboBox控件与上面绑定函数相同[Bind(Prefix = "ComboByID")]int ById。

(2)CFAnimal.animals.ToArray()将IEnumerable<ListItem> animals对象转换为数列，使用数列读取其中数据的文本值，这里需要注意数列的下标是从0开始的，而我们创建IEnumerable<ListItem>时是从1开始的，所以这里需要将传回的下标值减去1得到的才是所需的数据。

0 0