没想好的个人博客

在FineUICore扩展（三）中，为Form控件中的Field扩展了数据属性，让前后台与实体交互更方便，今天扩展一下简单的布局：在知道一行有几列的时候F.FormRow().Items()这段代码是冗余的，想象一下如果将一行三列变成一行两列要重复写一遍布局。

• • • • 导言
      • 1. 为F.Form扩展RowsEx实现简单布局

导言

在FineUICore扩展（三）中，为Form控件中的Field扩展了数据属性，让前后台与实体交互更方便，今天扩展一下简单的布局：在知道一行有几列的时候F.FormRow().Items()这段代码是冗余的，想象一下如果将一行三列变成一行两列要重复写一遍布局。

1. 为F.Form扩展RowsEx实现简单布局

RowsEx方法，通过Field总数量，和一行几列（几个Field），实现自动排版（自动生成FormRow），其实实现起来不难，就是一个想法，就像我写的js，控件不用注册事件，只要按规则命名直接写实现方法一样。

在FineUIEx中加入RowsEx方法：

    /// <summary>
    /// 通过列数简单布局
    /// </summary>
    /// <param name="f"></param>
    /// <param name="clo"></param>
    /// <param name="extensions"></param>
    /// <returns></returns>
    public static FormExtension RowsEx(this FormExtension f, int clo, params FineUICore.IControlBaseExtension[] extensions)
    {
        var F = new UIExtension<dynamic, dynamic>();
        string ColumnWidths = GetWidthsByClo(clo);
        //计算多少行
        int count = extensions.Length;
        double d = count / clo;
        int rowcount = Convert.ToInt32(Math.Ceiling(d));
        int c = 0;//计数还有几个没加
        //行集合
        List<FormRowExtension> listfr = new List<FormRowExtension>();
        for (int i = 0; i < rowcount; i++)
        {
            List<IControlBaseExtension> cbs = new List<IControlBaseExtension>();
            for (int j = (i) * clo; j < (i + 1) * clo; j++)
            {
                c++;
                cbs.Add(extensions[j]);
            }
            listfr.Add(F.FormRow().ColumnWidths(ColumnWidths).Items(cbs.ToArray()));
        }
        List<IControlBaseExtension> lastcbs = new List<IControlBaseExtension>();
        for (int i = c; i < count; i++)
        {
            lastcbs.Add(extensions[i]);
        }
        listfr.Add(F.FormRow().ColumnWidths(ColumnWidths).Items(lastcbs.ToArray()));
        f.Rows(listfr.ToArray());
        return f;
    }

在前台cshtml中这样使用:

.RowsEx(1,
    F.TextBox().Label("姓名").DataField("Name").Required(true),
    F.DropDownList().Label("性别").DataField("Gender").Required(true)
     .Items(
        F.ListItem().Text("男").Value("1"),
        F.ListItem().Text("女").Value("0")
        ),
    F.TextBox().Label("入学年份").DataField("EntranceYear"),
    F.DropDownList().Label("是否在校").DataField("AtSchool")
     .Items(
        F.ListItem().Text("是").Value("1"),
        F.ListItem().Text("否").Value("0")
        ),
    F.TextBox().Label("所学专业").DataField("Major"),
    F.TextBox().Label("分组").DataField("Group")
)

第一个参数，完全可以读取配置指定，这样页面的布局就是动态的了。

具体效果，可以在FineUIMVC扩展中查看。