敏捷思维学习Ext.Net MVC--3.8Form表单组件之使用Enum升级复选组件组（CheckboxGroup）暨前后台终极通信方式

 

  敏捷思维学习Ext.Net MVC--3.8Form表单组件之使用Enum升级复选组件组（CheckboxGroup）暨前后台终极通信方式

    经过了上节课的学习我们知道数据结构可以改进网站开发的效率，我们在这里对Checkbox进行升级，并将它和刚才的RadioGroup放入同一个Form表单中看看数据该如何通信。

一、设计数据模型

我们先在FormModel中定义一个动物枚举类：

[Flags]

public enum MyAnimal

    {

        [Display(Name = "狗", Order = 1)]

        Dog = 1,//(1)

        [Display(Name = "鸟", Order = 3)]

        Bird = 2,//(2)

        [Display(Name = "猴子", Order = 2)]

        Monkey = 4//(3)

    }

这里要注意（1）（2）（3）的取值，这里不是随意的而是有规律的，因为我们要进行枚举字段的或运算，这里我们的算法是当前数等于前面所有数的和加1，比如说第三个数4，等于1+2+1，如果有第四个数的话它的值为1+2+4+1=8，因为这是多选字段需要取或运算，取或运算是两个数相加如果这样取的话系统就可以自动解析出你都选择了那几个枚举值。

性别类我们依然保留

public enum Sex

    {

        [Display(Name = "男", Order = 1)]

        Male,

        [Display(Name = "女", Order = 2)]

        Female

    }

新建类EnumModel包含如下两个枚举字段

        public class EnumModel

    {

        public Sex ESex

        {

            get;

            set;

        }

        public MyAnimal EAnimal

        {

            get;

            set;

        }

    }

   

     

    新建GroupForModel类，这才是View页需要的最终模板。

public class GroupForModel

    {

        public string Name

        {

            get;

            set;

        }

        public EnumModel Enums

        {

            get;

            set;

        }

    }

二、在FormController中添加如下函数

public ActionResult MyGropFor()

        {

            GroupForModel GModel = new GroupForModel

            {

                Name="jack",

                Enums = new EnumModel {

                    EAnimal = MyAnimal.Bird | MyAnimal.Monkey,//(1)

                ESex=Sex.Male,

                

                

                }

 

            };

            return View(GModel);

        }

其他的我们就不介绍了，我们这里提醒一下（1），如果你不按刚才的规则设置枚举项的值得话，调试运行到这儿你会发现Enums的值是数字，因为或运算相加后系统无法解析你选择的是哪几项。

三、添加View页面文件MyGropFor.cshtml如下：

@model ExtExamples.Models.GroupForModel

@{

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

}

@section example

{

    @(

        Html.X().FormPanel()

        .Title("单选字段")

        .Width(300)

        .Height(300)

        .Margin(10)

        .Items(

               

           Html.X().RadioGroupForEnum(m=>m.Enums.ESex),

           Html.X().CheckboxGroupForEnum(m=>m.Enums.EAnimal),//(1)

           Html.X().TextFieldFor(m=>m.Name)

             

                )

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

            .Text("提交")

            .DirectClickUrl(Url.Action("FormGroupForSubmit"))

    )

    )

}

（1）这是复选组件组的生成函数

四、在FormController中添加FormGroupForSubmit函数处理传递过来的数据：

public FormPanelResult FormGroupForSubmit([Bind(Prefix = "Enums.ESex")]Sex sex, [Bind(Prefix = "Enums.EAnimal")]MyAnimal[] Animal, [Bind(Prefix = "Name")]string name)//(1)

        {

            X.Msg.Alert("Values", string.Format("最喜欢的动物: {0}, <br/>性别: {1},<br/>姓名:{2}", string.Join(", ", Animal.Select(b => b.ToString())), sex,name)).Show();//(2)

            return this.FormPanel();

        

        }

（1）我们在这里加入Name属性的原因主要是说明前台数据向后台传递的模式，我们可以先看看页面使用的模板类：

public class GroupForModel

    {

        public string Name

        {

            get;

            set;

        }

        public EnumModel Enums

        {

            get;

            set;

        }

    }

看到这儿你就明白了，前台向后台传递数据时不会讲一个大类的数据完整地给你传递回来，为什么因为我们的软件还没有发展到那么先进，而只能将最终能够用xxxxFor生成控件的类传递回来，我们怎么接受？用Bind(Prefix = "Enums.ESex")函数进行绑定再在后面加上跟这个对象同类的对象就行，至于"Enums.ESex"怎么确定，把模板类省略掉后面的类名用.做分隔符依次写全，不明白怎么办？没关系我们还有FireBug，直接到调试器中找到这个Form字段的Name属性值拷过来即可。讲到这儿我们前后台基本的通信可以说是没有问题了，你可以以此去扩展不同效能的控件了。

（2）跟以前稍有不同，这里使用的FormPanel返回前端的数据，并使用了字符串强制格式转换函数string.Format，这个函数的用法跟c语言中的print函数类似，只不过把占位符换为了{0}，数据在后面用逗号隔开以此补全就好了。

运行网页如下所示

 

 

提交数据后