FineUIMvc可以像FineUI一样任意的访问控件属性

棕榈

用过FineUI(WebForm)都知道，服务器端可以任意访问控件的属性，而FineUIMvc却不可以，这是因为WebForm在每一次回发时，会将所有控件属性回发到服务器端，服务器端根据回发的数据重现控件的状态，这样服务器端就可随意访问控件的属性了，而MVC的数据回发则由用户自己控制，你回发什么数据，服务器端才能访问什么数据，这样就没有了WebForm的便利性。那能不能实现服务器端可以任意的访问控件的属性，同时也不需要回发所有控件的属性呢？答案是可以，这就是我的大胆想法，可能有不足，也可能有局限性，所以需要大家积极提出。

这是现有的操作方式（来自FineUIMvc示例）
View中部分代码

1. F.TextBox()
   
2.                 .Label("用户名")
   
3.                 .EmptyText("请输入用户名")
   
4.                 .ID("tbxUserName")
   
5.                 .Required(true)
   
6.                 .ShowRedStar(true),
   
7.             F.TextBox()
   
8.                 .ID("tbxPassword")
   
9.                 .Label("密码")
   
10.                 .EmptyText("请输入密码")
    
11.                 .TextMode(TextMode.Password)
    
12.                 .Required(true)
    
13.                 .ShowRedStar(true),
    
14.             F.Button()
    
15.                 .ID("btnSubmit")
    
16.                 .CssClass("marginr")
    
17.                 .OnClick(Url.Action("btnSubmit_Click"),
    
18.                     new Parameter("userName", "F.ui.tbxUserName.getValue()"),
    
19.                     new Parameter("password", "F.ui.tbxPassword.getValue()")
    
20.                 )
    
21.                 .ValidateForms("SimpleForm1")
    
22.                 .Text("登录"),
    
23.             F.Button()
    
24.                 .ID("btnReset")
    
25.                 .Text("重置")
    
26.                 .OnClientClick("F.ui.SimpleForm1.reset();")

复制代码

Controller中的部分代码

1. [HttpPost]
   
2. [ValidateAntiForgeryToken]
   
3. public ActionResult btnSubmit_Click(string userName, string password)
   
4. {
   
5.      UIHelper.Label("labResult").Text("用户名：" + userName + " 密码：" + password);
   
6.      return UIHelper.Result();
   
7. }

复制代码

而现在我们只需要这样做
View中部分代码，与之前相比只是去掉事件部分，事件放到TS中去写

1. F.TextBox()
   
2.                 .Label("用户名")
   
3.                 .EmptyText("请输入用户名")
   
4.                 .ID("tbxUserName")
   
5.                 .Required(true)
   
6.                 .ShowRedStar(true),
   
7.             F.TextBox()
   
8.                 .ID("tbxPassword")
   
9.                 .Label("密码")
   
10.                 .EmptyText("请输入密码")
    
11.                 .TextMode(TextMode.Password)
    
12.                 .Required(true)
    
13.                 .ShowRedStar(true),
    
14.             F.Button()
    
15.                 .ID("btnSubmit")
    
16.                 .CssClass("marginr")
    
17.                 .ValidateForms("SimpleForm1")
    
18.                 .Text("登录"),
    
19.             F.Button()
    
20.                 .ID("btnReset")
    
21.                 .Text("重置")
    
22.                 .OnClientClick("F.ui.SimpleForm1.reset();")

复制代码

Controller中部分代码

1. [HttpPost]
   
2. [ValidateAntiForgeryToken]
   
3. public ActionResult btnSubmit_Click(string customParam)
   
4. {
   
5.      this.labResult.Text("用户名：" + this.tbxUserName.GetValue() + " 密码：" + this.tbxPassword.GetValue() + "自定义参数：" + customParam);
   
6.      return UIHelper.Result();
   
7. }

复制代码

当然你现在不能这样去做，GetValue()方法是一个扩展方法，还有很多类似这样扩展方法，扩展方法主要来源于客户端对象中的方法，GetValue()会从回发的数据中获取所对应控件的属性。

那客户端如何回发呢，这一部分也是最主要的。
1、解析Controller，并提取出所有的公共方法，同时解析出所有的方法参数
2、解析方法中所调用的预定义扩展方法，通过扩展方法获取所调用的对象，并获取对象的名称
3、通过方法中的参数名称及解析出来的对象名称在TS中构建一个类，用于客户端的数据回发


构建出的TS类（自动生成）

1. export class btnSubmit_Click_Params {
   
2. 
   
3.      public tbxUserName: string;
   
4.      public tbxPassword: string;
   
5.      public customParam: string;
   
6. 
   
7.      constructor() {
   
8.          this.tbxUserName = UI.tbxUserName.getValue();
   
9.          this.tbxPassword = UI.tbxPassword.getValue();
   
10.      }
    
11. }

复制代码

客户端中的事件操作

1. UI.btnSubmit.onClick(() => {
   
2.     let params = new btnSubmit_Click_Params();
   
3.     params.customParam = '自定义参数';
   
4. 
   
5.     F.doPostBack('default/btnSubmit_Click', '', params);
   
6. });

复制代码

整个过程除了Action的URL不是强类型，但这一块可以优化，其它全是强类型。

以上就是我的个数想法，可行性也得到的证实，只是不知道有没有局限性及不足，我想在着手去做之前，考虑的更全面一些，所以希望大家多提意见。

FineUIMvcTools插件事后的更新，将不在支持直接下载，而是通过回复并给出意见的才有可能获得。（记得留邮箱）


附上之前的相关帖子

离FineUIMvc可视化开发更进一步了
http://fineui.com/bbs/forum.php? ... d=9696&fromuid=5871


FineUI的TypeScript类型定义文件
http://fineui.com/bbs/forum.php? ... d=9616&fromuid=5871

tomgy1987

你的目的是做什么，技术研究吗？

棕榈

tomgy1987 发表于 2017-5-10 12:44
你的目的是做什么，技术研究吗？

目的是在FineUIMvc给我们带来轻便的同时，也能够像使用FineUI一样方便

tarcyshu

强!

ciaw

继续支持可视化操作，简便。

虫子

牛人呀，但看不懂

剑气纵横

请问现在还在继续吗? 期待结果 634775870@qq.com