FineUI 基于ExtJS的开源ASP.Net框架库--创建 No JavaScript,No CSS,No UpdatePanel,No ViewState,No WebServices 的网站应用程序
FineUI在线示例:http://www.fineui.com/demo/
特点:界面友好,专注业务开发,快速开发 如果用于商业开发需要授权,个人觉得挺好用的,特别是对于界面比较无助的,即是莫大的帮助
言归正传:
FineUI框架 查看Html生成代码?
先说说为什么有这个疑问?平常写的.aspx代码在浏览器上查看网页源码一般就能看到生成的Html代码,但是FineUI你看到的代码会是这样的。
Html生成的代码+ Ext注册脚本
1、在页面上使用 asp.net 的控件 需要包含在<x:ContentPane><asp:TextBox></asp:TextBox></x:ContentPanel>里面
<x:ContentPanel ID="ContentPanel2" Title="" ShowBorder="false" EnableBackgroundColor="false" EnableCollapse="true" ShowHeader="false" runat="server"> <div style="padding-left: 18px; padding-top: 3px; padding-bottom: 3px;"> 计划开始时间: <input id="Textbox_PlansBeginTime_Bills_Project" class="Wdate" type="text" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH',maxDate:'#F{$dp.$D(\'Textbox_PlansEndTime_Bills_Project\')||\'2020-10-01\'}'})" runat="server"/> </div> </x:ContentPanel> <x:ContentPanel ID="ContentPanel1" Title="" ShowBorder="false" EnableBackgroundColor="false" EnableCollapse="true" ShowHeader="false" runat="server"> <div style="padding-left: 18px; padding-top: 3px; padding-bottom: 3px;"> 计划结束时间: <input id="Textbox_PlansEndTime_Bills_Project" class="Wdate" type="text" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH',minDate:'#F{$dp.$D(\’Textbox_PlansBeginTime_Bills_Project\')}',maxDate:'2020-10-01'})" runat="server" /> </div> </x:ContentPanel>
如果在页面使用.net控件调用脚本使用控件ID,就会发现脚本没有效果,调试了半天,发现控件生成的ID会变成一个新的名称,在页面上查看html源码,默认是生成 ContentPanel的ID_+控件的ID。
<x:ContentPanel ID="ContentPanel2" Title="" ShowBorder="false" EnableBackgroundColor="false" EnableCollapse="true" ShowHeader="false" runat="server"> <div style="padding-left: 18px; padding-top: 3px; padding-bottom: 3px;"> 计划开始时间: <input id="Textbox_PlansBeginTime_Bills_Project" class="Wdate" type="text" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH',maxDate:'#F{$dp.$D(\'ContentPanel1_Textbox_PlansEndTime_Bills_Project\')||\'2020-10-01\'}'})" runat="server"/> </div> </x:ContentPanel> <x:ContentPanel ID="ContentPanel1" Title="" ShowBorder="false" EnableBackgroundColor="false" EnableCollapse="true" ShowHeader="false" runat="server"> <div style="padding-left: 18px; padding-top: 3px; padding-bottom: 3px;"> 计划结束时间: <input id="Textbox_PlansEndTime_Bills_Project" class="Wdate" type="text" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH',minDate:'#F{$dp.$D(\'ContentPanel2_Textbox_PlansBeginTime_Bills_Project\')}',maxDate:'2020-10-01'})" runat="server" /> </div> </x:ContentPanel>
最近发现还有一种解决方案:
input里面有个熟悉 clientidmode ,只要把这个属性设置成 clientidmode="Static",控件的ID就不会改变,这样写脚本就比较容易,不需要去关注控件ID的问题。
2、FileUpload控件和其他控件使用,FileUpload控件在页面上显示会出现异常,在论坛问了得出解决方案,贴出来
需要设置行的宽度 ColumnWidths
<x:Form EnableBackgroundColor="false" BodyPadding="0px" ID="extForm_Sign" ShowHeader="false" runat="server" Title="Sign" LabelAlign="Right" ShowBorder="false" AutoHeight="true"> <Rows> <%-- 设置行的宽度 防止控件被遮住--%> <x:FormRow ColumnWidths="500px 200px "> <Items> <x:FileUpload ID="FileUpload_Attachment" runat="server" AutoPostBack="true" OnFileSelected="FileUpload_Attachment_OnFileSelected" EmptyText="请选择上传附件" ButtonText="上传" Label="上传附件"> </x:FileUpload> <x:Button ID="btnDelete" runat="server" ConfirmText="确认要删除选中的项?" Text="删除附件" OnClick="btnDelete_Click"> </x:Button> </Items> </x:FormRow>