如何将 ContextKeys 属性用于 AjaxFileUpload 控件? [英] How can I use the ContextKeys property for the AjaxFileUpload control?

问题描述

我开始研究 AjaxFileUpload 控件，特别是 ContextKeys 属性.但是，我不明白如何使用它.

I started looking at the AjaxFileUpload control, specifically the ContextKeys property. However, I do not understand how to use it.

文档 说 AjaxFileUpload ContextKeys 用于传递上传文件时向服务器发送信息.但没有提供示例.网上有没有我可以看的例子?

The documentation says of AjaxFileUpload that the ContextKeys is used to pass information to the server when a file is uploaded. But no examples are provided. Are there any examples online that I could look at?

推荐答案

虽然这样的功能没有实现(我相信它是计划好的，但由于某些原因被推迟了)，没有什么可以保护你自己实现它.为此，您需要下载 AjaxControlToolkit 源代码并根据需要对其进行调整.

Though such functionality not implemented (I believe it was planned but by some reasons was postponed), nothing protect you from implement it yourself. To do this you need to download AjaxControlToolkit source code and tweak it for your needs.

会有很多点，所以你可以先准备一杯咖啡:)

There will be a lot of points so you may to prepare a cup of coffee before :)

我将显示必须更改的文件名的更改.

I'll show changes with name of file that must being changed.

Server/AjaxControlToolkit/AjaxFileUpload/AjaxFileUpload.cs 文件

首先，将 ContextKeys 属性添加到 AjaxFileUploadEventArgs.cs 文件(位于同一文件夹中):

First of all, add ContextKeys property to the AjaxFileUploadEventArgs.cs file (it located in same folder):

/// <summary>
/// Gets or sets the context keys.
/// </summary>
public string ContextKeys
{
    get;
    set;
}

然后打开 AjaxFileUpload 类代码并更改 OnPreRender 方法.这是此方法的一部分，带有自定义修改:

After that open the AjaxFileUpload class code and change the OnPreRender method. Here is a part of this method with custom modifications:

var eventArgs = new AjaxFileUploadEventArgs(guid, AjaxFileUploadState.Success,
"Success", uploadedFile.FileName,
uploadedFile.ContentLength, uploadedFile.ContentType,
stream.ToArray());

// NEW CODE HERE
eventArgs.ContextKeys = this.Page.Request.Form["contextKeys"];

这就是我们需要对服务器代码进行的所有更改.现在我们需要修改Sys.Extended.UI.AjaxFileUpload客户端类(文件AjaxFileUpload.pre.js)

That's all changes in server code we need. Now we need to modify the Sys.Extended.UI.AjaxFileUpload client class (file AjaxFileUpload.pre.js )

首先让我们修改_html5UploadFile方法如下:

Firstly let's modify _html5UploadFile method as below:

_html5UploadFile: function (fileItem) {
    this._guid = Sys.Extended.UI.AjaxFileUpload.utils.generateGuid();

    var uploadableFile = fileItem.get_fileInputElement();

    var fd = new FormData();
    fd.append("fileId", uploadableFile.id);
    fd.append("Filedata", uploadableFile.file);

    if (this.contextKeys) {
        if (typeof this.contextKeys !== "string") {
            this.contextKeys = Sys.Serialization.JavaScriptSerializer.serialize(this.contextKeys);
        }
        fd.append("contextKeys", this.contextKeys);
    }

    $common.setVisible(this._progressBar, true);
    this._setDisableControls(true);
    this._html5SetPercent(0);
    this._setStatusMessage(String.format(Sys.Extended.UI.Resources.AjaxFileUpload_UploadingHtml5File, uploadableFile.file.name, Sys.Extended.UI.AjaxFileUpload.utils.sizeToString(uploadableFile.file.size)));

    var url = this._postBackUrl;
    if (url.indexOf("?") != -1)
        url += "&";
    else
        url += "?";

    this._webRequest = new Sys.Net.WebRequest();
    this._executor = new Sys.Net.XMLHttpExecutor();
    this._webRequest.set_url(url + 'contextkey=' + this._contextKey + '&guid=' + this._guid);
    this._webRequest.set_httpVerb("POST");
    this._webRequest.add_completed(this.bind(this._html5OnRequestCompleted, this));

    //this._executor.add_load(this.bind(this._html5OnComplete, this));
    this._executor.add_progress(this.bind(this._html5OnProgress, this));
    this._executor.add_uploadAbort(this.bind(this._html5OnAbort, this));
    this._executor.add_error(this.bind(this._html5OnError, this));
    this._webRequest.set_executor(this._executor);

    this._executor.executeRequest(fd);
}

如上所示，我们将 contextKeys 添加到表单数据中，通过 Ajax 请求发布.

As you can see above, we adding contextKeys to form data, posted with Ajax request.

我们需要修改_uploadInputElement方法:

_uploadInputElement: function (fileItem) {

    var inputElement = fileItem.get_fileInputElement();
    var uploader = this;
    uploader._guid = Sys.Extended.UI.AjaxFileUpload.utils.generateGuid();
    setTimeout(function () {
        uploader._setStatusMessage(String.format(Sys.Extended.UI.Resources.AjaxFileUpload_UploadingInputFile, Sys.Extended.UI.AjaxFileUpload.utils.getFileName(inputElement.value)));
        uploader._setDisableControls(true);
        uploader.setThrobber(true);
    }, 0);

    var url = uploader._postBackUrl;
    if (url.indexOf("?") != -1)
        url += "&";
    else
        url += "?";

    uploader._createVForm();
    uploader._vForm.appendChild(inputElement);

    if (this.contextKeys) {
        if (typeof this.contextKeys !== "string") {
            this.contextKeys = Sys.Serialization.JavaScriptSerializer.serialize(this.contextKeys);
        }

        var contextKeysInput = document.createElement("input");
        contextKeysInput.setAttribute("type", "hidden");
        contextKeysInput.setAttribute("name", "contextKeys");
        contextKeysInput.setAttribute("value", this.contextKeys);

        uploader._vForm.appendChild(contextKeysInput);
    }

    uploader._vForm.action = url + 'contextkey=' + this._contextKey + '&guid=' + this._guid;
    uploader._vForm.target = uploader._iframeName;

    setTimeout(function () {
        uploader._vForm.submit();
        uploader._waitTimer = setTimeout(function () { uploader._wait() }, 100);
    }, 0);
}

完成所有这些更改后，您可以在代码隐藏中设置 ContextKeys 属性，并从 UploadComplete 事件的 AjaxFileUploadEventArgs 参数中获取它的值，如下所示:

After all these changes you can set ContextKeys property in code-behind and get it value from AjaxFileUploadEventArgs argument of the UploadComplete event as below:

protected void Page_Load(object sender, EventArgs e)
{

    if (!IsPostBack && !AjaxFileUpload1.IsInFileUploadPostBack)
    {
        AjaxFileUpload1.ContextKeys = new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(new Dictionary<string, string> { { "1", "First" }, { "2", "Second" } });
    }

protected void AjaxFileUpload1_OnUploadComplete(object sender, AjaxFileUploadEventArgs file)
{
    if (!string.IsNullOrEmpty(file.ContextKeys))
    {
        var contextKeys = new System.Web.Script.Serialization.JavaScriptSerializer().Deserialize<Dictionary<string, string>>(file.ContextKeys);
    }

此外，如果您将按照此处的建议实施 OnClientUploadStarted 客户端事件link，您可以将您的 contextKeys 从客户端传递给服务器:

Also, if you'll implement OnClientUploadStarted client-side event as proposed here link, you may pass to server your contextKeys from client:

 function uploadStarted(sender, args) {
      sender.contextKeys = { "first": "1", "second": "2" };
 }

这篇关于如何将 ContextKeys 属性用于 AjaxFileUpload 控件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！