如何在顯示中顯示圖像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); 
     } 
    } 
} 

這可以使用d像

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

，如果你在你的數據庫路徑由ID獲取LinkBut​​ton的