之前为F.Grid做了扩展，自动生成了三个按钮，并和本身的window控件联动弹出编辑窗口。编辑窗口以F.Form为主，这次我把F.Form控件增加扩展，主要用于绑定数据，拿取数据，自动验证并提交，以及简单的布局。

# 1. 为F.Form绑定数据（字段赋值）
FineUICore本身有[model和表单的对照demo](http://core.fineui.com/#/DataModel/UICompare)，就是MVC的传统写法，通过用模型绑定控件，但是我项目里的Model是没有特性的，就是传统的类

        /// <summary>
        /// ID
        /// </summary>
        public int Id { get; set; }
        
所以如果为表单控件赋值就要写成 ID.Text = ms.XXX;，如果能实现自动匹配映射是很减少工作量的。

首先要在js为F.Form扩展 setValue 和 getValue 方法，将Model的Json格式绑定到表单的各个控件，然后在取值返回Json格式，传到后台(.cs)再转为Model进行保存操作。

这种模式绑定和读取数据很像Grid的操作，Grid中有两个关键属性，DataIDField 和 DataField 属性，一个是标识字段名，一个是绑定的字段名，如果我为F.Form()(.cshtml)扩展这两个属性

        F.Form().Width(900).LabelWidth(100).BodyPadding(5).EnableCollapse(true)
         .ID("Form1").Title("表单1")
         .DataIDField("Id")//数据标识字段名
表单项

        F.TextBox().Label("姓名").DataField("Name")//字段名称
        F.DropDownList().Label("性别").DataField("Gender")//字段名称
         
那么js怎么获取到我绑定的 Id，Name，Gender 呢，这里用到了F自带的为HTML标签扩展的属性 Attribute ，该属性在 ControlBaseExtension 下，所有控件继承，该方法直接为HTML标签生成一个属性，js通过 attr 很容易就拿到了，把这个属性拿到，然后直接和JSON匹配就行了。

点击F.Form()，按F12，

        //
        // 摘要:
        //     表单面板控件扩展
        public FormExtension Form();

FineUIEx类中扩展增加方法  DataIDField

        /// <summary>
        /// 数据标识字段名
        /// </summary>
        /// <param name="f">控件实例</param>
        /// <param name="DataIDField">主键字段</param>
        /// <returns></returns>
        public static FormExtension DataIDField(this FormExtension f, string DataIDField)
        {
            //为Form增加属性
            f.Attribute("DataID", DataIDField);
            return f;
        }

字段的DataField，在Form的FormRow.Items中参数为IControlBaseExtension[]

        //
        // 摘要:
        //     子控件集合
        //
        // 参数:
        //   extensions:
        public FormRowExtension Items(params IControlBaseExtension[] extensions);

如果将DataField扩展到IControlBaseExtension中，会有问题，所有控件都继承IControlBaseExtension，但是我只需要输入的控件 比如 TextBox 或 DropDownList ，又不能每个控件都单独扩展，所以找到所有文本输入控件都继承的类 FieldExtension

    //
    // 摘要:
    //     表单字段基类扩展
    //
    // 类型参数:
    //   T:
    //
    //   TExtension:
    public abstract class FieldExtension

这里还要注意，DataField 方法返回的是当前实例，即谁继承FieldExtension就返回谁（比如F.DropDownList()有DataSource方法而F.TextBox()没有，如果返回统一类型将无法继承该控件实例的单独属性）。

FineUICore自己就解决了这个问题，比如 Label 方法，就在FieldExtension下，所有表单控件继承，

        //
        // 摘要:
        //     标签文本
        //
        // 参数:
        //   param:
        public TExtension Label(string param);

注意该方法的返回类型是TExtension，泛型，哪来的呢，上层传过来的，比如 DropDownList控件，

    //
    // 摘要:
    //     下拉列表控件扩展
    public class DropDownListExtension : TextFieldExtension<DropDownList, DropDownListExtension>

看<DropDownList, DropDownListExtension>，他已经把自己的类型，通过T参数传到他的继承类中了，所以Label后还可以返回当前实例，落在表单的DataField中，应该这么写

        /// <summary>
        /// 绑定数据字段
        /// </summary>
        /// <typeparam name="T"></typeparam>
        /// <typeparam name="TExtension"></typeparam>
        /// <param name="f"></param>
        /// <param name="datafield"></param>
        /// <returns></returns>
        public static TExtension DataField<T, TExtension>(this FieldExtension<T, TExtension> f,string datafield) 
            where T : Field
            where TExtension : FieldExtension<T, TExtension>
        {
            f.Attribute("data", datafield);
            return (TExtension)f;
        }

到此对.cshtml的扩展就结束了，下面是js的扩展，主要是用attr方法，查找 DataID 和 data 属性

    if (F.Form) {
        $.extend(F.Form.prototype, {
            //得到数据 （是否验证）
            getdata: function (isv) {
                var t = this;
                var data = t.initData || {};
                if (isv) {
                    if (!F.validateForm(t.id, '_self', false, false)) {
                        return false;
                    }
                }
                var datael = $(t.el).find(".f-field[data]");
                //循环表单项
                $.each(datael, function (i, v) {
                    var id = $(v).attr("id");
                    var d = $(v).attr("data").replace("Data_", "");
                    //如果存在data属性 
                    if (d) {
                        //取值
                        data[d] = F.ui[id].getValue();
                        //注意日期控件 取text，否则会提取出时间戳
                        if (F.ui[id].type == 'datepicker') {
                            data[d] = F.ui[id].getText();
                        }
                    }
                })
                //返回json
                return data;
            },
            //设置数据
            setdata: function (data) {
                var t = this;
                t.initData = data;
                var datael = $(t.el).find(".f-field[data]");
                //绑定dataid
                var dataid = $(t.el).attr("DataID");
                if (dataid && dataid != '') {
                    F.ui[t.id].beforDataID = F.ui[t.id].DataID;
                    F.ui[t.id].DataID = data[dataid];
                };
                //循环表单项
                $.each(datael, function (i, v) {
                    var id = $(v).attr("id");
                    var d = $(v).attr("data").replace("Data_", "");
                    if (d && (typeof data[d]) != 'undefined') {
                        //找到data属性，并赋值
                        F.ui[id].setValue(data[d]);
                    }
                })
            }
        });
    }

扩展完成，使用时可以直接这样

表单控件(.cshtml)

        F.Form().Width(900).LabelWidth(100).BodyPadding(5).EnableCollapse(true)
         .ID("Form1").Title("表单1")
         .DataIDField("Id")

表单项(.cshtml)

        F.TextBox().Label("姓名").DataField("Name").Requ(true),
        F.DropDownList().Label("性别").DataField("Gend.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")

js(.cshtml)

        F.ready(function () {
            F.ui['Form1'].setdata(@Html.Raw(ViewBag.data));
        })

后台.cs

        public ActionResult Index()
        {
            MsStudent ms1 = new MsStudent();
            //得到实体数据
            ms1 = studentHelper.GetMsById(Convert.ToInt32(101));
            ViewBag.data = JObject.FromObject(ms1).ToString();
            return View();
        }

        
> 具体效果，可以在[FineUIMVC扩展](http://140.143.155.224:8086/#/Form/FormData)中查看。

FineUICore扩展（三）

FineUICore也出了一段时间了，我把FineUIMVC的代码整理移植了下，发现除了把FineUIMVC替换成FineUICore外其他代码都能用。以前写过[FineUIMVC的扩展](140.143.155.224:8086)，现在我将一步步整理到FineUICore中并在此作为记录以供大家学习。





在开发项目中，有很多代码是重复冗余的（原谅我没基础过高深的框架），比如当用到Grid控件，往往用到增删改按钮，我在这里做了扩展，前天通过几行代码生成按钮并与后台交互，代码可能只适用我的开发环境，主要记录的是方法。

# 1. 前台写什么
这里前台只的是 .cshtml文件，通常给Grid控件添加按钮是放在Toolbar的Items里，如下

    .Toolbars(
        F.Toolbar().Items(
                F.Button().Text("新增").ID("btnadd").Icon(Icon.Add).OnClientClick(""),
                F.Button().Text("修改").ID("btnedit").Icon(Icon.ApplicationEdit).OnClientClick(""),
                F.Button().Text("删除").ID("btndel").Icon(Icon.Delete).OnClientClick("")
            )
        )

如果要扩展，通过后台生成Items里的Button，首先要查看Items接收什么参数（带括号明显是个方法，括号里就是参数），点击Items按F12，飞过去，有两段，如下

    //
    // 摘要:
    //     子控件集合
    //
    // 参数:
    //   extensions:
    public ToolbarExtension Items(params IControlBaseExtension[] extensions);
    //
    // 摘要:
    //     子控件集合
    //
    // 参数:
    //   items:
    public ToolbarExtension Items(params ControlBase[]items);

明显是重载，所以我们的扩展方法返回IControlBaseExtension[]或ControlBase[]都可以。

然后再给方法取个名字叫DefaultGridBtn，参数是Grid的ID

方法作为FineUI的扩展，是通过F点出来的，如下

    .Toolbars(
        F.Toolbar().Items(
                //生成默认的Grid增删改按钮
                F.DefaultGridBtn("Grid1")
            )
        )

# 2. 扩展类
新建一个类

    using Microsoft.AspNetCore.Html;
    using Newtonsoft.Json.Linq;
    using System;
    using System.Collections.Generic;
    using System.Data;
    using System.IO;
    using System.Linq;
    using System.Text;
    using System.Text.Encodings.Web;

    //命名空间要用FineUICore
    namespace FineUICore
    {
        /// <summary>
        /// FineUICore扩展
        /// </summary>
        public static class FineUIEx
        {
        }
    }

为F做扩展，要找到F是谁，var F = Html.F(); 每个页面都有，点击F()按F12，飞过去，有好几个重载，一个就够了，如下

    //
    // 摘要:
    //     FineUICore的扩展方法工厂
    //
    // 参数:
    //   helper:
    //
    // 类型参数:
    //   TModel:
    public static UIExtension<TModel, TModel> F<TModel(this IHtmlHelper<TModel> helper);

F的类型是 UIExtension<TModel, TModel>，就是给他做扩展，所以有如下方法

    /// <summary>
    /// 返回默认Grid增删改按钮的默认配置 参数（GridID）
    /// </summary>
    /// <param name="F">当前的F</param>
    /// <param name="gridid">Grid的ID</param>
    /// <returns>按钮的集合</returns>
    public static ControlBase[] DefaultGridBtn(this UIExtension<dynamic, dynamic> F, string gridid)
    {
        List<ControlBase> DefaultBtn = new List<ControlBase>();
        return DefaultBtn.ToArray();
    }

目前就前台就能点出来了，下面向里面放按钮就可以了

    /// <summary>
    /// 返回默认Grid增删改按钮的默认配置 参数（GridID）
    /// </summary>
    /// <param name="F">当前的F</param>
    /// <param name="gridid">Grid的ID</param>
    /// <returns></returns>
    public static ControlBase[] DefaultGridBtnEx(this UIExtension<dynamic, dynamic> F, string gridid)
    {
        List<ControlBase> DefaultBtn = new List<ControlBase>();

        var v = F.Button().ID(gridid + "new").Text("新增").OnClientClick("").IconFont(IconFont.Plus).Source;
        DefaultBtn.Add(v);

        v = F.Button().ID(gridid + "edit").Text("修改").OnClientClick("").IconFont(IconFont.Pencil).Source;
        DefaultBtn.Add(v);

        v = F.Button().ID(gridid + "delete").Text("删除").OnClientClick("").IconFont(IconFont.Minus).Source;
        DefaultBtn.Add(v);

        return DefaultBtn.ToArray();
    }

前台触发了什么，当然也是封装好的，下一此再放出来，配合扩展自动生成的window窗体控件，以及表单控件Form的扩展，让我们拥有自己的快速开发框架。

> 静态博客是个好东西，我会把所有我写完的扩展都放出来，然后开源（尽量），但是首先，我要给这个静态博客做个留言板。

> [我的博客](https://shixixiyue.gitee.io/blog2/) <br/>
> [我的QQ](tencent://message/?uin=935732994&Site=''&Menu=yes)

FineUICore扩展（一）

.NetCore部署Centos7手记


[在线安装](https://dotnet.microsoft.com/download/linux-package-manager/centos7/runtime-current)

# 1. 查看防火墙状态
```
firewall-cmd --state
```


#  2. Nginx 重启
>* 配置文件： /usr/local/nginx/conf
>* 路径：/usr/local/nginx/sbin
>* 重启：./nginx -s reload 

配置摘要如下


```

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       7070;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            proxy_pass http://localhost:8070; #启动的asp.net core进程
            root   html;
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }
    
    server {
        listen       7071;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            proxy_pass http://localhost:8071; #启动的asp.net core进程
            root   html;
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443;
    #    server_name  localhost;

    #    ssl                  on;
    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_timeout  5m;

    #    ssl_protocols  SSLv2 SSLv3 TLSv1;
    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers   on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}

```



#  3. Start.sh 
    #!/bin/sh
    #启动MVC
    cd /usr/myapp/myappbox/
    nohup dotnet MyAppBox.dll &
>* 错误：./Start.sh: /bin/sh^M: 坏的解释器: 没有那个文件或目录
>* 执行：sed -i 's/\r$//' Start.sh

![](https://shixixiyue.gitee.io/blog2//post-images/1684476353708.png)


# 4.  ShutDown.sh
```
port=8070 #项目端口号
#根据端口号查询对应的pid
pid=$(netstat -nlp | grep :$port  | awk '{print $7}' | awk -F"/" '{ print $1 }');
#杀掉对应的进程，如果pid不存在，则不执行
if [ -n  "$pid" ];  then
    kill -9 $pid;
fi
```
![](https://shixixiyue.gitee.io/blog2//post-images/1684476414070.png)

# 5.  根据端口号得到其占用的进程的详细信息

    netstat -tlnp|grep 80
    kill -9 10345