Display an image from a link in an ASP.Net GridView - asp.net

I've saw ways to display binary images in a gridView - using repeaters, for example. I'm curious - how would you display an image which is stored as a link (i.e: https://s-media-cache-ak0.pinimg.com/736x/ee/dc/cb/eedccb62388bb15b8ba6564372c71bac.jpg) in a database? Is there any efficient, simple way to do it if I put the dataset source into the gridview (not using an imageField)?

You can try below code to display image in GridView which stored as a link in database. I have used simple HTML img tag to display image.
<asp:GridView ID="gvImages" CssClass="Gridview" runat="server" AutoGenerateColumns="False"
HeaderStyle-BackColor="#7779AF" HeaderStyle-ForeColor="white">
<Columns>
<asp:BoundField HeaderText = "Image Name" DataField="ImageURL" />
<asp:TemplateField HeaderText="Image">
<ItemTemplate>
<img src='<%# Eval("ImageURL") %>' Height="150" Width="150" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>

Related

Image in GridView ASP

I have a grid view in which in one column I want to display images. I have image URL stored in the database.I want the the gridview to dynamically bind the ImageField with the url from the database.
Try this.
<asp:TemplateField HeaderText="Image">
<ItemTemplate>
<asp:Image ID="ProductImage" runat="server" ImageUrl='<%# Eval("ProductImagePath") %>'/>
</ItemTemplate>
</asp:TemplateField>
Or this
<asp:ImageField HeaderText="Image" DataImageUrlField="ProductImagePath"/>

open a new webpage when a hyperlink is clicked, and where to set the page in VS

I have asp.net, and a webpage here:
<asp:GridView ID="BalanceCheckDataGridView" runat="server" AutoGenerateColumns="false" OnRowDataBound = "DataGridViewTotalSum" >
<Columns>
<asp:TemplateField HeaderText="Company" ItemStyle-Width="20%" >
<ItemTemplate>
<asp:HyperLink Text='<%# (Eval("Company"))%>' ID="HyperLink1" Target="_blank" runat="server"
NavigateUrl=WHAT SHOULD I PUT HERE IF I WANT TO NAVIGATE TO ANOTHER WEBPAGE IN THE SAME SOLUTION
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField ItemStyle-Width="30%" DataField="Balance" HeaderText="Balance" />
</Columns>
</asp:GridView>
So column“Company” is a hyperlink. when people click on it, i want to show in another webpage or add a gridview of the details information about that company. So, I need to pass the company name to it too.
How should I set the link in the hyperlink field? so that it can navigates to a webpage inside the solution?
Thanks.

I want to put table in asp.net grid view

this is my grid view code given below>
<asp:GridView ID="gvReport" runat="server" AutoGenerateColumns="False" GridLines="None"
ShowHeader="true" HorizontalAlign="Left" OnRowCommand="gvReport_RowCommand">
<Columns>
<asp:TemplateField HeaderText="User" ItemStyle-HorizontalAlign="Left">
<ItemTemplate>
<asp:Image id="img" text=<%#Eval("Coupon_Image")%>/>
</ItemTemplate>
<HeaderStyle Font-Bold="false" HorizontalAlign="Left" />
</asp:TemplateField>
<asp:TemplateField HeaderText="">
<ItemTemplate>
<asp:Button ID="getCoupon" runat="server" CssClass="btn" Width="145" Height="34"
CommandName="getCoupon" CommandArgument='<%#Eval("Coupon_Id")%>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
In this it showing like this
Image 1 Button
Image 2 Button
actually i want like this type in grid view
Image1 Image2 Image3
Button Button Button
Please help me ....
advance thanks
A gridview won't work for this. Use the Table control for that, and programmably build the rows and columns. The challenge is the gridview isn't meant to render horizontally. You may be able to make it work with a repeater or ListView too, as you can have the ListView or repeater render the columns, and the layout template be the table and header row.

Displaying an image icon in a gridview column with a href value in asp.net

I have a gridview column in which I have one column that point to a pdf file on the file server. I need to have another column right beside this, displaying the pdf icon. The user should be able to click the icon and launch the file from the file server.
My code is:
<asp:GridView ID="gvInvoices" AutoGenerateColumns="false" runat="server" Font-Names="Arial" Font-Size="Small" Width="50%">
<Columns>
<asp:TemplateField HeaderText="File Type">
<ItemTemplate><img runat="server" src="Images/img_Pdf.gif" id="imgFileType" /></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name">
<ItemTemplate><%#Eval("InvoiceNumber")%></ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
How can I add a "NavugateURL" or href="" to the img ?
Rather than using an HTML img control, try using an ASP.Net Server control.
A good choice would be the Hyperlink Control:
Instead of:
<img runat="server" src="Images/img_Pdf.gif" id="imgFileType" />
Use:
<asp:HyperLink ID="imgFileType" ImageUrl="Images/img_Pdf.gif" NavigateUrl="" runat="server">HyperLink</asp:HyperLink>
Just set your NavigateUrl property.
you need to wrap your icon around an anchor tag, and set the href of the anchor tag using DataBinding expression Eval. This assumes your Datasource field "PDFPath" is an absolute path.
<asp:GridView ID="gvInvoices" AutoGenerateColumns="false" runat="server" Font-Names="Arial" Font-Size="Small" Width="50%">
<Columns>
<asp:TemplateField HeaderText="File Type">
<ItemTemplate><a href='<%#Eval("PDFPath")%>'> <img runat="server" src="Images/img_Pdf.gif" id="imgFileType" /></a></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name">
<ItemTemplate><%#Eval("InvoiceNumber")%></ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
inside the RowDataBind event look for your image control and set its NavigateUrl property
protected void gvInvoices_RowDataBound(object Sender , GridViewRowEventArgs e)
{
if(e.Row.RowType==DataRow)
{
HtmlControl icon = e.Row.FindControl("imgFileType") as HtmlControl;
icon.NavigateUrl = ((MyDataType)e.Row.DataRow).PDFPath;
}
}
Note it is free hand writing so you may find some syntax errors that you should fix

Hyperlink in datagrid view

I want to set hyperlink field in datagrid view. When user clicks on that link, a query string should be generated and user should be directed to another page. So how can I set hyperlink to generate query string?
<asp:GridView ID="Griddata" runat="server" AutoGenerateColumns="False" CellPadding="1"
GridLines="Horizontal" Width="1000px" ShowFooter="True" CssClass="grid" AlternatingRowStyle-CssClass="alt">
<Columns>
<asp:HyperLinkField HeaderText="ID" DataTextField="rec_id" DataNavigateUrlFields="rec_id"
DataNavigateUrlFormatString="followme.aspx?record={0} " />
<asp:BoundField HeaderText="Login" DataField="LoginName"></asp:BoundField>
</Columns>
</asp:GridView>
This is a sample GridView defined in ASP.NET
You need to specify the <asp:Hyperlinkfield> in the column definition.
In that field, you need to specify the DataTextfield (is what will be displayed on screen in that column), your URL (DataNavigateUrlFormatString) and your parameter that you want to use in that URL (DataNavigateUrlFields)
Note: I'm binding to this grid from code-behind, not through a SqlDatAdaptor but the result is the same.
You will get something like this:
you can do like...
<ItemTemplate>
<asp:HyperLink ID="Edit" runat="server" Text="Edit" NavigateUrl='<%# Eval("DataKeyName", "~/View.aspx?Id={0}") %>' />
</ItemTemplate>
<a href='page.aspx?id=<#Eval("ID")>'>click</a>

Resources