FineUI 官方论坛

标题: 离FineUIMvc可视化开发更进一步了 [打印本页]

作者: 棕榈    时间: 2017-5-8 20:37
标题: 离FineUIMvc可视化开发更进一步了
本帖最后由 棕榈 于 2017-5-8 20:32 编辑

前一段时间发了一个关于FineUIMvc可视化开发的探讨帖子(http://www.fineui.com/bbs/forum.php?mod=viewthread&tid=9635&fromuid=5871),也没有多少人关注,只好自己琢磨了。

FineUIMvc是基于IFrame的单页面程序,这是我对它的理解(不知道对不对),这叫我想起了之前所学的Angular2,Angular2中有个组件的概念,组件由视图(html)、样式(css)、应用逻辑(ts)等部分构成


FineUIMvc也可以套用一下这个概念,Default看成一个组件,而DefaultController看成服务器端逻辑,视图及样式如下图



按照这个方式,就要约束一下,每一个Controller只允许一个Action(Index)返回视图,其它Action为逻辑处理,响应客户端的Ajax请求,这样我们就可以将它们整体看成一个组件,组件中就包含了视图、样式、客户端逻辑、服务器端逻辑。


在文件加载方面由于FineUIMvc每一个页面都是基于IFrame加载,也就不存在脚本及样式的冲突问题,同时我在TS的空项目中也加入了一个自动加载的方式(http://www.fineui.com/bbs/forum. ... d=9616&fromuid=5871


基于以上的概念我做了一个VS的扩展工具包(FineUIMvcTools,可在附件中下载),在上下文件菜单中添加了一个“FineUIMvc控制器”菜单项,单击后输入控制器名,就会自动创建以下6个文件







当我们在视图文件中(Index.cshtml)输入以下内容时
  1. @{
  2.     ViewBag.Title = "Index";
  3.     var F = Html.F();
  4. }

  5. @section body {
  6.     @(
  7.         F.Button()
  8.             .ID("btnOK")
  9.             .Text("OK")
  10.             .OnClick("btnOK_Click")
  11.     )
  12.     @(
  13.         F.Button()
  14.             .ID("btnCancel")
  15.             .Text("Cancel")
  16.             .OnClick("btnCancel_Click")
  17.     )
  18. }
复制代码
DefaultController.Designer.cs及Index.Designer.ts中会自动生成控件的引用

DefaultController.Designer.cs文件内容(自动生成)
  1. using FineUIMvc;
  2. using System.Collections.Generic;

  3. namespace FineUIMvc.EmptyProject.Controllers
  4. {
  5.         public partial class DefaultController
  6.         {
  7.        private Dictionary<string, IControlBaseAjaxHelper<ControlBase>> _FINE_UI_MVC_CONTROLS_;

  8.         private ButtonAjaxHelper btnOK
  9.         {
  10.             get
  11.             {
  12.               var controlId = "btnOK";

  13.                 if (this._FINE_UI_MVC_CONTROLS_ == null)
  14.                 {
  15.                     this._FINE_UI_MVC_CONTROLS_ = new Dictionary<string, IControlBaseAjaxHelper<ControlBase>>();
  16.                 }

  17.                 if (!this._FINE_UI_MVC_CONTROLS_.ContainsKey(controlId))
  18.                 {
  19.                     this._FINE_UI_MVC_CONTROLS_[controlId] = UIHelper.Button(controlId);
  20.                 }

  21.                 return (ButtonAjaxHelper)this._FINE_UI_MVC_CONTROLS_[controlId];
  22.             }
  23.         }

  24.         private ButtonAjaxHelper btnCancel
  25.         {
  26.             get
  27.             {
  28.                var controlId = "btnCancel";

  29.                 if (this._FINE_UI_MVC_CONTROLS_ == null)
  30.                 {
  31.                     this._FINE_UI_MVC_CONTROLS_ = new Dictionary<string, IControlBaseAjaxHelper<ControlBase>>();
  32.                 }

  33.                 if (!this._FINE_UI_MVC_CONTROLS_.ContainsKey(controlId))
  34.                 {
  35.                     this._FINE_UI_MVC_CONTROLS_[controlId] = UIHelper.Button(controlId);
  36.                 }

  37.                 return (ButtonAjaxHelper)this._FINE_UI_MVC_CONTROLS_[controlId];
  38.             }
  39.         }
  40.         }
  41. }
复制代码


Index.Designer.ts文件内容(自动生成)
  1. export module UI {
  2.         export let btnOK = F<F.Button>('btnOK');
  3.         export let btnCancel = F<F.Button>('btnCancel');
  4. }
复制代码


这样我们只需要在DefaultController.cs中这样做就可以了
  1. public ActionResult btnOK_Click()
  2. {
  3.     this.btnOK.Text("OK 按钮被点击");
  4.     return UIHelper.Result();
  5. }

  6. public ActionResult btnCancel_Click()
  7. {
  8.     this.btnCancel.Text("Cancel 按钮被点击");
  9.     return UIHelper.Result();
  10. }
复制代码


在Index.ts中我们只需要这样做
  1. import { UI } from './Index.Designer';

  2. export module Default {
  3.     UI.btnOK.setText('确定');
  4.     UI.btnCancel.setText('取消');
  5. }
复制代码


对视图文件(Index.cshtml)的更改,同时DefaultController.Designer.cs及Index.Designer.ts文件也会随着更新,这样我们就可以做到强类型约束。

工具包安装完后,可以用TS的空项目做测试(http://www.fineui.com/bbs/forum. ... d=9616&fromuid=5871),空项目中已经包含了模块自动加载部分。

以上只是解决了控件的引用,但在FineUIMvc项目开发中,事件及数据提交也占了相当大一部分,所以说需要做的工作还很多,同时也希望大家多提意见,共同使FineUIMvc项目的开发更方便快捷。

作者: KK.Leung    时间: 2017-5-9 08:19
赞一下,刚学MVC
作者: zy32002    时间: 2017-5-9 10:09
很想知道你那个vs插件是怎么做的?
作者: jacky_j    时间: 2017-5-9 14:01
赞一下,表示支持!
作者: sanshi    时间: 2017-5-9 17:25
zy32002 发表于 2017-5-9 10:09
很想知道你那个vs插件是怎么做的?

确实,可以分享下VS插件的制作,貌似很多人感兴趣,可以写成技术问题发到其他技术社区
作者: 甘桂    时间: 2017-5-10 13:14
分享下VS插件的制作
作者: 兵兵    时间: 2017-5-10 21:55
本帖最后由 兵兵 于 2017-5-10 21:56 编辑

谢谢!学习中 貌似不支持VS2017

作者: 棕榈    时间: 2017-5-11 08:31
VS插件不是本主题的重点哦,看样大家不太关注这个主题
插件制作没什么难的,创建一个VSIX Project项目,项目中还有示例链接,依葫芦画瓢,创建个简单的插件没什么难度。
作者: 棕榈    时间: 2017-5-11 08:40
兵兵 发表于 2017-5-10 21:55
谢谢!学习中 貌似不支持VS2017

插件是在VS2015下开发的,我没有安装VS2017,也没法去测试,所以去掉了VS2017的支持,等插件稳定下来,会考虑对VS2017的支持。
作者: ciaw    时间: 2017-5-11 22:27
支持可视化,学习下。
作者: xuxuzhaozhao    时间: 2017-5-17 17:03
sanshi 发表于 2017-5-9 17:25
确实,可以分享下VS插件的制作,貌似很多人感兴趣,可以写成技术问题发到其他技术社区 ...

老大,冒昧问下,怎么controller中动态生成的Button,给的demo是在view中加载的
作者: 雨点    时间: 2017-5-19 08:33
大力支持了!!!!很感谢!!!
作者: 剑气纵横    时间: 2019-6-29 18:49
很好的贴子,请问还在继续研究吗




欢迎光临 FineUI 官方论坛 (https://fineui.com/bbs/) Powered by Discuz! X3.4