离FineUIMvc可视化开发更进一步了

棕榈

前一段时间发了一个关于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. 
   
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;
   
3. 
   
4. namespace FineUIMvc.EmptyProject.Controllers
   
5. {
   
6.         public partial class DefaultController
   
7.         {
   
8.        private Dictionary<string, IControlBaseAjaxHelper<ControlBase>> _FINE_UI_MVC_CONTROLS_;
   
9. 
   
10.         private ButtonAjaxHelper btnOK
    
11.         {
    
12.             get
    
13.             {
    
14.               var controlId = "btnOK";
    
15. 
    
16.                 if (this._FINE_UI_MVC_CONTROLS_ == null)
    
17.                 {
    
18.                     this._FINE_UI_MVC_CONTROLS_ = new Dictionary<string, IControlBaseAjaxHelper<ControlBase>>();
    
19.                 }
    
20. 
    
21.                 if (!this._FINE_UI_MVC_CONTROLS_.ContainsKey(controlId))
    
22.                 {
    
23.                     this._FINE_UI_MVC_CONTROLS_[controlId] = UIHelper.Button(controlId);
    
24.                 }
    
25. 
    
26.                 return (ButtonAjaxHelper)this._FINE_UI_MVC_CONTROLS_[controlId];
    
27.             }
    
28.         }
    
29. 
    
30.         private ButtonAjaxHelper btnCancel
    
31.         {
    
32.             get
    
33.             {
    
34.                var controlId = "btnCancel";
    
35. 
    
36.                 if (this._FINE_UI_MVC_CONTROLS_ == null)
    
37.                 {
    
38.                     this._FINE_UI_MVC_CONTROLS_ = new Dictionary<string, IControlBaseAjaxHelper<ControlBase>>();
    
39.                 }
    
40. 
    
41.                 if (!this._FINE_UI_MVC_CONTROLS_.ContainsKey(controlId))
    
42.                 {
    
43.                     this._FINE_UI_MVC_CONTROLS_[controlId] = UIHelper.Button(controlId);
    
44.                 }
    
45. 
    
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. }
   
6. 
   
7. public ActionResult btnCancel_Click()
   
8. {
   
9.     this.btnCancel.Text("Cancel 按钮被点击");
   
10.     return UIHelper.Result();
    
11. }

复制代码

在Index.ts中我们只需要这样做

1. import { UI } from './Index.Designer';
   
2. 
   
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

赞一下，刚学MVC

zy32002

很想知道你那个vs插件是怎么做的？

jacky_j

赞一下，表示支持！

sanshi

zy32002 发表于 2017-5-9 10:09
很想知道你那个vs插件是怎么做的？

确实，可以分享下VS插件的制作，貌似很多人感兴趣，可以写成技术问题发到其他技术社区

甘桂

分享下VS插件的制作

兵兵

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

棕榈

VS插件不是本主题的重点哦，看样大家不太关注这个主题
插件制作没什么难的，创建一个VSIX Project项目，项目中还有示例链接，依葫芦画瓢，创建个简单的插件没什么难度。

棕榈

兵兵 发表于 2017-5-10 21:55
谢谢！学习中 貌似不支持VS2017

插件是在VS2015下开发的，我没有安装VS2017，也没法去测试，所以去掉了VS2017的支持，等插件稳定下来，会考虑对VS2017的支持。

ciaw

支持可视化，学习下。