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. }

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

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

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

  10.         private ButtonAjaxHelper btnOK
  11.         {
  12.             get
  13.             {
  14.               var controlId = "btnOK";

  16.                 if (this._FINE_UI_MVC_CONTROLS_ == null)
  17.                 {
  18.                     this._FINE_UI_MVC_CONTROLS_ = new Dictionary<string, IControlBaseAjaxHelper<ControlBase>>();
  19.                 }

  21.                 if (!this._FINE_UI_MVC_CONTROLS_.ContainsKey(controlId))
  22.                 {
  23.                     this._FINE_UI_MVC_CONTROLS_[controlId] = UIHelper.Button(controlId);
  24.                 }

  26.                 return (ButtonAjaxHelper)this._FINE_UI_MVC_CONTROLS_[controlId];
  27.             }
  28.         }

  30.         private ButtonAjaxHelper btnCancel
  31.         {
  32.             get
  33.             {
  34.                var controlId = "btnCancel";

  36.                 if (this._FINE_UI_MVC_CONTROLS_ == null)
  37.                 {
  38.                     this._FINE_UI_MVC_CONTROLS_ = new Dictionary<string, IControlBaseAjaxHelper<ControlBase>>();
  39.                 }

  41.                 if (!this._FINE_UI_MVC_CONTROLS_.ContainsKey(controlId))
  42.                 {
  43.                     this._FINE_UI_MVC_CONTROLS_[controlId] = UIHelper.Button(controlId);
  44.                 }

  46.                 return (ButtonAjaxHelper)this._FINE_UI_MVC_CONTROLS_[controlId];
  47.             }
  48.         }
  49.         }
  50. }
复制代码


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. }

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


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

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


对视图文件(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