ASP.NET批量上传文件组件(五)

其实分析全部JS代码无不充斥这2个东西,别看500多行代码的控件,其实大多数是json形式的配置式语法,逻辑代码屈指可数,这就是EXTJS的优势了,虽然代码量大缺不算复杂。

1、 EXTJS的HTML模板加载机制

很多CMS都为自己的标记模板引以为豪,事实上在EXTJS中可信手拈来:

getProgressTemplate: function()

{

var tpl = new Ext.Template('<table class="upload-progress-table"><tbody>',

……………….

');

tpl.compile();

return tpl;

},

这就定义了一个模板。值得注意的是模板中包含很多类似{timeLeft}的变量。

this.getProgressTemplate().overwrite(this.uploadInfoPanel.body, this.formatProgress(this.progressInfo));

加载了模板,this.uploadInfoPanel.body 是模板依附体,this.formatProgress(this.progressInfo)是模板中的变量,formatProgress是要加载的变量,可以看它的定义:

var r = {};

r.filesUploaded = String.leftPad(info.filesUploaded, 3, '&nbsp;');

r.filesTotal = info.filesTotal;

r.bytesUploaded = String.leftPad(Ext.util.Format.fileSize(info.bytesUploaded), 6, '&#160;');

r.bytesTotal = Ext.util.Format.fileSize(info.bytesTotal);

r.timeElapsed = this.formatTime(info.timeElapsed);

r.speedAverage = Ext.util.Format.fileSize(Math.ceil(1000 * info.bytesUploaded / info.timeElapsed)) + '/s';

r.timeLeft = this.formatTime((info.bytesUploaded === 0) ? 0 : info.timeElapsed

* (info.bytesTotal - info.bytesUploaded) / info.bytesUploaded);

var caleSpeed = 1000 * info.lastBytes / info.lastElapsed;

r.speedLast = Ext.util.Format.fileSize(caleSpeed < 0 ? 0 : caleSpeed) + '/s';

return r;

看到了所有的模板中的变量都在此定义之中。

2、 EXTJS与.NET的交互

Direct是ExtJs3.0推出的前后台操作和数据交互机制,它取代的Ext AJAX显式调用后台服务的操作方式,而以大家习惯的函数方式调用,同时可映射对象参数,功能超强,基本上可以不用去拼凑XML或JSON了,工作量大大降低了。它的更大好处在于前台和后台代码的无关性,无论是PHP、C#、Java,只要采用了Direct前台不变化后台随便采用哪种语言都可以。下面介绍后台为C#的Direct编程。

打开SwfHandler.ashx:

public class SwfHandler : DirectHandler

{

public override string ProviderName

{

get

{

return "Ext.app.REMOTING_API";

}

}

public override string Namespace

{

get

{

return "SwfUpload";

}

}

/// <summary>

/// 单个文档上传结束后保存相应客户端信息

/// </summary>

/// <param name="paramInt"></param>

/// <param name="paramStr"></param>

[DirectMethod]

public void FileInfoSave(Int64 paramInt,string paramStr )

{

int? x = (int) paramInt;

string y = paramStr;

}

Ext.app.REMOTING_API是direct映射标识,SwfUpload是命名空间,SwfHandler是类名,FileInfoSave是方法名,这些东西是服务器端的(SwfHandler.ashx)。

让我们看看在客户端(SwfUpload-Ext.js)如何调用FileInfoSave:

Ext.Direct.addProvider(Ext.app.REMOTING_API);

通过影射标识锁定服务器端类。

SwfUpload.SwfHandler.FileInfoSave(paramInt, paramStr);

直接调用服务器端函数。

够简单!够直接!没有了json字符拼凑。这就是direct的必杀技。

最后对控件的开发做些说明,本控件的图标、样式表来自网络拷贝,代码也学习了很多前人经验,感谢云南程序员群的董董(Q2806369)提供了部分图标制作,虽说也算是原创但不敢独享,特共享全部源代码。欢迎ExtJs和.NET程序员联系我,讨论技术问题蛮有乐趣的,我是毛勇(Q 32819362 网名齐林)。也欢迎大家加入云南程序员B群(37209147),我们有350名程序员希望与您交流。

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值