如何在show ModalPopupExtender中顯示圖像

Question

我有一個gridview，我有一個鏈接按鈕。 我正在顯示使用ModalPopupExtender的彈出窗口，並且ModalPopupExtender中應該有圖像。 該圖像源是動態的，單擊每個鏈接按鈕時，應顯示不同的圖像。

<div>

                <asp:Panel ID="collapsiblePanelBody" runat="server"  
                    ScrollBars="Auto" >
<asp:GridView ID="GridViewProf"  runat="server" Width="100%" AutoGenerateColumns="False"
            AllowPaging="True" CssClass="clGrid" PageSize="25" 
                        onpageindexchanging="GridViewProf_PageIndexChanging" 
                        EnableModelValidation="True" onrowcommand="GridViewProf_RowCommand" 
                        onrowdatabound="GridViewProf_RowDataBound" 
                        onpageindexchanged="GridViewProf_PageIndexChanged"  >


                         <Columns>    

 <asp:BoundField DataField="Document_Conventional" HeaderText="Document_Conventional" >
                    <HeaderStyle Width="50%" CssClass="gridHeader"></HeaderStyle>
                    <ItemStyle CssClass="gridItem" HorizontalAlign="Left"></ItemStyle>
                </asp:BoundField>

 <asp:TemplateField  HeaderText="Show Image" >
                  <ItemTemplate>
     <input id="lnkImg" runat="server" type="button" value="ShowImage" />
     <cc1:ModalPopupExtender ID="mpe" runat="server" TargetControlID="lnkImg" PopupControlID="Panel1">
     </cc1:ModalPopupExtender>
   </ItemTemplate>
   </asp:TemplateField>
            </Columns>

                    </asp:GridView>
                </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
        </div>


<asp:Panel ID="Panel1"   
    style="border:solid 2px #cccccc;" runat="server" 
    Width="60%" Height="60%" >
<asp:Panel ID="Panel2" runat="server" style="border:solid 2px #cccccc; width:98%; cursor: move;">Drag Panel
</asp:Panel>


 <img  id="img05"  width="400" height="320" runat="server"
               alt="image"  />
        <asp:Button ID="btnCancel" runat="server" Text="[ X ]" />


        </asp:Panel>

//那就是我所做的。 但是如何動態給src圖像，我卻做不到。 請幫幫我

Answer 1

我通常要做的是創建一個非常輕量級的HTTPHandler來提供圖像：

using System;
using System.Web;

namespace Example
{  
    public class GetImage : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            if (context.Request.QueryString("id") != null)
            {
                Blob = GetBlobFromDataBase(id);
                context.Response.Clear();
                context.Response.ContentType = "image/pjpeg";
                context.Response.BinaryWrite(Blob);
                context.Response.End();
            }
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

您可以在img標簽中直接引用它：

<img src="GetImage.ashx?id=111"/>

或者，您甚至可以創建一個為您執行此操作的服務器控件：

using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Example.WebControl
{

    [ToolboxData("<{0}:DatabaseImage runat=server></{0}:DatabaseImage>")]
    public class DatabaseImage : Control
    {

        public int DatabaseId
        {
            get
            {
                if (ViewState["DatabaseId" + this.ID] == null)
                    return 0;
                else
                    return ViewState["DataBaseId"];
            }
            set
            {
                ViewState["DatabaseId" + this.ID] = value;
            }
        }

        protected override void RenderContents(HtmlTextWriter output)
        {
            output.Write("<img src='getImage.ashx?id=" + this.DatabaseId + "'/>");
            base.RenderContents(output);
        }
    }
}

這可以像

<cc:DatabaseImage id="db1" DatabaseId="123" runat="server/>

Answer 2

例如：

    protected void LinkButton1_Click(object sender, EventArgs e)
    {
        LinkButton lnk = (LinkButton)sender;
        GridViewRow grid = (GridViewRow)lnk.NamingContainer;

        LinkButton linkbtn = (LinkButton)grid.FindControl("LinkButton1"); //get your Id here
        string id=linkbtn .Text;
        Image img = (Image)grid.FindControl("Image1");

        string path="~/Images/addnew.jpg";
        img.ImageUrl = path;
    }

如果您的數據庫中有路徑，請通過linkbutton的ID獲取路徑