> 实在是没有系统学习找工具，只能自己造，代替部分人工操作，实现提交代码后测试环境拉取测试，发布版本后正式环境拉取编译 发布。


@[toc]

#### 环境
-|-
-|-
代码环境|.Net Core 3.1
版本管理器|Gitea（Docker）[搭建](https://www.cnblogs.com/guitu18/p/12817272.html)
操作系统|Linux（以下服务器均为 Centos 7）
正式服务器IP|.15
镜像服务器IP<br>（作为正式服务镜像用于测试）|.38 
测试服务器IP|.43
代码版本服务器IP|.44（就是Gitea所在服务）

#### 提交策略（略）

![提交策略](https://shixixiyue.gitee.io/blog2//post-images/1684483423763.png)

#### 1. 服务器拉取的脚本

测试服务器中有一个脚本，从git上拉取最新代码（配置git过程略），然后将发布的代码覆盖，并启动服务。

这里我在VS中将项目发布，并一同提交，脚本直接拉取发布的文件夹进行本地覆盖，不在服务器上二次编译，但是 正式环境需要二次编译以保证编译通过才能发布。

该脚本在/home/gitpull.sh 下

注意 dev 为测试用代码分支

```
echo 

mainpath=/home/MES #git路径 主程序路径
cd $mainpath
echo ----流水线开始获取代码----

#reset是重置 强制拉取的目的
git reset --hard origin/dev
git pull


cd $mainpath
project=/home/MES/02_Source/MES/MES/bin/Release/netcoreapp3.1/publish #项目路径 需要发布的路径
deploy=/home/MESpublish #发布后路径
dllname=MES.dll #应用名称


echo ------执行结束命令-----
cd $deploy
./ShutDown.sh

echo ------复制发布的文件-----
cp -rf $project $deploy


echo ------执行start----
./Start.sh


echo ------结束------

```

ShutDown.sh 代码 用于停止.net core 项目

```
port=80 #项目端口号
#根据端口号查询对应的pid
pid=$(netstat -nlp | grep -w :$port  | awk '{print $7}' | awk -F"/" '{ print $1 }');
#杀掉对应的进程，如果pid不存在，则不执行
if [ -n  "$pid" ];  then
    kill -9 $pid;
fi
```

Start.sh 代码 用于启动项目

```
#!/bin/sh
#启动MVC
#先到目录下 否则报错
cd /home/MESpublish/publish
#不显示日志
nohup dotnet HD.MES.dll >/dev/null 2>&1&
~                                              
```
`如果不cd到发布路径虽然会启动项目，但是访问会报错！原因未知`

在发布后手动执行这个脚本，就可以愉快的测试了

![拉取](https://shixixiyue.gitee.io/blog2//post-images/1684483450424.png)

#### 2. Gitea Web钩子配置
> 这里的钩子就是当Git触发动作时向指定的Web服务推送一段JSON，动作包括 拉取 推送 发布 分支 等，JSON中包含项目信息 提交人 版本信息 等。

这里我主要配置了发布钩子

![钩子配置](https://shixixiyue.gitee.io/blog2//post-images/1684483461957.png)

![发布配置](https://shixixiyue.gitee.io/blog2//post-images/1684483465857.png)

保存后发送的内容

![保存后发送的内容](https://shixixiyue.gitee.io/blog2//post-images/1684483482170.png)

可以看到我的 测试服务器上有一个服务8070 ，是一个自己写的WebAPI服务，核心代码如下:

#### 3. 触发脚本的服务

> 该服务主要接收发布的事件，触发sh脚本（/home/MESReleases/pullPublish.sh）

```
using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
using System;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;

namespace GitWebApiTest.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class GiteaController : ControllerBase
    {
        [HttpPost]
        public ActionResult<string> Post(dynamic _data)
        {
            dynamic data = JsonConvert.DeserializeObject(Convert.ToString(_data));
            Task.Run(() =>
            {
                string path = data["repository"]["name"].ToString();
                if (path == "项目名称")
                {
                    try
                    {
                        //Console.WriteLine(data);
                        var tag_name = data["release"]["tag_name"].ToString();

                        JArray assets = JArray.FromObject(data["release"]["assets"]);
                        var urls = assets.AsJEnumerable().Select(x => x).ToArray()
                        .Select(x =>
                            $"{x["browser_download_url"]}|{x["name"]}"
                          );

                        var prerelease = data["release"]["prerelease"].ToString() == "True" ? "1" : "0";
                        //Console.WriteLine(string.Join(",", urls));

                        if (prerelease == "true") { return; }//拦截预览版 稳定版才执行

                        //创建一个ProcessStartInfo对象 使用系统shell 指定命令和参数 设置标准输出
                        var sh = $"/home/MESReleases/pullPublish.sh {tag_name} {prerelease} {string.Join(",", urls)}";
                        Console.WriteLine(sh);

                        var psi = new ProcessStartInfo("sh", sh)
                        {
                            RedirectStandardOutput = true
                        };
                        //启动
                        var proc = Process.Start(psi);
                        if (proc == null)
                        {
                            Console.WriteLine("Can not exec.");
                        }
                        else
                        {
                            Console.WriteLine("-------------Start read standard output--------------");
                            //开始读取
                            using (var sr = proc.StandardOutput)
                            {
                                while (!sr.EndOfStream)
                                {
                                    Console.WriteLine(sr.ReadLine());
                                }

                                if (!proc.HasExited)
                                {
                                    proc.Kill();
                                }
                            }
                        }
                    }
                    catch (Exception ex) { }
                }
            });
            //}
            return "OK";
        }
    }
}
```

#### 4. 推送到正式服务器

pullPublish.sh 脚本 用于将发布后的源码下载，解压，编译，打包（压缩），发送到正式服务器的指定目录，这样我在发布时点击保存，正式服务器就有包了

代码较多， 这里进行拆解

4.1 判断参数

脚本接收三个参数：
* 版本号，必须 用于创建目录，拼接下载地址
* 是否是预览版，必须 判断代码包是否发送到正式服务器（预览版不发送）
* 附件地址，非必须 以逗号分割

```
if [ 2 -gt $# ]
   then
     echo  "缺少参数：第1个参数是版本号，第2个参数 1 预览版 0 稳定版"
     exit;
fi
```

4.2 创建发布目录和log目录

也可以不赋权限

```
mainpath=/home/MESReleases/$1
if [ ! -d $mainpath  ];then
    mkdir $mainpath
    chmod 777 $mainpath
fi
Logpath=/home/MESReleases/log`date '+%Y%m%d'`.log
echo " " >> $Logpath
echo "———————$1————————–" >> $Logpath
```

4.3 下载到刚才建立的文件夹

之间将版本号 $1 拼接到下载的地址

使用 wget 进行下载 -P 表示指定目录
```
#下载
wgeturl=http://192.168.123.44:9000/……/archive/$1.tar.gz
echo "开始下载" $wgeturl >> $Logpath
echo "开始下载" $wgeturl
wget -N $wgeturl -P $mainpath
```

下载文件超过1G会很慢，改为通过Git命令获取源码，git会自动检测更新项不用每次都下载 代码如下

在指定目录下载源码，执行一次就行
```
 cd /home/MESReleases/Source/
 git init
 git config --local core.sparsecheckout true
 git remote add origin http://192.168.123.44:9000/XXXX
 #只获取指定目录 即代码所在目录
 echo '/02_Source/' >> .git/info/sparse-checkout
 git pull origin master
```

将下载代码替换为获取
```
//到源码目录下
cd /home/MESReleases/Source/
#重置
git fetch
#拉取
git reset --hard origin/master
git pull

#如果有先删除
if [ -f $1/02_Source ]; then
 rm -rf $1/02_Source
fi
#复制 注意-r的使用，没有提示 cp 略过目录
cp -r 02_Source $1/02_Source

#此代码会让代码获取速度提示一半，并且留存了版本代码，但是只会获取最新的代码，对于发布最新代码也可以
```


4.4 解压

--exclude 是跳过文件的意思
--strip-components 是跳级的意思
```
#解压

echo "开始解压到" $mainpath >> $Logpath
echo "开始解压到" $mainpath
tar -zxf $mainpath/$1.tar.gz --exclude=/hd_mes/01_设计书说明文档 --exclude=/hd_mes/03_其他资料 -C $mainpath hd_mes/02_Source/MES/ --strip-components 1

```

4.5 编译发布

-nowarn 表示不弹出编号为XXX的提示
-o 发布到指定目录

```
echo "开始发布" $project >> $Logpath
echo '开始发布' $project

project=$mainpath/02_Source/…….csproj
publish="$mainpath/publish"
if [ ! -d $publish  ];then
    mkdir $publish
    chmod 777 $publish
fi

#增加本地变量，指定执行目录，dotnet在后台执行时会失去运行上下文导致报错
export DOTNET_CLI_HOME=/home

dotnet publish $project -c Release -o $publish --self-contained false -nowarn:msb3202,nu1503,cs1591,cs0168,cs1998,cs4014,cs0219,cs0472,MSB3277,CS8632,CS0108,CS0162,CS8321,CS1570,CS1587
echo "发布成功" >> $Logpath
echo '发布成功'
```

4.6 打包压缩

注意这里也是 cd 之后再压缩，否则会按路径压缩

```
echo "开始打包" >> $Logpath
echo '开始打包'
file=$1.tar.gz
cd $mainpath
tar czf $mainpath/$file ./publish
echo "打包完成" >> $Logpath
echo '打包完成'
```

4.7 发送文件

rsync -a 和 scp 的效果是一样的，发送到指定服务器的指定目录

向服务器发送 需要两个服务器[设置免密](https://blog.csdn.net/u013415591/article/details/81943189)

```
mainserver=root@192.168.2.15
imageserver=root@192.168.123.38
if [ $2 -eq 0 ];then
    echo "发送" $mainpath/$file >> $Logpath
    echo '发送' $mainpath/$file
    ssh $mainserver "mkdir $mainpath"
    ssh $imageserver "mkdir $mainpath"
    rsync -a $mainpath/$file $mainserver:$mainpath
    scp $mainpath/$file $imageserver:$mainpath
fi
```

4.8 附件的下载与发送

```
echo "得到附件" $3  >> $Logpath
if [ -n "$3" ];then
    assetpath=$mainpath/assets
    if [ ! -d $assetpath  ];then
        mkdir $assetpath
        chmod 777 $assetpath
    fi
    assets=$3
    assets=${assets//,/ }
    for element in $assets
    do
        asseturl=`echo $element | cut -d '|' -f 1`
        assetname=`echo $element | cut -d '|' -f 2`
        echo "下载附件" $asseturl "|" $assetname >> $Logpath
        wget -N $asseturl -O $assetpath/$assetname -P $assetpath
    done
    ssh $mainserver "mkdir $mainpath"
    ssh $mainserver "mkdir $assetpath"

    ssh $imageserver "mkdir $mainpath"
    ssh $imageserver "mkdir $assetpath"

    echo "发送文件" $assetpath >> $Logpath
    scp -r $assetpath $mainserver:$mainpath
    scp -r $assetpath $imageserver:$mainpath
fi
```

![发布](https://shixixiyue.gitee.io/blog2//post-images/1684483556083.png)

#### 5. 正式服务器更新

更新需要经历：
* 备份当前版本
* 解压新版本 覆盖
* 关闭服务
* 开启服务

得到当前版本我直接在项目中 增加了API 获取版本
```
version=$( curl -s http://localhost/api/Version| awk '{print $0}')
```

具体脚本解释参照上面

```
#启动
#!/bin/bash
if [ 1 -gt $# ]
   then
     echo  "缺少参数：第1个参数是版本号"
     exit;
fi
mainpath=/home/MESReleases/$1
if [ ! -f $mainpath/$1.tar.gz  ];then
     echo  "没有版本文件 $mainpath/$1.tar.gz 退出"
     exit;
fi
Logpath=/home/MESReleases/log`date '+%Y%m%d'`.log
echo " " >> $Logpath
echo "———————发布 $1————————–" >> $Logpath

version=$( curl -s http://localhost/api/Version| awk '{print $0}')
echo "得到版本信息 $version" >> $Logpath
echo "得到版本信息 $version" 
echo "备份 $version" >> $Logpath
echo "备份 $version" 
/home/MESBackup.sh $version
echo "停止 $version" >> $Logpath
echo "停止 $version" 
/home/MESpublish/Shutdown.sh
echo "更新文件 $1" >> $Logpath
echo "更新文件 $1" 
tar -zxf $mainpath/$1.tar.gz  --exclude=publish/log --exclude=publish/appsettings.json -C /home/MESpublish/
echo "启动 $1" >> $Logpath
echo "启动 $1" 
```

![更新](https://shixixiyue.gitee.io/blog2//post-images/1684483505267.png)

---

之后会结合自动测试命令，让发布更`敏捷`

```
dotnet test --configuration release --logger:"trx;LogFilePrefix=testResults" -v normal -noconlog
```

关于我自己搭建 .Net Core 半自动部署

> 好看清爽的终端工具



[GitHub地址](https://github.com/Eugeny/tabby) 有点慢

---
阿里云分享
[tabby-1.0.173-setup-终端工具.exe](https://www.aliyundrive.com/s/y1BprQAfZQy)

---

版本

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


配置页面

![设置](https://shixixiyue.gitee.io/blog2//post-images/1684483103567.jpg)


自定义链接

![自定义链接](https://shixixiyue.gitee.io/blog2//post-images/1684483112507.png)

![自定义链接](https://shixixiyue.gitee.io/blog2//post-images/1684483123040.png)


在插件中下载 quick-cmds 可以编辑快捷按钮

![快捷按钮](https://shixixiyue.gitee.io/blog2//post-images/1684483132734.png)

![快捷按钮](https://shixixiyue.gitee.io/blog2//post-images/1684483139929.png)

Windows终端工具-Tabby Terminal

![fembushitu.png](/static/img/3798914231cce4a51e7c7c39653e2e7f.fembushitu.webp)

最近有个页面，一个大表单字段比较多，而且表也分开了，为了各部分解耦，用到了分部视图，怎么写参官网例子就可以了， 这里说一下怎么引用的JS，（2022年1月13日 追加了解决方法）

分部视图后 其实生成的还是一个页面，各部分可以直接使用父页面的js，但是这样就不模块了，最好自己的View使用自己的js和css，与其他部分交互可以通过注册事件的方式，这样就解耦了，总之 vue 组件 就是香；




# 1. 使用和注意
直接这样使用，将整个`ViewData`都传过去

```
@section body {
    @(
      layout(
          await Html.PartialAsync("StepView", ViewData),
          await Html.PartialAsync("Step1View", ViewData),
          await Html.PartialAsync("Step2View", ViewData),
          await Html.PartialAsync("Step3View", ViewData),
          await Html.PartialAsync("Step4View", ViewData),
          await Html.PartialAsync("Step5View", ViewData),
          await Html.PartialAsync("Step6View", ViewData)
       )
    )
}
```

:::warning{title="注意"}
使用分部视图，到最后还是生成一个页面，其中的控件ID，js名称等不要重复，否则就重复了；
:::

# 2. 分部视图的js和css

这样的只能在爹页面写，可以写在单独的js文件里，引用，但是引用也是在爹写，每个模块的js在父页面引用一遍又割裂了，所以最好还是自己输出自己的js，好在F有现成的


:::note{title="注"}
1. 由于分部视图的js是动态输出出来的（addJS就是插入了一个<script>标签），控件在绘制时输出的js找不到动态数据的js文件里的方法，这么写就报错了，找不到js方法 onEnter ↓↓
```
F.TextBox().DataField("MES_F1_SH_180").Label("采集SN号")
  .Listeners(
     new Listener("enter", "onEnter")
  )
```
需要匿名函数包一下，这样就行了👇，
```
new Listener("enter", "(()=>{onEnter();})();")
```
2. F.ready也没有，用setTimeout(() => {},0) 代替，注册各事件啥的；


:::
    
通过加入标记，在编译页面时进行输出，后台方法如下：
```
        #region 为分部视图注册引用文件用


        /// <summary>
        /// 注册Items 用以输出 见RenderSection
        /// </summary>
        /// <param name="htmlHelper"></param>
        /// <param name="template"></param>
        /// <param name="addToSection"></param>
        /// <returns></returns>
        public static Microsoft.AspNetCore.Html.HtmlString Section(this Microsoft.AspNetCore.Mvc.Rendering.IHtmlHelper htmlHelper, Func<object, Microsoft.AspNetCore.Mvc.Razor.HelperResult> template, string addToSection)
        {
            htmlHelper.ViewContext.HttpContext.Items[String.Concat("_", addToSection, "_", Guid.NewGuid())] = template;
            return Microsoft.AspNetCore.Html.HtmlString.Empty;
        }

        /// <summary>
        /// 注册Items 用以输出 见RenderSection
        /// </summary>
        /// <param name="htmlHelper"></param>
        /// <param name="template"></param>
        /// <param name="addToSection"></param>
        /// <returns></returns>
        public static Microsoft.AspNetCore.Html.HtmlString SectionStr(this Microsoft.AspNetCore.Mvc.Rendering.IHtmlHelper htmlHelper, string template, string addToSection)
        {
            htmlHelper.ViewContext.HttpContext.Items[String.Concat("_", addToSection, "_", Guid.NewGuid())] = template;
            return Microsoft.AspNetCore.Html.HtmlString.Empty;
        }

        /// <summary>
        /// 在分部视图中 添加 js 文件引用
        /// </summary>
        /// <param name="htmlHelper"></param>
        /// <param name="template"></param>
        /// <returns></returns>
        public static Microsoft.AspNetCore.Html.HtmlString addJS(this Microsoft.AspNetCore.Mvc.Rendering.IHtmlHelper htmlHelper, Func<object, Microsoft.AspNetCore.Mvc.Razor.HelperResult> template)
        {
            return htmlHelper.Section(template, "scripts");
        }

        /// <summary>
        /// 用作分部视图的 输出 见 Section
        /// </summary>
        /// <param name="htmlHelper"></param>
        /// <param name="sectionName"></param>
        /// <returns></returns>
        public static Microsoft.AspNetCore.Html.HtmlString RenderSection(this Microsoft.AspNetCore.Mvc.Rendering.IHtmlHelper htmlHelper, string sectionName)
        {
            foreach (object key in htmlHelper.ViewContext.HttpContext.Items.Keys)
            {
                if (key.ToString().StartsWith(String.Concat("_", sectionName, "_")))
                {
                    try
                    {
                        var template = htmlHelper.ViewContext.HttpContext.Items[key] as Func<object, Microsoft.AspNetCore.Mvc.Razor.HelperResult>;
                        if (template != null)
                        {
                            htmlHelper.ViewContext.Writer.Write(template(null));
                        }
                    }
                    catch { }
                    try
                    {
                        var template = htmlHelper.ViewContext.HttpContext.Items[key] as string;
                        if (!string.IsNullOrEmpty(template))
                        {
                            htmlHelper.ViewContext.Writer.Write(template);
                        }
                    }
                    catch { }
                }
            }
            return Microsoft.AspNetCore.Html.HtmlString.Empty;
        }

        #endregion
```
 

第二步 在 _Layout.cshtml加入 标记输出位置
```
@Html.RenderSection("scripts")

```


![FpwF7cedZlFHG5dv8TcP0uZ9kGPG.png](/static/img/af029a4fb46ddbb18a076a396e6e13c4.FpwF7cedZlFHG5dv8TcP0uZ9kGPG.webp)

在分部视图使用时像这样，


![Fh_6abt-ruA13bgFoQrwcclcOBI7.png](/static/img/f007a464f0dfa439ab2994a04183f4a1.Fh_6abt-ruA13bgFoQrwcclcOBI7.webp)

就可以解决上面的问题了，也可以正常使用F.ready了 😀👍👍

FineUICore使用分部视图

# 1. 需求


环境：FineUICore 本人JS比后台代码多


实际开发中有一个页面是一个父页面套两个iframe子页面，通过js进行交互；


结构图1：

![FjsbW4NO0wH3-_sKsjfdZRco-mcN.png](/static/img/986628cb6bda19d0aa3a08604880ad46.FjsbW4NO0wH3-_sKsjfdZRco-mcN.webp)

其中有一个方法，由子页面发起，由父页面提交到后台处理（因为参数来自于不同页面），再返回结果由父页面和子页面分别处理；




交互图2：

![Fq0qEjr-4tuJ6Nb_yoBWezjmemCy.png](/static/img/32b1e4e36ad9e0b183f26d50a7a4f385.Fq0qEjr-4tuJ6Nb_yoBWezjmemCy.webp)
交互图3：

![Fifn-4ToXmEGC3T6pvcI03FGva-5.png](/static/img/cc6c19f607c09696472f99be50d9f8ef.Fifn-4ToXmEGC3T6pvcI03FGva-5.webp)
其中的一些关键方法如下：


关键方法图4：

![FmJU_P48bp9U_sKqgtj0aAMuplzJ.png](/static/img/eaec489f4d52fdfe505d01326640504e.FmJU_P48bp9U_sKqgtj0aAMuplzJ.webp)
关键方法图5：

![FrJ4UX3yHNjHHKcB-Nko0LZKeuNu.png](/static/img/ffaacc79d434766bf5f01811bc734985.FrJ4UX3yHNjHHKcB-Nko0LZKeuNu.webp)


# 2. 引出问题


这里，父子页面的Save和SaveDone都是非线性的，断开的，如果 有一部分参数想传到SaveDone中还得靠后台中转或存到其他缓存中，而且这样写不方便阅读。


问题图6：

![FlAl7-jp5unFndVRC5XwbBZtjLp3.png](/static/img/beda24d9a71f6a9505f7cd7add408f66.FlAl7-jp5unFndVRC5XwbBZtjLp3.webp)


# 3. 理想策略


这里就要引出js的await方法，处理异步为同步，可以解决上面的问题，让写起来更符合阅读逻辑；


理想写法图7：

![Fj6_52hSSXaLwNivEWFpmF99NhXB.png](/static/img/1ad7eea4816b66008131ff7ed531f897.Fj6_52hSSXaLwNivEWFpmF99NhXB.webp)


# 4. 改造


如果想要写成await写法，核心F.doPostBack就要返回Promise对象；


js中新建一个方法F.doPostBackP，后台将通过guid找到前台的Promise；

```
    /**
	 * 2021年12月7日 更新了一下下
     * 返回Promise使前台可以同步
     * @param {Object} opts 只接收Obj数据
     */
    F.doPostBackP = (opts) => {
        const _complete = opts.complete;
        const autoLoading = opts.autoLoading;
        const guid = GetGuid();
        opts.complete = (...coms) => {
            if (autoLoading) {
                autoLoading.split(",").forEach(id => {
                    if (F.ui[id] && F.ui[id].hideLoading) {
                        F.ui[id].hideLoading();//showLoading
                    }
                });
            }
            _complete && _complete.apply(this, [...coms, guid]);
        };
        return new Promise(r => {
            //将r放到指定id中 参数args由后台赋值
            F.doPostBack[guid] = r;
            if (!opts.params) {
                opts.params = {}
            }
            //后台body中接收postGUID 参照UIdoPostBack
            opts.params.postGUID = guid;
            if (autoLoading) {
                autoLoading.split(",").forEach(id => {
                    if (F.ui[id] && F.ui[id].showLoading) {
                        F.ui[id].showLoading();//hideLoading
                    }
                });

                opts.enableAjaxLoading = false;
            }
            //执行原始回发
            F.doPostBack(opts);
        });
    }

```
在后台的BaseController中 , 增加执行方法，执行结果

```
    /// <summary>
    /// 返回参数 注意接收json格式，不支持字符串 配合 doPostBackP
    /// </summary>
    /// <param name="json"></param>
    public void UIdoPostBack(string json)
    {
      string postGUID = string.Empty;
      var Form = FineUICore.PageContext.Current.Request.Form;
      if (Form.ContainsKey("postGUID"))
      {
        postGUID = Form["postGUID"];
      }
      var Script = $"F.doPostBack['{postGUID}']({json});";
      FineUICore.PageContext.RegisterStartupScript(Script);
    }
```

这里后台直接输出'""'格式会报错，所以当前只写了输出对象；


最后将理想写法中F.doPostBack改为F.doPostBackP，后台直接调用UIdoPostBack("{msg:'保存成功'}");即可；


:::info{title="相关连接"}
[FineUICore-F.doPostBack的Promise改造](https://blog.shizhuoran.top/post/53)

[FineUI Core Grid按钮模板列-1](https://blog.shizhuoran.top/post/54)

[FineUI Core Grid按钮模板列-2](https://blog.shizhuoran.top/post/55)
:::

FineUICore-F.doPostBack的Promise改造

例子中行按钮的用着很别扭，绘制和事件是分离的，我改了一下封装了一个下，代码放上，可以直接拿走，自己扩展，看注释就能会，不会的问我


Index.cshtml


先看写法，再看实现，前台写法，正常列的写法，扩展了一个属性，也是传入绘制的js：

![FpHtgvGw8RBCrCO5RFGBYRFg1DhT.png](/static/img/be2086a5760f1d4c372dd7907a599c47.FpHtgvGw8RBCrCO5RFGBYRFg1DhT.webp)




绘制的js，可以看到绘制和事件是连续的，也可以控制权限：
```

        /*绘制btns，
         * 前两个参数与api一样
         * {v} 第一个参数是cell的值，注意先要有DataField属性，这里的v是性别；
         * {p} 第二个参数是该行的对象，比如 rowId,columnId,rowValue等，自己可以打印出来看看；
         * {m} 第三个参数是扩展出的参数，为模板列模板绘制方法，目前只封装了按钮的模板，也可以自己封装别的；
         * {return string/model}可以返回模板，也可以直接返回string的html
         */
        function renderBtns(v, p, m) {
            //返回按钮的模板，如果多个时按钮返回数组即可
            return m.btn([{
                text: "编辑",
                id: 'edit',
                //点击事件
                click() {
                    notifyEx("编辑" + p.rowId);
                },
                //按权限返回false
                beforRender(t) {
                    if (v == 1) {
                        //返回false 则不绘制
                        return false;
                    }
                }
            },{
                text: "删除",
                id: 'del',
                //点击事件
                click() {
                    if (v == 1) {
                        notifyEx("删除" + p.rowId);
                    }
                },
                //按权限返回false
                //参数t就是当前按钮的对象，可以对t.el进行操作，是一个jqDOM
                beforRender(t) {
                    if (v != 1) {
                        //对t进行绘制，比如新增样式
                        t.el.addClass("f-state-disabled");
                    }
                }
            }]);
        }

```


![FvY6P6PKJt3fBe_jRcyEjxtyzwXm.png](/static/img/e9c8b23b313d76a1f597e9601116cc39.FvY6P6PKJt3fBe_jRcyEjxtyzwXm.webp)

![FglalxvBvFXtIAHGcrcoMjIswtLt.png](/static/img/8a901b5d53c468c98151e73d1c97630b.FglalxvBvFXtIAHGcrcoMjIswtLt.webp)

![Fg1GhNZ8sugZ6XI6hqUoMPi0-r31.png](/static/img/073d5d6f21cbd10e8b3c665083e4f112.Fg1GhNZ8sugZ6XI6hqUoMPi0-r31.webp)
实现


先看扩展的RendererFunctionEx方法，

```
        /// <summary>
        /// 绘制回调方法 参数为JS名称
        /// </summary>
        /// <param name="f"></param>
        /// <param name="fn"></param>
        /// <returns></returns>
        public static RenderFieldExtension RendererFunctionEx(this RenderFieldExtension f, string fn) {
            f.RendererFunction("renderEx("+fn+")");
            return f;
        }
```

核心是renderEx方法，再现保姆级注释

```
    //返回组装后的函数
    renderEx = function (fn) {
        //创建模板
        let model = {
            //按钮模板
            btn(opt) {
                const _btn = (_opt = opt) => {
                    //按钮和text 默认 是value
                    _opt.id = `${_opt.id}_${this.params.rowId}_${this.params.columnId}`;
                    _opt.text = _opt.text || this.value;

                    //绘制按钮
                    _opt.el = $(`<a id="${_opt.id}">`).addClass("f-btn f-state-default").append(`<span>${_opt.text}</span>`);

                    //触发绘制前方法
                    let b = _opt.beforRender && _opt.beforRender.apply(this, [_opt]);

                    //注册按钮事件 注意由于还没有绘制所以只能延迟
                    _opt.click && setTimeout(() => {
                        //可以自己加入其他事件
                        $('#' + _opt.id).on('click', function () {
                            doCallback(_opt.click, [_opt]);
                        })
                    }, 0);

                    //返回html
                    if (b || F.isEMP(b)) {
                        return _opt.el[0].outerHTML;
                    }
                    else {//如果绘制的方法回发fasle就没有html
                        return "";
                    }
                }

                //如果不是数组
                if (!F.isARR(opt)) {
                    return _btn();
                } else {
                    //如果是数组 加入到组里 加个间距的样式
                    let btndiv = $('<div class="GridRowBtns">');

                    opt.forEach(item => {
                        btndiv.append(_btn(item));
                    })
                    //返回html
                    return btndiv[0].outerHTML;
                }
            }
        }
        /*柯里化 
         * 最后还是返回一个方法，
         * 这个方法将被正常的RendererFunction执行，
         * 但是扩展了一个参数
         * 懂的都懂
         * */
        return (value, params) => {
            //先给model赋值
            Object.assign(model, {
                value,
                params
            });

            //在本示例中触发的是renderBtns方法 自己缕一缕，
            return doCallback(fn, [value, params, model]);
        }

        //apply的写法
        //doCallback = function (fn, args) {
        //    return fn.apply(this, args);
        //}
    }

```

还有一个按钮的样式

```
.GridRowBtns > a:not(:first-child) {
    margin-left: 5px;
}
.GridRowBtns > a:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
```


:::info{title="相关连接"}
[FineUICore-F.doPostBack的Promise改造](https://blog.shizhuoran.top/post/53)

[FineUI Core Grid按钮模板列-1](https://blog.shizhuoran.top/post/54)

[FineUI Core Grid按钮模板列-2](https://blog.shizhuoran.top/post/55)
:::