FineUI 官方论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

本论坛已关闭(禁止注册、发帖和回复)
请移步 三石和他的朋友们

FineUI首页 WebForms - MVC & Core - JavaScript 常见问题 - QQ群 - 十周年征文活动

FineUI(开源版) 下载源代码 - 下载空项目 - 获取ExtJS - 文档 在线示例 - 版本更新 - 捐赠作者 - 教程

升级到 ASP.NET Core 3.1,快、快、快! 全新ASP.NET Core,比WebForms还简单! 欢迎加入【三石和他的朋友们】(基础版下载)

搜索
查看: 2194|回复: 3

在UserControl中使用 F.ready()显示F未定义

[复制链接]
发表于 2020-6-12 10:54:44 | 显示全部楼层 |阅读模式
以下这段代码定义在 UserControl中,提示F未定义。问下怎么解决这个问题。

<fanel runat="server" ID="FilesPanelID" ShowHeader="false" ShowBorder="false">
    <Items>
        <f:Grid ID="FilesGridID" IsFluid="true" runat="server" ShowHeader="true" ShowBorder="true" Title="附件上传" EnableCollapse="false" EnableCheckBoxSelect="false" EmptyText="" DataIDField="id">
            <Toolbars>
                <f:Toolbar runat="server">
                    <Items>
                        <f:Button ID="btnSelectFiles" Text="选择附件上传" IconFont="_Plus" runat="server" EnablePostBack="false">
                        </f:Button>
                        <f:ToolbarSeparator runat="server"></f:ToolbarSeparator>
                        <f:Button ID="btnDeleteFiles" Text="删除选中附件" IconFont="_Close" runat="server">
                        </f:Button>
                    </Items>
                </f:Toolbar>
            </Toolbars>
            <Columns>
                <f:BoundField ColumnID="FileName" DataField="name" HeaderText="附件名" ExpandUnusedSpace="true" MinWidth="150px" />
                <f:BoundField ColumnID="FileType" DataField="type" HeaderText="类型" Width="100px" />
                <f:RenderField ColumnID="FileSize" DataField="size" HeaderText="大小" Renderer="FileSize" Width="100px" />
                <f:BoundField ColumnID='FileStatus' DataField="status" NullDisplayText="已完成" HeaderText="状态" Width="100px" />
                <finkButtonField Width="80px" ConfirmText="你确定要删除这个文件吗?" ConfirmTarget="Top" CommandName="Delete" IconUrl="../../images/delete.png" />
            </Columns>
        </f:Grid>
    </Items>
</fanel>
<script src="../js/webuploader/webuploader.nolog.js"></script>
    <script type="text/javascript">
        var btnDeleteFilesClientID = '<%= btnDeleteFiles.ClientID %>';
        var btnSelectFilesClientID = '<%= btnSelectFiles.ClientID %>';
        var filesPanelID = '<%= FilesPanelID.ClientID %>';
        var BASE_URL = '<%= ResolveUrl("~/") %>';
        var SERVER_URL = BASE_URL + 'garden/httphandler/common/fileupload.ashx';

        F.ready(function () {
            var grid = F(gridClientID);

            var uploader = WebUploader.create({

                // swf file path
                swf: BASE_URL + 'garden/js/webuploader/Uploader.swf',

                // The server URL.
                server: SERVER_URL,

                // The button for selecting file. Optional.
                // Internally, it may be the input element, or may be flash.
                pick: '#' + btnSelectFilesClientID,

                // Do not compress image
                resize: false,

                // Auto upload
                auto: true,

                // File upload parameters, used to mark the owner of the file.
                formData: {
                    owner: 'webuploader.webuploader'
                },

                // Single file size limit (unit: byte), which is limited to 100M
                fileSingleSizeLimit: 100 * 1024 * 1024

            });

            // Add files to upload queue
            uploader.on('filesQueued', function (files) {
                var records = [];
                $.each(files, function (index, file) {
                    records.push({
                        id: file.id,
                        values: {
                            'FileName': file.name,
                            'FileType': file.ext,
                            'FileSize': file.size,
                            'FileStatus': '等待上传'
                        }
                    });
                });
                grid.addNewRecords(records, true);
            });

            uploader.on('uploadProgress', function (file, percentage) {
                var cellEl = grid.getCellEl(file.id, 'FileStatus').find('.f-grid-cell-inner');

                var barEl = cellEl.find('.f-progressbar-value');

                // Avoiding duplicate creation
                if (!barEl.length) {
                    cellEl.html('<div class="f-progressbar f-widget f-widget-content f-corner-all" style="height:12px;">' +
                      '<div class="f-progressbar-value f-widget-header f-corner-left" style="width:0%">' +
                      '</div></div>');
                    barEl = cellEl.find('.f-progressbar-value');
                }

                barEl.css('width', percentage * 100 + '%');
            });

            uploader.on('uploadSuccess', function (file) {
                var cellEl = grid.getCellEl(file.id, 'FileStatus').find('.f-grid-cell-inner');
                cellEl.text('上传成功');
            });

            uploader.on('uploadError', function (file) {
                var cellEl = grid.getCellEl(file.id, 'FileStatus').find('.f-grid-cell-inner');
                cellEl.text('上传出错');
            });

            // Whether the upload succeeds or fails, the uploadComplete event will trigger
            uploader.on('uploadComplete', function (file) {
                uploader.removeFile(file, true);
            });


            // Triggered when the process is started
            uploader.on('startUpload', function () {
                // Disable delete button
                F(btnDeleteFilesClientID).disable();
            });

            // Triggered when all file uploads are ended
            uploader.on('uploadFinished', function () {
                F(btnDeleteFilesClientID).enable();

                __doPostBack('', 'RebindGrid');
            });


            uploader.on('error', function (type, arg, file) {
                if (type === 'F_EXCEED_SIZE') {
                    F.alert('文件[' + file.name + ']大小超出限制值(' + F.format.fileSize(arg) + ')');
                }
            });
        });

    </script>

发表于 2020-6-12 10:58:15 | 显示全部楼层
可以看下页面生成的HTML代码,用户控件的HTML会直接生成在<form>标签内部,而F.js是在<form>标签外部引入的,所以此时还未引入F.js。

一般不要在用户控件中引入JS,因为用户控件可能会加载多次。

参考:https://fineui.com/bbs/forum.php?mod=viewthread&tid=22437
 楼主| 发表于 2020-6-12 11:12:45 | 显示全部楼层
sanshi 发表于 2020-6-12 10:58
可以看下页面生成的HTML代码,用户控件的HTML会直接生成在标签内部,而F.js是在标签外部引入的,所以此时还 ...

谢谢您的及时回复
 楼主| 发表于 2020-6-12 11:21:42 | 显示全部楼层
jzk001 发表于 2020-6-12 11:12
谢谢您的及时回复

那Page页中通过以下形式,怎么调用到usercontrol中控件的 ClientID ?
<script type="text/javascript">
var btnDeleteFilesClientID = '<%= usercontrolID.btnDeleteFiles.ClientID %>';
</script>
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|FineUI 官方论坛 ( 皖ICP备2021006167号-1 )

GMT+8, 2024-3-28 23:41 , Processed in 0.049386 second(s), 18 queries , Gzip On.

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表