how to add image in gridview in asp.net using C#

Question

0.00/5 (No votes)

See more:

In Gridview as follows

Faculty Name   Photo       1              2                 3

  Sathish                Dropdownlist1   Dropdownlist2   Dropdownlist3

In the GridView when i click the Sathish(Faculty Name) i want to show the image in Photo column in the GridView.

for that how can i do in asp.net using C#.

Posted 20-Dec-13 2:00am

Member 8054539

Updated 20-Dec-13 2:33am

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

v2

Add a Solution

Comments

Karthik_Mahalingam 20-Dec-13 9:00am

you want to do in post back or javascript ??

4 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Karthik_Mahalingam · Answer 1 · 2013-12-20T03:34:00

Hi
Try this sample , this might help you..

XML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="jquery-1.10.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        var showimage = function (thisobject) {
            var image = $('img[id*="imageFaculty"]', $(thisobject).parent().parent());
            if( image.css('display') == 'block')
                image.css('display', 'none');
            else
                image.css('display', 'block');
        }



    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="validateradios(); return false;" />
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" Width="100%">
        <Columns>
            <asp:TemplateField HeaderText="Required Access">
                <ItemTemplate>
                    <asp:LinkButton ID="btnFaculty" runat="server" OnClientClick="showimage(this); return false;"
                        Text='<%# Eval("Faculty") %>'></asp:LinkButton>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Required Access">
                <ItemTemplate>
                    <asp:Image ID="imageFaculty" ImageUrl='<%# Eval("imageurl") %>' runat="server" Style="display: none" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
    </form>
</body>
</html>

C#

protected void Page_Load(object sender, EventArgs e)
       {

           if (!Page.IsPostBack)
           {
               DataTable dt = new DataTable();
               dt.Columns.Add("Faculty", typeof(string));
               dt.Columns.Add("imageurl", typeof(string));

               dt.Rows.Add("sathish", "clickMe.png");
               dt.Rows.Add("karthik", "clickMe.png");

               GridView1.DataSource = dt;
               GridView1.DataBind();

           }
       }

note: Add Jquery reference to it..
http://code.jquery.com/jquery-1.10.2.min.js[^]

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) · Answer 2 · 2013-12-20T02:32:00

Go through the article - how to insert images into database and how to retrieve and bind images to gridview using asp.net (or) save and retrieve images from database using asp.net[^].
You will find the way how to bind image in GridView.

If you want to show image on click of the Facaulty Name, then refer- Making GridView Rows or Individual Cells Clickable and Selectable.[^] and while handling click, just bind the image.

Renuka Ruke · Answer 3 · 2013-12-20T02:33:00

ASP.NET

In GrideView ItemTemplate in image column(
  <img id="imgID" runat="server" src="~/Images/uncheckSmall.gif" style="Display:none" />
) 
image style Display make it none

On GrideView Row data bond of dropdown.onchange call javascript function.
And in Javascript function(imgID)
{
document.getElementById('<%=imgID.ClientID %>').style.display = 'block';
}

May be it will help you

nuke_infer · Answer 4 · 2013-12-20T02:41:00

Solution 3

plz follow this link this will provide the solution for your question
http://code.msdn.microsoft.com/bind-image-in-gridview-f88fc0f7

Posted 20-Dec-13 2:41am

nuke_infer

how to add image in gridview in asp.net using C#

4 solutions

Solution 4

Solution 1

Solution 2

Solution 3

Add your solution here

Preview 0