如何在show ModalPopupExtender中显示图像

时间:2014-11-25 12:01:07

标签: asp.net

我有一个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图像,我无法做到。请帮帮我

2 个答案:

答案 0 :(得分:0)

我通常做的是创建一个非常轻量级的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/>

答案 1 :(得分:0)

例如:

    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获取路径