在转发器中处理 AsyncFileUpload 的 UploadComplete 事件
Handling AsyncFileUpload's UploadComplete event inside repeater
我有一个转发器,在其他控件中有一个 AsyncFileUpload 和一个错误标签,它们都嵌入在一个面板(常规面板,而不是更新面板)中。在 AFU 的 UploadComplete 事件中,我需要访问面板和标签;我可以使用 "sender" 参数访问 AFU 本身:
<asp:Repeater runat="server" ID="rpt1" ClientIDMode="Static" OnItemDataBound="rptQuestions_ItemDataBound">
<ItemTemplate>
< other controls>
<asp:Panel runat="server" ID="pnlFU" clientidmode="static">
<ajaxToolkit:AsyncFileUpload runat="server"
ID="fuAttchedDocs"
clientidmode="static"
ThrobberID="myThrobber"
UploaderStyle="Traditional"
OnClientUploadComplete="onClientUploadComplete"
OnUploadedComplete="fuAttchedDocs_UploadedComplete"
OnUploadedFileError="fuAttchedDocs_UploadedFileError" />
<asp:Label runat="server" ID="lblError" clientidmode="static" Text="" CssClass="field-validation-error" Style="display: none" />
</asp:Panel>
</ItemTemplate>
</asp:Repeater>
protected void fuAttchedDocs_UploadedComplete(object sender, AsyncFileUploadEventArgs e)
{
AsyncFileUpload fuAttchedDocs = (AsyncFileUpload)sender;
if (fuAttchedDocs.HasFile)
{
// How do I access these?
lblError.Style["display"] = "none";
....
pnlFU.Style["display"] = "block";
}
}
如何确保我访问的是中继器内正确的面板和标签?
此外,当单击位于中继器外部的 "Submit" 按钮时,我正在使用以下方法确保所有文件一次上传并调用一个 js 函数 "sendResponse()" 执行回发处理所有中继器项目。
<button type="submit" class="btn btn-primary btn-md" onclick="javascript:document.forms[0].encoding = 'multipart/form-data';sendResponse();">Submit Response</button>
这看起来正确吗?在弄清楚中继器内部的访问控件之前,我无法对其进行测试,但我想我会与您核实它是否有意义。
我不熟悉 AsynFileUpload 工具,但我可以向您展示一般情况下如何在与 sender
控件相同的面板中访问标签。
我设置了一个结构大致相同的示例页面:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="TestRepeater.Test" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form runat="server">
<asp:Repeater ID="repeater" runat="server">
<ItemTemplate>
<asp:Panel ID="ThePanel" runat="server">
<asp:TextBox ID="TheTextBox" OnTextChanged="TextBox_TextChanged" runat="server"></asp:TextBox>
<asp:Label ID="TheLabel" runat="server"></asp:Label>
</asp:Panel>
</ItemTemplate>
</asp:Repeater>
<input type="submit" />
</form>
</body>
</html>
这是代码隐藏:
using System;
using System.Collections.Generic;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace TestRepeater
{
public partial class Test : Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
// Force the creation of three repeater items.
repeater.DataSource = new List<string>() { "", "", "" };
repeater.DataBind();
}
}
protected void TextBox_TextChanged(object sender, EventArgs e)
{
TextBox textBox = (TextBox)sender;
Label label = (Label)textBox.Parent.FindControl("TheLabel");
label.Text = "Hello, world!";
}
}
}
基本上,你得到包含相关控件的Panel
对象,然后找到关联的标签。
以下是该示例在实践中的样子:
请注意,更新标签将需要回发。要在没有回发的情况下更新标签,您将不得不做一些 JavaScript 技巧。
我有一个转发器,在其他控件中有一个 AsyncFileUpload 和一个错误标签,它们都嵌入在一个面板(常规面板,而不是更新面板)中。在 AFU 的 UploadComplete 事件中,我需要访问面板和标签;我可以使用 "sender" 参数访问 AFU 本身:
<asp:Repeater runat="server" ID="rpt1" ClientIDMode="Static" OnItemDataBound="rptQuestions_ItemDataBound">
<ItemTemplate>
< other controls>
<asp:Panel runat="server" ID="pnlFU" clientidmode="static">
<ajaxToolkit:AsyncFileUpload runat="server"
ID="fuAttchedDocs"
clientidmode="static"
ThrobberID="myThrobber"
UploaderStyle="Traditional"
OnClientUploadComplete="onClientUploadComplete"
OnUploadedComplete="fuAttchedDocs_UploadedComplete"
OnUploadedFileError="fuAttchedDocs_UploadedFileError" />
<asp:Label runat="server" ID="lblError" clientidmode="static" Text="" CssClass="field-validation-error" Style="display: none" />
</asp:Panel>
</ItemTemplate>
</asp:Repeater>
protected void fuAttchedDocs_UploadedComplete(object sender, AsyncFileUploadEventArgs e)
{
AsyncFileUpload fuAttchedDocs = (AsyncFileUpload)sender;
if (fuAttchedDocs.HasFile)
{
// How do I access these?
lblError.Style["display"] = "none";
....
pnlFU.Style["display"] = "block";
}
}
如何确保我访问的是中继器内正确的面板和标签?
此外,当单击位于中继器外部的 "Submit" 按钮时,我正在使用以下方法确保所有文件一次上传并调用一个 js 函数 "sendResponse()" 执行回发处理所有中继器项目。
<button type="submit" class="btn btn-primary btn-md" onclick="javascript:document.forms[0].encoding = 'multipart/form-data';sendResponse();">Submit Response</button>
这看起来正确吗?在弄清楚中继器内部的访问控件之前,我无法对其进行测试,但我想我会与您核实它是否有意义。
我不熟悉 AsynFileUpload 工具,但我可以向您展示一般情况下如何在与 sender
控件相同的面板中访问标签。
我设置了一个结构大致相同的示例页面:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="TestRepeater.Test" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form runat="server">
<asp:Repeater ID="repeater" runat="server">
<ItemTemplate>
<asp:Panel ID="ThePanel" runat="server">
<asp:TextBox ID="TheTextBox" OnTextChanged="TextBox_TextChanged" runat="server"></asp:TextBox>
<asp:Label ID="TheLabel" runat="server"></asp:Label>
</asp:Panel>
</ItemTemplate>
</asp:Repeater>
<input type="submit" />
</form>
</body>
</html>
这是代码隐藏:
using System;
using System.Collections.Generic;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace TestRepeater
{
public partial class Test : Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
// Force the creation of three repeater items.
repeater.DataSource = new List<string>() { "", "", "" };
repeater.DataBind();
}
}
protected void TextBox_TextChanged(object sender, EventArgs e)
{
TextBox textBox = (TextBox)sender;
Label label = (Label)textBox.Parent.FindControl("TheLabel");
label.Text = "Hello, world!";
}
}
}
基本上,你得到包含相关控件的Panel
对象,然后找到关联的标签。
以下是该示例在实践中的样子:
请注意,更新标签将需要回发。要在没有回发的情况下更新标签,您将不得不做一些 JavaScript 技巧。