FineUI框架 使用asp.net控件及其使用问题

 

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>

View Code

 

　　最近发现还有一种解决方案：

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>

   

View Code