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

导言

FineUICore也出了一段时间了,我把FineUIMVC的代码整理移植了下,发现除了把FineUIMVC替换成FineUICore外其他代码都能用。以前写过FineUIMVC的扩展,现在我将一步步整理到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的扩展,让我们拥有自己的快速开发框架。

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

我的博客

我的QQ