在 asp.net 的 UpdatePanel 中更新图像 url

发布于 2024-11-01 19:54:48 字数 4170 浏览 0 评论 0原文

我有一个 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

风铃鹿 2024-11-08 19:54:48

我必须创建一个带有方法 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.

流年里的时光 2024-11-08 19:54:48

尝试将 pnlInfo.Update() 添加到 OnUpdateComplete() 的末尾

Try adding pnlInfo.Update() to the end of OnUpdateComplete()

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文