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

jzk001

以下这段代码定义在 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>

sanshi

可以看下页面生成的HTML代码，用户控件的HTML会直接生成在<form>标签内部，而F.js是在<form>标签外部引入的，所以此时还未引入F.js。

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

参考：https://fineui.com/bbs/forum.php?mod=viewthread&tid=22437

jzk001

sanshi 发表于 2020-6-12 10:58
可以看下页面生成的HTML代码，用户控件的HTML会直接生成在标签内部，而F.js是在标签外部引入的，所以此时还 ...

谢谢您的及时回复

jzk001

jzk001 发表于 2020-6-12 11:12
谢谢您的及时回复

那Page页中通过以下形式，怎么调用到usercontrol中控件的 ClientID ?
<script type="text/javascript">
var btnDeleteFilesClientID = '<%= usercontrolID.btnDeleteFiles.ClientID %>';
</script>