asp.net - 在 ASP.NET 中使用 AjaxControlToolkit 的异步 AJAXFileUpload 控件返回数据

Question

我正在使用上面的控件(注意它是 ASP.NET 控件。我似乎看到很多人使用一个用 javascript 编写的类似名称的控件)允许上传多个带有进度条的文件上传，drag-n -drop 等。这部分工作正常，但我需要随文件一起返回两条数据。具体来说，它是用户从两个文本框中输入的纬度和经度。由于上传控件是异步的，文本框的内容不会被回发，所以我无法访问它们。似乎有一个我可以 Hook 的属性，ContextKeys，它将把数据发送回服务器，但它是一个静态字段，我不知道如何动态地操作它。我试过从文本框中挂接 ontextchanged 事件并使用它们来设置上下文键。回发有效并且似乎设置了值，但是当用户按下上传按钮时，ContextKeys 值为空。

有人知道如何以编程方式设置 ContextKeys 属性，或通过其他方式将数据发送回上传吗？

代码如下:

.ASPX

<div style="float:left; width: 325px;">
    <cc1:AjaxFileUpload ID="AjaxFileUpload1" runat="server" Width="325px" 
         onuploadcomplete="UploadComplete" ClientIDMode="Static" />
    <cc1:DynamicPopulateExtender ID="AjaxFileUpload1_DynamicPopulateExtender" 
        runat="server" Enabled="True" PopulateTriggerControlID="" 
        TargetControlID="AjaxFileUpload1">
    </cc1:DynamicPopulateExtender>
</div>
<div style="float:left">Latitude:
    <asp:TextBox ID="tbUploaderLat" runat="server" 
        ontextchanged="tbUploaderLat_TextChanged" AutoPostBack="True"></asp:TextBox><br />
    Longitude:
    <asp:TextBox ID="tbUploaderLon" runat="server"
        ontextchanged="tbUploaderLon_TextChanged" AutoPostBack="True"></asp:TextBox>
</div>

代码隐藏:

protected void UpdateLatLon() //this is called from the two events above
{
    AjaxFileUpload1.ContextKeys = tbUploaderLat.Text + "|" + tbUploaderLon.Text;
}

Answer 1

您可以按照描述自定义 AjaxFileUpload 控件 here和 here并将文本框值传递给 UploadCompleted 事件处理程序，如下所示:

function uploadStarted(sender, args) {
     var latitude = $get("<%= tbUploaderLat.ClientID %>").value;
     var longitude = $get("<%= tbUploaderLon.ClientID %>").value;
     sender.contextKeys = { "latitude": latitude, "longitude": longitude };
}​

之后，您可以在 UploadComplete 处理程序中获取纬度和经度值:

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

    //code to save file

}