在 asp.net 的 UpdatePanel 中更新图像 url
我有一个 GridView,其中有一个 UpdatePanel。我正在尝试使用 AJAX ASyncFileUpload 更新我的 asp:image 的 I*mage URL*。过去两天我一直在谷歌上搜索解决方案。
代码如下:
更新面板:
<asp:UpdatePanel ID="pnlInfo" runat="server" Font-Names="Times New Roman" UpdateMode="Always" EnableViewState="true"
style="display:none; background-color:#FFFFFF; padding:20px; margin:50px; border:3px solid #4B0303; color:Black;
width:inherit;"
>
<ContentTemplate>
<div runat="server" class="divTable" style="width:inherit;">
<div runat="server" class="divRow" style="text-align:center; width:300px; float:left;">
<asp:Image ID="imgUser" runat="server" ImageAlign="Middle" ImageUrl="~/silhouette.jpg"
Width="100px" Height="100px" EnableViewState="true"/>
<asp:ModalPopupExtender ID="ModalPopupEUpload" runat="server"
CancelControlID="btnClosePnl" OnCancelScript="HideModalPopup()"
TargetControlID="imgUser" PopupControlID="pnlUploadImage" Drag="True"
BackgroundCssClass="ModalPopupBg" DynamicServicePath="" Enabled="True" />
<asp:Panel ID="pnlUploadImage" runat="server" Font-Names="Times New Roman"
style="display:none; background-color:#FFFFFF; padding:20px;
margin:50px; border:3px solid #4B0303; color:Black; width:inherit;"
>
<asp:AsyncFileUpload ID="AsyncFileUpload" runat="server" OnUploadedComplete="OnUpdateComplete"/>
<asp:Button ID="btnClosePnl" runat="server" Text="Close"/>
<asp:Button ID="btnUpdate" runat="server" OnClick="OnUpdateComplete" Visible="false" />
</asp:Panel></div>
//more code
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="AsyncFileUpload" EventName="UploadedComplete" />
</Triggers>
</asp:UpdatePanel></div>
更新面板是ModalPopupExtender的一部分,pnlUploadImage也是如此。这些效果很好。 GridView 也可以正常工作。
后台代码:
protected void OnUpdateComplete(object sender, EventArgs e)
{
Image ImgUser = new Image();
AsyncFileUpload asyncSender = new AsyncFileUpload();
AsyncFileUpload asyncGv = new AsyncFileUpload();
//finding the row of the sender
asyncSender = (AsyncFileUpload)sender;
foreach (GridViewRow Row in gvData.Rows)
{
asyncGv = (AsyncFileUpload)Row.Cells[0].FindControl("AsyncFileUpload");
if (asyncSender.ClientID == asyncGv.ClientID)
{
ImgUser = (Image)Row.Cells[0].FindControl("imgUser");
ImgUser.ImageUrl = asyncSender.FileName;
break;
}
}
}
btnUpdate是一种可能的解决方案,但最终不起作用。基本上,当我单击图像时,AsyncFileUpload 以弹出格式弹出。然后我选择一张图片并上传。我触发了 UploadComplete 上的更新,这应该会更改图像 URL。
问题是,我看到的图像 (silhouette.jpg) 即使在经过 UploadComplete 后仍保留在那里。当我一步步执行时,我看到 ImageURL 正在更改。我检查了一下,在该功能中选择的是正确的图像。
总的来说,为什么即使在后台代码中更改了 ImageURL,我在浏览器上看到的图像也没有改变。
I have a GridView in which I have an UpdatePanel. I am trying to update the I*mage URL* of my asp:image by using AJAX ASyncFileUpload. I've been searching on Google for a solution for the past 2 days now.
Here is the code:
Update panel:
<asp:UpdatePanel ID="pnlInfo" runat="server" Font-Names="Times New Roman" UpdateMode="Always" EnableViewState="true"
style="display:none; background-color:#FFFFFF; padding:20px; margin:50px; border:3px solid #4B0303; color:Black;
width:inherit;"
>
<ContentTemplate>
<div runat="server" class="divTable" style="width:inherit;">
<div runat="server" class="divRow" style="text-align:center; width:300px; float:left;">
<asp:Image ID="imgUser" runat="server" ImageAlign="Middle" ImageUrl="~/silhouette.jpg"
Width="100px" Height="100px" EnableViewState="true"/>
<asp:ModalPopupExtender ID="ModalPopupEUpload" runat="server"
CancelControlID="btnClosePnl" OnCancelScript="HideModalPopup()"
TargetControlID="imgUser" PopupControlID="pnlUploadImage" Drag="True"
BackgroundCssClass="ModalPopupBg" DynamicServicePath="" Enabled="True" />
<asp:Panel ID="pnlUploadImage" runat="server" Font-Names="Times New Roman"
style="display:none; background-color:#FFFFFF; padding:20px;
margin:50px; border:3px solid #4B0303; color:Black; width:inherit;"
>
<asp:AsyncFileUpload ID="AsyncFileUpload" runat="server" OnUploadedComplete="OnUpdateComplete"/>
<asp:Button ID="btnClosePnl" runat="server" Text="Close"/>
<asp:Button ID="btnUpdate" runat="server" OnClick="OnUpdateComplete" Visible="false" />
</asp:Panel></div>
//more code
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="AsyncFileUpload" EventName="UploadedComplete" />
</Triggers>
</asp:UpdatePanel></div>
The Update Panel is part of a ModalPopupExtender, so is the pnlUploadImage. These works fine. The GridView works fine too.
Background code:
protected void OnUpdateComplete(object sender, EventArgs e)
{
Image ImgUser = new Image();
AsyncFileUpload asyncSender = new AsyncFileUpload();
AsyncFileUpload asyncGv = new AsyncFileUpload();
//finding the row of the sender
asyncSender = (AsyncFileUpload)sender;
foreach (GridViewRow Row in gvData.Rows)
{
asyncGv = (AsyncFileUpload)Row.Cells[0].FindControl("AsyncFileUpload");
if (asyncSender.ClientID == asyncGv.ClientID)
{
ImgUser = (Image)Row.Cells[0].FindControl("imgUser");
ImgUser.ImageUrl = asyncSender.FileName;
break;
}
}
}
The btnUpdate was a possible solution that ended up not working. Basically, when I click on the Image, the AsyncFileUpload pops in a popup format. Then I choose an image and Upload it. I trigger the Update on the UploadComplete which is suppose to change the Image URL.
The problem is that the image that I see (silhouette.jpg) stays there even after going trough UploadComplete. When I do a step by step, I see my that the ImageURL is being changed. I checked and it is the right image that is being selected in the function.
Overall, why does, even thought the ImageURL is being changed in the backcode, the image that I see on my browser does not change.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
我必须创建一个带有方法 click 的 asp:button,其中包含 javascript 回发。然后我在刚刚创建的按钮上的更新面板中创建了一个 asynchPostBack 触发器。它强制回发,但这是自动更新图片的唯一方法。
I had to create an asp:button with a method click that had a javascript postback in it. Then I created a asynchPostBack trigger in teh update panel on the button I just created. It forces a postback but it is the only way to automatically update the picture.
尝试将
pnlInfo.Update()
添加到OnUpdateComplete()
的末尾Try adding
pnlInfo.Update()
to the end ofOnUpdateComplete()