FineUI 官方论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

本论坛已关闭(禁止注册、发帖和回复)
请移步 三石和他的朋友们

FineUI首页 WebForms - MVC & Core - JavaScript 常见问题 - QQ群 - 十周年征文活动

FineUI(开源版) 下载源代码 - 下载空项目 - 获取ExtJS - 文档 在线示例 - 版本更新 - 捐赠作者 - 教程

升级到 ASP.NET Core 3.1,快、快、快! 全新ASP.NET Core,比WebForms还简单! 欢迎加入【三石和他的朋友们】(基础版下载)

搜索
查看: 16830|回复: 12

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

[复制链接]
发表于 2017-5-8 20:37:49 | 显示全部楼层 |阅读模式
本帖最后由 棕榈 于 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项目的开发更方便快捷。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
发表于 2017-5-9 08:19:08 | 显示全部楼层
赞一下,刚学MVC
发表于 2017-5-9 10:09:49 | 显示全部楼层
很想知道你那个vs插件是怎么做的?
发表于 2017-5-9 14:01:23 | 显示全部楼层
赞一下,表示支持!
发表于 2017-5-9 17:25:16 | 显示全部楼层
zy32002 发表于 2017-5-9 10:09
很想知道你那个vs插件是怎么做的?

确实,可以分享下VS插件的制作,貌似很多人感兴趣,可以写成技术问题发到其他技术社区
发表于 2017-5-10 13:14:25 | 显示全部楼层
分享下VS插件的制作
发表于 2017-5-10 21:55:32 | 显示全部楼层
本帖最后由 兵兵 于 2017-5-10 21:56 编辑

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

插件是在VS2015下开发的,我没有安装VS2017,也没法去测试,所以去掉了VS2017的支持,等插件稳定下来,会考虑对VS2017的支持。
发表于 2017-5-11 22:27:11 | 显示全部楼层
支持可视化,学习下。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|FineUI 官方论坛 ( 皖ICP备2021006167号-1 )

GMT+8, 2024-3-29 00:03 , Processed in 0.052959 second(s), 19 queries , Gzip On.

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表