FineUI 官方论坛

标题: 在UserControl中使用 F.ready()显示F未定义 [打印本页]

作者: jzk001 时间: 2020-6-12 10:54
标题: 在UserControl中使用 F.ready()显示F未定义
以下这段代码定义在 UserControl中，提示F未定义。问下怎么解决这个问题。

<f

anel 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" />
            <f

inkButtonField Width="80px" ConfirmText="你确定要删除这个文件吗？" ConfirmTarget="Top" CommandName="Delete" IconUrl="../../images/delete.png" />
</Columns>
</f:Grid>
</Items>
</f

anel>
<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 时间: 2020-6-12 10:58
可以看下页面生成的HTML代码，用户控件的HTML会直接生成在<form>标签内部，而F.js是在<form>标签外部引入的，所以此时还未引入F.js。

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

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

作者: jzk001 时间: 2020-6-12 11:12

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

谢谢您的及时回复

作者: jzk001 时间: 2020-6-12 11:21

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

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

欢迎光临 FineUI 官方论坛 (https://fineui.com/bbs/)