FineUI 官方论坛
标题:
FineUIMvc可以像FineUI一样任意的访问控件属性
[打印本页]
作者:
棕榈
时间:
2017-5-10 12:33
标题:
FineUIMvc可以像FineUI一样任意的访问控件属性
本帖最后由 棕榈 于 2017-5-10 13:00 编辑
用过FineUI(WebForm)都知道，服务器端可以任意访问控件的属性，而FineUIMvc却不可以，这是因为WebForm在每一次回发时，会将所有控件属性回发到服务器端，服务器端根据回发的数据重现控件的状态，这样服务器端就可随意访问控件的属性了，而MVC的数据回发则由用户自己控制，你回发什么数据，服务器端才能访问什么数据，这样就没有了WebForm的便利性。那能不能实现服务器端可以任意的访问控件的属性，同时也不需要回发所有控件的属性呢？答案是可以，这就是我的大胆想法，可能有不足，也可能有局限性，所以需要大家积极提出。
这是现有的操作方式（来自FineUIMvc示例）
View中部分代码
F.TextBox()
.Label("用户名")
.EmptyText("请输入用户名")
.ID("tbxUserName")
.Required(true)
.ShowRedStar(true),
F.TextBox()
.ID("tbxPassword")
.Label("密码")
.EmptyText("请输入密码")
.TextMode(TextMode.Password)
.Required(true)
.ShowRedStar(true),
F.Button()
.ID("btnSubmit")
.CssClass("marginr")
.OnClick(Url.Action("btnSubmit_Click"),
new Parameter("userName", "F.ui.tbxUserName.getValue()"),
new Parameter("password", "F.ui.tbxPassword.getValue()")
)
.ValidateForms("SimpleForm1")
.Text("登录"),
F.Button()
.ID("btnReset")
.Text("重置")
.OnClientClick("F.ui.SimpleForm1.reset();")
复制代码
Controller中的部分代码
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult btnSubmit_Click(string userName, string password)
{
UIHelper.Label("labResult").Text("用户名：" + userName + " 密码：" + password);
return UIHelper.Result();
}
复制代码
而现在我们只需要这样做
View中部分代码，与之前相比只是去掉事件部分，事件放到TS中去写
F.TextBox()
.Label("用户名")
.EmptyText("请输入用户名")
.ID("tbxUserName")
.Required(true)
.ShowRedStar(true),
F.TextBox()
.ID("tbxPassword")
.Label("密码")
.EmptyText("请输入密码")
.TextMode(TextMode.Password)
.Required(true)
.ShowRedStar(true),
F.Button()
.ID("btnSubmit")
.CssClass("marginr")
.ValidateForms("SimpleForm1")
.Text("登录"),
F.Button()
.ID("btnReset")
.Text("重置")
.OnClientClick("F.ui.SimpleForm1.reset();")
复制代码
Controller中部分代码
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult btnSubmit_Click(string customParam)
{
this.labResult.Text("用户名：" + this.tbxUserName.GetValue() + " 密码：" + this.tbxPassword.GetValue() + "自定义参数：" + customParam);
return UIHelper.Result();
}
复制代码
当然你现在不能这样去做，GetValue()方法是一个扩展方法，还有很多类似这样扩展方法，扩展方法主要来源于客户端对象中的方法，GetValue()会从回发的数据中获取所对应控件的属性。
那客户端如何回发呢，这一部分也是最主要的。
1、解析Controller，并提取出所有的公共方法，同时解析出所有的方法参数
2、解析方法中所调用的预定义扩展方法，通过扩展方法获取所调用的对象，并获取对象的名称
3、通过方法中的参数名称及解析出来的对象名称在TS中构建一个类，用于客户端的数据回发
构建出的TS类（自动生成）
export class btnSubmit_Click_Params {
public tbxUserName: string;
public tbxPassword: string;
public customParam: string;
constructor() {
this.tbxUserName = UI.tbxUserName.getValue();
this.tbxPassword = UI.tbxPassword.getValue();
}
}
复制代码
客户端中的事件操作
UI.btnSubmit.onClick(() => {
let params = new btnSubmit_Click_Params();
params.customParam = '自定义参数';
F.doPostBack('default/btnSubmit_Click', '', params);
});
复制代码
整个过程除了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
时间:
2017-5-10 12:44
你的目的是做什么，技术研究吗？
作者:
棕榈
时间:
2017-5-10 12:50
tomgy1987 发表于 2017-5-10 12:44
你的目的是做什么，技术研究吗？
目的是在FineUIMvc给我们带来轻便的同时，也能够像使用FineUI一样方便
作者:
tarcyshu
时间:
2017-5-10 13:20
强!
作者:
ciaw
时间:
2017-5-11 22:32
继续支持可视化操作，简便。
作者:
虫子
时间:
2017-5-12 10:45
牛人呀，但看不懂
作者:
剑气纵横
时间:
2019-6-29 18:44
请问现在还在继续吗? 期待结果
634775870@qq.com
欢迎光临 FineUI 官方论坛 (https://fineui.com/BBS/)
Powered by Discuz! X3.4
