使用更新面板（或其他方法）刷新网格视图内的图像

Question

我在 ASP 页面 (C#) 中有一个 GridView，它在每一行中都包含一个图像。我想用几个箭头模拟某种拇指轮，允许用户从存储在服务器数据库中的图像中选择他选择的图像。但我不想每次用户按下左箭头或右箭头查看下一张图片时都刷新整个网格/页面。 到目前为止，我已经尝试了 UpdatePanel 的几个选项，但我无法刷新这张唯一的图片。 只是给出一个想法，这就是标记。任何帮助表示赞赏。

<div style="width:1200px; height:900px; margin:0 auto;">
        <form id="form1" runat="server" >
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <asp:Label ID="lblTextType" runat="server" Text="Text type"  style="z-index: 1; left: 422px; top: 200px; position: absolute; height: 25px; width: 126px; right: 1036px;" Font-Names="Verdana"></asp:Label>


        <asp:GridView ID="listText" runat="server"  style="z-index: 1; left: 566px; top: 284px; position: absolute; height: 160px; width: 397px; right: 621px;" Font-Names="Verdana"   AutoGenerateColumns="False" ShowHeader="False" Font-Size="17pt">
            <Columns>
                <asp:TemplateField HeaderText="itm" SortExpression="Value">
                <ItemTemplate>
                    <asp:TextBox ID="itemText" runat="server" OnTextChanged="OnTextChanged" Text='<%#Eval("text") %>'  AutoPostBack="True" BorderWidth="0" Width="385px" Font-Size="Medium" ></asp:TextBox>
                </ItemTemplate>
                </asp:TemplateField>


                <asp:TemplateField HeaderText="leftArrow" SortExpression="Value">
                    <ItemTemplate>
                        <asp:ImageButton ID="leftArrow" runat="server" OnClick="onLeftArrow"  Width="6px" ImageUrl="Images\LeftArrow.png" ></asp:ImageButton>
                    </ItemTemplate>
                </asp:TemplateField>

<!-- The image to be refreshed each time an arrow is pressed -->
                    <asp:Image runat="server"  ImageUrl='<%#Eval("imagename") %>' ControlStyle-Height="35px" ControlStyle-Width="35px"></asp:Image>




            <asp:TemplateField HeaderText="RightArrow" SortExpression="Value">
                <ItemTemplate>
                    <asp:ImageButton ID="RightArrow" runat="server" OnClick="onRightArrow"  Width="6px" ImageUrl="Images\RightArrow.png" ></asp:ImageButton>
                </ItemTemplate>
            </asp:TemplateField>

            </Columns>
            <RowStyle BorderStyle="None" Height="17px" Wrap="True" />
        </asp:GridView>
    </div>

Answer 1

好像我解决了它。我确实得到了一些改进，但仍然不是我所期望的，但这就是我所做的。在标记中，我封装了图像和箭头：

    <asp:TemplateField HeaderText="Command">
        <ItemTemplate>
            <asp:UpdatePanel ID="gridUpdatePanel" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <asp:Image ID="imagename" runat="server"  ImageUrl='<%#Eval("imagename") %>' ControlStyle-Height="35px" ControlStyle-Width="35px"></asp:Image>
                </ContentTemplate>
            </asp:UpdatePanel>
        </ItemTemplate>
    </asp:TemplateField>


    <asp:TemplateField HeaderText="RightArrow" SortExpression="Value">
        <ItemTemplate>
            <asp:UpdatePanel ID="updatepanel_ra" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
                <ContentTemplate>
                    <asp:ImageButton ID="RightArrow" runat="server" OnClick="onRightArrow"  Width="6px" ImageUrl="Images\RightArrow.png" ></asp:ImageButton>
                </ContentTemplate>
            </asp:UpdatePanel>
        </ItemTemplate>
    </asp:TemplateField>

在 C# 代码中，刷新图像的唯一方法是通过在 Grid 行中找到箭头 ID 来访问箭头 ID：

protected void onRightArrow(object sender, ImageClickEventArgs e)
{
    ImageButton thisImage = (ImageButton)sender;
    GridViewRow currentRow = (GridViewRow)thisImage.Parent.Parent.Parent.Parent;
    string filenme = "somefilename.png";
    Control cc = currentRow.FindControl("imagename");
    if (cc != null)
    {
        Image imagename = (Image)cc;
        imagename.ImageUrl = filenme;
        //gridUpdatePanel
        Control upd = currentRow.FindControl("gridUpdatePanel");
        UpdatePanel updpnl = (UpdatePanel)upd;
        updpnl .Update();
    }
}