ASP.NET-FineUI开发实践-2

FineUI好处之一在于No JS,这里的No JS并不是不使用JS,JS对于ASP.Net是必不可少的,只是FineUI把大部分JS封装,如果想用,后台提供了很多方法返回JS,Get...Reference都是返回JS代码用的,不仅在一些简单的页面前台变的很干净,而且大大减少了开发周期。我也学习了这个优点,集合FineUI打包了很多跟项目有关的通用JS,比如弹出选择人员窗口,选择部门窗口,弹出页面的功能后台点击事件可以解决,但我绑定了OnClientClick 事件要比触发后台的OnClick事件快了很多,关闭了按钮的EnablePostBack属性就是执行前台JS不用回发,感觉很受用。

分享几个提取出来的JS以结合程序逻辑方便使用

1.Window控件显示

01.F(‘windowID‘).f_show(strURL, ‘选择部门‘, 900, 500);

  发送URL,title,大小。这里要注意控件的ClientIDMode="Static"属性,要不前台获取不到

2.显示隐藏控件

EXTJS我也没学过,找了好久才找到,这个代码实现了前台隐藏一个模块,我把查询放里面了,因为RegionPanel缩回去又弹出一块来,不能说不好看但占的地大了,查询条件多又没地放,查完了手动隐藏,后台回发的方法也能实现但是有点慢,.hidden是获取显示状态 setVisible设置。

01.<f:RegionPanel ID="RegionPanel1" runat="server" ShowBorder="false">
02.       <Regions>
03.           <f:Region ClientIDMode="Static" runat="server" ShowBorder="true" ID="Region1" Position="Top"
04.               ShowHeader="false" Title="查询" Hidden="true" Split="true" EnableCollapse="false"
05.               HideMode="Visibility">
06.               <Items>
07.                   <f:Form runat="server" LabelAlign="Right" ShowBorder="false" ShowHeader="false" ID="Form2"
08.                       Collapsed="False" BoxConfigAlign="Center">
09.                       <Rows>
10.                           <f:FormRow runat="server" ColumnWidths="50% 50%">
11.                               <Items>
12.                                   <f:TriggerBox TriggerIcon="Search" ClientIDMode="Static" ID="txtUseDeptName" runat="server"
13.                                       Label="部门" BoxMargin="10" EnableEdit="false" EmptyText="请选择部门" >
14.                                   </f:TriggerBox>
15.                                   <f:DropDownList runat="server" ClientIDMode="Static" ID="ddlPos" Label="职位">
16.                                   </f:DropDownList>
17.                               </Items>
18.                           </f:FormRow>
19.                           <f:FormRow ID="FormRow1" runat="server" ColumnWidths="50% 50%">
20.                               <Items>
21.                                   <f:TextBox Label="登录名" ClientIDMode="Static" ID="txtLgName" runat="server">
22.                                   </f:TextBox>
23.                                   <f:TextBox Label="用户名" ClientIDMode="Static" ID="txtUserName" runat="server">
24.                                   </f:TextBox>
25.                               </Items>
26.                           </f:FormRow>
27.                       </Rows>
28.                       <Toolbars>
29.                           <f:Toolbar runat="server">
30.                               <Items>
31.                                   <f:Button Text="查询" Icon="Magnifier" OnClick="btnQuery_Click" runat="server" ID="btnQuery">
32.                                   </f:Button>
33.                                   <f:Button EnablePostBack="false" Text="取消查询" Icon="Cross" OnClientClick="ShowSearch()"
34.                                       runat="server" ID="Button3">
35.                                   </f:Button>
36.                                   <f:Button EnablePostBack="false" Text="重置" ToolTip="重置查询条件" Icon="Reload" OnClientClick="ClearSearch()"
37.                                       runat="server" ID="Button2">
38.                                   </f:Button>
39.                               </Items>
40.                           </f:Toolbar>
41.                       </Toolbars>
42.                   </f:Form>
43.               </Items>
44.           </f:Region>

  获取grid得到焦点,是选择行的样式,后台查询行号通过FineUI.PageContext.RegisterStartupScript()输出到前台获取焦点,后台没找到获取焦点的方法才写的,没必要重载grid数据时候用到。

4.直接通过行号修改指定列内容

1 01.function EditRowbyindex(index,value) {
2 02.           var grid = F(‘Grid1‘);
3 03.           grid.getView().focusRow(index);
4 04.           var row = grid.getView().getNode(index);
5 05.           $(row).find(‘.x-grid-cell-ColumnsID div.x-grid-cell-inner‘).text(value);  

列 ClientIDMode="Static" 还是重载grid很慢(硬伤),触发前台更改,反正也保存完了。这里要注意引用js/jquery-1.10.2.min.js文件,find就是find的class 可以连续点好几个一层一层的找,按F12一下就找到了,.text就是里面显示的信息

grid绑定就是把数据序列化后输出到前台通过前台EXTJS渲染和显示,大数据量时明显谷歌比IE快,因为谷歌处理JS就是快,官方建议100条就使用数据库分页,我又没写存储过程所以也一直使用仿数据库分页,就是把数据放缓存里,这也是跟官网例子学的。模拟的数据库分页比一次性加载快了很多,但也遇到很多问题,有时间再整理出来。

5.获取iframe

项目里iframe必不可少,因为我的全是页面级使用FineUI,以前项目里树控件是Ztree的,本来就做成单独页面可以用iframe调用,所以想直接执行ztree页面里js就行了。

01.function GetiframeWindow(ifrmname) {
02.            var ifrm1 = Ext.getCmp(ifrmname); //得到对象
03.            var iframe = Ext.DomQuery.selectNode(‘iframe‘, ifrm1.body.dom); //得到iframe对象
04.            var c = iframe.contentWindow; //转为Window对象
05.            return c;
06.        }

  调用js直接c.refreshTree就可以了。还可以直接写__doPostBack触发子页面的后台事件,爽急了。

修改地址是这个

1 01.function openifr(url) {
2 02.           var ifrm1 = Ext.getCmp(‘Region2‘); //得到对象
3 03.           var iframe = Ext.DomQuery.selectNode(‘iframe‘, ifrm1.body.dom); //得到iframe对象
4 04.           iframe.src = url;
5 05.       }  

因为FineUI是开源的,所以弄出好玩的东西我都会记录下来,可能我找到的方法不是最好的,所以请各路大神多指点。

时间: 2024-11-08 21:56:09

ASP.NET-FineUI开发实践-2的相关文章

ASP.NET5+EntityFramework7开发实践(三)

1.说明 在<ASP.NET5+EntityFramework7开发实践(一)>介绍过仓储模式,只是没有在控制器中如何使用? 本章重新补充一下.注意,也会使用ASP.NET5中的依赖注入. 2.仓储模式 先看接口: 1 public interface IRoleRepository:IDisposable 2 { 3 //IEnumerable和IQueryable 4 //二者在EF都会延迟加载,不同的是: 5 //IEnumerable是数据加载到内存,刷选在内存中的数据上执行 6 //

FineUI开发实践-目录

FineUI初学手册 下载,实例项目搭建 ASP.NET-FineUI开发实践-1 实际开发环境是FineUI 4.0.4,编辑页面回发,__doPostBack应用 ASP.NET-FineUI开发实践-2 1.Window控件显示2.显示隐藏控件4.直接通过行号修改指定列内容5.获取iframe ASP.NET-FineUI开发实践-3 1.参照模拟数据库分页通过缓存重写内存分页,优化页面响应速度2.得到指定行指定列的值后台3.按钮至少选择一项的通用方法,OnClientClick+=累加.

ASP.NET5+EntityFramework7开发实践(一)

 1.创建项目 创建“空白解决方案”,名为GiveCase. 在解决方案里,添加ASP.NET5 Empty模板项目,名为GiveCase.Web.  2.实体类 实体基类: 1 /// <summary> 2 /// 实体 抽象基类 3 /// </summary> 4 /// <typeparam name="TKey">主键类型</typeparam> 5 public abstract class EntityBase<TK

ASP.NET-FineUI开发实践-9(四)

现在是这么个问题,在开发中表格是动态出来的,就是标准板是全部字段列出,客户要根据情况列出自己想要的,在增加操作页面的同时要是能用前台自带的功能直接保存到后台就好了,现在的列显示和隐藏是不回发的. 1.FineUI引用的extjs是ext-part1.js,这就不说了,以前截过图,这个文件是压缩的,参数也是简化的不好看,其实这个就是ext-all.js,ext-all哪来的呢,就是extjs官方实例里下的,下来之后也是压缩的,旁边还有个不压缩的,ext-all-debug.js ,完全可以看,那我

ASP.NET MVC5 网站开发实践(二) Member区域 - 添加文章

转自:http://www.cnblogs.com/mzwhj/p/3592895.html 上次把架构做好了,这次做添加文章.添加文章涉及附件的上传管理及富文本编辑器的使用,早添加文章时一并实现. 要点: 富文本编辑器采用KindEditor.功能很强大,国人开发,LGPL开源,自己人的好东西没有理由不支持. 附件的上传同样基于KindEditor实现,可以上传图片,flash,影音,文件等. 目录 ASP.NET MVC5 网站开发实践 - 概述 ASP.NET MVC5 网站开发实践(一)

【新书推荐】《微软开源跨平台移动开发实践》带你走近微软开源开源跨平台技术

上周收到本书作者李争送的一本12月份的新书<微软开源跨平台移动开发实践——利用ASP.NET Core 1.0 .Apache Cordova.Xamarin和Azure快速构建移动应用解决方案>.这本书的名字超长.这本书也是超薄,只有220页,一个周末时间就读完了,但是这本书的内容确是超丰富,浓缩了微软这三年向开源和跨平台领域的转变,微软在开源和跨平台领域构建出来的一套技术体系.从服务端的NET Core.ASP.NET 和 Web APi ,到Web端的 Typescript脚本语言,再到

ASP.NET程序开发范例宝典

在整理资料时发现一些非常有用的资料源码尤其是初学者,大部分是平时用到的知识点,可以参考其实现方法,分享给大家学习,但请不要用于商业用途. 如果对你有用请多多推荐给其他人分享. 点击对应章节标题下载本章节下所有源代码. 目录: 第2章 HTML开发与实践 15 2.1 框架的使用 16 实例009 使用FrameSet框架布局聊天室 16 实例010 使用IFrame框架布局企业管理系统 17 2.2 滚屏的实现 18 实例011 滚动显示博客公告 18 实例012 滚屏效果并实现超级链接 20

ASP.NET跨平台最佳实践

前言 八年的坚持敌不过领导的固执,最终还是不得不阔别已经成为我第二语言的C#,转战Java阵营.有过短暂的失落和迷茫,但技术转型真的没有想象中那么难.回头审视,其实单从语言本身来看,C#确实比Java更优秀(并非C#天生丽质,而是它站在了巨人的肩膀上). 本文并非为.NET正名而来,而仅仅是分享作者近几年在ASP.NET跨平台方面的研究与实践经验,算是对八年的.NET之路作一个阶段性的总结. .NET技术自诞生以来,便一直因其跨平台能力差而广受诟病.这里面有微软有意为之,也有别有用心之人在混淆视

asp.net 网站开发流程总结

由于这学期要做asp.net的网站开发,导师让我们在前期做详细的计划说明,时间安排.由于网站开发流程不知道,以及需要学什么指示都是盲懂,所以计划安排需在了解大致流程之后才能做出来,一下是询问同学和在网上查阅,总结出的粗略的网站开发流程以及一些所需要学的知识.可能存在很多漏洞和缺陷,如大家看到了也希望大家指导..... 总结一 asp.net建网站的主要步骤 1. 首先是需求分析了,分析你打算做哪些功能,涉及哪些因素以及他们的关联关系等等. 2. 数据库设计,根据功能定义出可能的数据对象,设计出数

【新书推荐】《微软开源跨平台移动开发实践》--带你走近微软开源开源跨平台技术

上周收到本书作者李争送的一本12月份的新书<微软开源跨平台移动开发实践——利用ASP.NET Core 1.0 .Apache Cordova.Xamarin和Azure快速构建移动应用解决方案>.这本书的名字超长.这本书也是超薄,只有220页,一个周末时间就读完了,但是这本书的内容确是超丰富,浓缩了微软这三年向开源和跨平台领域的转变,微软在开源和跨平台领域构建出来的一套技术体系.从服务端的NET Core.ASP.NET 和 Web APi ,到Web端的 Typescript脚本语言,再到