敏捷思维学习Ext.Net MVC--3.7Form表单组件之单选组件组（RadioGroup）

敏捷思维学习Ext.Net MVC--3.7Form表单组件之单选组件组（RadioGroup）

   这里我们之所以没有介绍单个的Radio，因为单选组件只有超过两个组件才有使用的意义否则我们用CheckBox代替即可，至于单个的RadioBox大家可以参照checkbox自己动手。要想提高网页的开发效率，必须给控件选择合适的数据结构，合适的数据结构能够大大提高开发的效率。

   在学习radioGroup前我们必须掌握一个数据结构enum。在实际中，有一些变量的取值被限定在一个有限的范围之内，比如说一星期内只有七天，性别只有男人和女人，一年只有十二个月。为此C语言提出了一种称为“枚举”（enum）的类型。在“枚举”（enum）类型的定义中列举出所有可能的取值，这种类型的取值不能超过定义的范围。比如说性别一项中只有男、女两种选项并且只能选一项。我们在FormModel中定义一个性别枚举类型如下：

public enum Sex

        { 

            Male,

            Female

        }

我们在在这个枚举类型的基础上定义枚举模型如下：

  public class EnumModel

        {

            public Sex ESex

            {

                get;

                set;

            }

        }

我们在为接下来的单选组件组（RadioGroup）在枚举模型的基础上定义模型如下：

  public class GroupForRadioModel

    {

        public EnumModel EnumSex

        {

            get;

            set;

        }

    }

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

public ActionResult MyRadioGroup()

        {

            GroupForRadioModel GFRModel = new GroupForRadioModel//(1)

            {

                EnumSex = new EnumModel { 

                    ESex=Sex.Male

                }

            };

            return View(GFRModel); //(2)

        }

（1）新建一个GroupForRadioModel对象。（2）将该对象推送到前端。

二、右键单击增加View页面MyRadioGroup.cshtml，将页面内容替换如下：

@model ExtExamples.Models.GroupForRadioModel//(1)

@{

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

}

@section example

{

    @(

        Html.X().FormPanel()

        .Title("单选字段")

        .Width(300)

        .Height(300)

        .Margin(10)

        .Items(

               

           Html.X().RadioGroupForEnum(m=>m.EnumSex.ESex) //(2)

             

                )

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

            .Text("提交")

            .DirectClickUrl(Url.Action("FormRadioGroupSubmit"))

    )

    )

}

（1）引入GroupForRadioModel模型。（2）根据Enum数据结构生成单选组件组。我们到前台用FireBug调试得到这个函数产生了以下代码：

items:[{xtype:"radiogroup",items:[{xtype:"radiofield",name:"EnumSex.ESex",value:true,boxLabel:" 男",inputValue:"0"}, {xtype:"radiofield",name:"EnumSex.ESex",value:false,boxLabel:" 女",inputValue:"1"}],allowBlank:false}]

透过这段代码我们可以的到这些信息：1.这个函数建立了一个radiogroup组件，这个组件有两个子元素，他们的名称都为name:"EnumSex.ESex"，radiogroup正是用相同的名称来确定属于同一组单选控件，以区分其它的单选控件组。可是到了这里有个问题就产生了我们以什么格式接收传回的数据，因为我们知道前后端通信是依靠name属性区分不同的数据的，但是这几个子元素却又相同的属性名！这是怎么回事！我们回过头来再看Html.X().RadioGroupForEnum(m=>m.EnumSex.ESex) //(2)这个函数，此函数是用m.EnumSex.ESex这个模型建立的组件，ESex对象是什么？我们看model中的定义public Sex ESex，它是一个Sex类的对象这样就好办了，我们在后台建立一个Sex类的对象接受数据即可。

三、在后台FormController中添加FormRadioGroupSubmit函数用来接收前台传递过来的数据如下：

public ActionResult FormRadioGroupSubmit([Bind(Prefix = "EnumSex.ESex")]Sex sex) //(1)

        {

            X.Msg.Alert("Employee", JSON.Serialize(sex)).Show();//(2)

            return this.Direct();

        }

（1）Bind是用来绑定前台传递过来的参数和模型的，Prefix（前缀）也就是前台的name属性：name:"EnumSex.ESex"，类型当然就是用什么类型创建的就用什么类型接收了我们这里定义一个Sex类的sex对象来接收数据，运行得到如下界面：

 

单击选项女并单击提交按钮得到如下所示结果：