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的必杀技。

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