使用updatepanel(或其他方法)

时间:2015-08-11 10:09:20

标签: jquery ajax gridview updatepanel postback

我在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>

1 个答案:

答案 0 :(得分:0)

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

    <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:

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();
    }
}