locked
How to show the image from the database inside repeater RRS feed

  • Question

  • User-1578974752 posted

    In the below repeater, Below   ,<%#DataBinder.Eval(Container.DataItem, "Question") this code ,I have to retrieve an Image from the database so that along with the question image from database will also show in the repeater .(the Filename saved in the database from another page using File upload).Each question is having Image. QuestiondetID,Question,option,Path,Name all are saved in the same table.It is working fine if I use in gridview with download link.But here I have to show as image  with its questions Appreciate the help

    Database

    Name : fail-small.png  ->  Varchar(80)

    Path : ~/Uploads/fail-small.png  ->nvarchar(200)

    QuestionDetail table is having Name-  varchar(80) and Path- nvarchar(200)

    <div>

    <td align="left"><%#DataBinder.Eval(Container.DataItem, "Question") %></td>

    </div>

    Tuesday, October 2, 2018 2:21 AM

Answers

  • User753101303 posted

    Hi,

    You could use the Image control ;https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.image?view=netframework-4.7.2 . It would be something such as ;

    <asp:Image runat="server" id="image" ImageUrl='<%#Eval("Path")%>'/>

    If I remember  ~ is processed for you. If the image doesn't show up and ~ is part of rendered image address you'll have to use ResolveClientUrl(Path) :
    - https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.control.resolveclienturl?view=netframework-4.7.2

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, October 2, 2018 11:03 AM
  • User-369506445 posted

    don't worry, it <g class="gr_ gr_24 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar multiReplace" id="24" data-gr-id="24">work</g> with <g class="gr_ gr_47 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar only-ins doubleReplace replaceWithoutSep" id="47" data-gr-id="47">list</g> 

     <asp:ListView ID="ListView1" runat="server"   DataKeyNames="QuestDetailID" Visible="False" 
                OnItemDataBound="ListView_ItemDataBound">

    and code behind

    Protected Sub ListView_ItemDataBound(sender As Object, e As ListViewItemEventArgs)
            
                Dim link As LinkButton = DirectCast(e.Item.FindControl("lnkDownload"), LinkButton)
                If (String.IsNullOrEmpty(link.CommandArgument)) Then
                    link.Visible = False
                End If
           
        End Sub

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, October 2, 2018 11:16 AM
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, October 2, 2018 1:25 PM

All replies

  • User-369506445 posted

    hi

    first, define the path field in your query 

    "SELECT [Question], [Option1], [Option2], [Option3], [Option4] FROM [QuestionDetail]"

    to

    "SELECT [Question], [Option1], [Option2], [Option3], [Option4],[path] FROM [QuestionDetail]"

    then you can use below code inside your repeater

    <img src="<%#DataBinder.Eval(Container.DataItem, "path") %>" /> 

    please follow below link

    https://www.c-sharpcorner.com/blogs/insert-and-retrieve-image-from-database-and-show-in-repeater1

    Tuesday, October 2, 2018 5:07 AM
  • User-1578974752 posted

    Thanks Vahid bakkhi, Tried  as your code but image is not showing.

    I have a download link with below code.It is opening the image but I want the image to be shown directly in the page instead of clicking the download link.

    <asp:LinkButton ID="lnkDownload" runat="server" CommandArgument='<%# Eval("Path") %>' OnClick="DownloadFile" Text="Download"></asp:LinkButton>

    Protected Sub DownloadFile(ByVal sender As Object, ByVal e As EventArgs)

     Dim filePath As String = CType(sender, LinkButton).CommandArgument

    Response.AppendHeader("Content-Disposition", ("attachment; filename=" + Path.GetFileName(filePath)))

    Response.WriteFile(filePath)

    Response.End()

      End Sub

    Tuesday, October 2, 2018 5:25 AM
  • User-369506445 posted

    I didn't get your mean, the below line shows the Image, doesn't it?

    <img src="<%#DataBinder.Eval(Container.DataItem, "path") %>" /> 

     

    Tuesday, October 2, 2018 5:49 AM
  • User-1578974752 posted

    It is not showing. Just cross mark is showing instead of picture.

    Tuesday, October 2, 2018 6:23 AM
  • User-369506445 posted

    because you have use Resolve path below like 

    <img src="/<%# Page.ResolveClientUrl((string)Eval("path"))%>"  />

    Tuesday, October 2, 2018 6:32 AM
  • User-1578974752 posted

    comma or valid expression continuation expected is showing when used as above instead of

    <img src="<%#DataBinder.Eval(Container.DataItem, "path") %>" />

    Tuesday, October 2, 2018 6:49 AM
  • User-369506445 posted

    do you still have the problem?

    Tuesday, October 2, 2018 6:55 AM
  • User-1578974752 posted

    Yes,when I use <img src="/<%# Page.ResolveClientUrl((string)Eval("path"))%>" />

    comma or valid expression continuation expected,error is showing.(String is a class type and can not use as an expression)

    I can adjust with the Download link as it is working. But the problem with the down load link is that ,some question will not have Path and Name .In that case If I click on the download link ,will show the error message. How to do such that, if there is no image in path the link button is not shown.

    <asp:LinkButton ID="lnkDownload" runat="server" CommandArgument='<%# Eval("Path") %>' OnClick="DownloadFile" Text="Show Image"></asp:LinkButton>

    Tuesday, October 2, 2018 8:59 AM
  • User-369506445 posted

    you can check it in your code behind in ItemDataBound event

    change your Repeater below like :

                <asp:Repeater ID="repeater" runat="server" DataSourceID="SqlDataSource1" OnItemDataBound="repeater_ItemDataBound">

    in Code behind

    Protected Sub repeater_ItemDataBound(sender As Object, e As RepeaterItemEventArgs)
            If e.Item.ItemType = ListItemType.Item Then
                Dim link As LinkButton = DirectCast(e.Item.FindControl("lnkDownload"), LinkButton)
                If (String.IsNullOrEmpty(link.CommandArgument)) Then
                    link.Visible = False
                End If
            End If
        End Sub

    the above code check if  the CommandArgument value be null then it  will disable the link button

    Tuesday, October 2, 2018 10:10 AM
  • User-1578974752 posted

    Sorry .. Actually it is not a repeater ..it is List view as below .Hence OnItemDataBound is not working. The code I copied was from another page.

    <img src="/<%# Page.ResolveClientUrl((string)Eval("path"))%>" />

    Is there any code as above which will not show error in List view and can show the image below each question with out clicking the download link.

    <asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1" DataKeyNames="QuestDetailID" Visible="False">

    <ItemTemplate>

    <div>

    <td align="right">

    <asp:Image ID="Image1" runat="server" ImageUrl="~/fail-small.png" /></td>

    <td align="center">

    <td align="left"><%#DataBinder.Eval(Container.DataItem, "Question") %></td>

    &nbsp;&nbsp;&nbsp; <asp:LinkButton ID="lnkDownload" runat="server" CommandArgument='<%# Eval("Path") %>' OnClick="DownloadFile" Text="Show Image" ForeColor="Maroon"></asp:LinkButton>

    </div>

    <p>

    <tr style="background-color:White;">

    <tr><td align="left" colspan="3"> <asp:HiddenField ID="QuestionDetailID" runat="server" Value='<%#Eval("QuestDetailID") %>' /> </td></tr>

    <td align="left"> <asp:Label ID="Option1" runat="server" Text=' <%# Eval("Option1") %>'></asp:Label><asp:RadioButton ID="rad1" GroupName="Group1" runat="server" /></td>

    <td align="left"> <asp:Label ID="Option2" runat="server" Text=' <%# Eval("Option2") %>'></asp:Label> <asp:RadioButton ID="rad2" GroupName="Group1" runat="server" /></td>

    <br>

    </tr>

    </ItemTemplate>

    </asp:ListView>

    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:QSCTestConnectionString %>" SelectCommand="SELECT TOP 15 [Question],[Name],[Path],[CorrectAnswer],[Option1], [Option2], [Option3], [Option4], [Option5], [QuestDetailID], [QuestionMasterID] FROM [QuestionDetail] WHERE ([QuestionMasterID] = @QuestionMasterID) ORDER BY NEWID()">

    <SelectParameters>

    <asp:ControlParameter ControlID="qusetid" Name="QuestionMasterID" PropertyName="Text" Type="Int64" />

    </SelectParameters>

    </asp:SqlDataSource>

    Tuesday, October 2, 2018 10:37 AM
  • User753101303 posted

    Hi,

    You could use the Image control ;https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.image?view=netframework-4.7.2 . It would be something such as ;

    <asp:Image runat="server" id="image" ImageUrl='<%#Eval("Path")%>'/>

    If I remember  ~ is processed for you. If the image doesn't show up and ~ is part of rendered image address you'll have to use ResolveClientUrl(Path) :
    - https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.control.resolveclienturl?view=netframework-4.7.2

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, October 2, 2018 11:03 AM
  • User-369506445 posted

    don't worry, it <g class="gr_ gr_24 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar multiReplace" id="24" data-gr-id="24">work</g> with <g class="gr_ gr_47 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar only-ins doubleReplace replaceWithoutSep" id="47" data-gr-id="47">list</g> 

     <asp:ListView ID="ListView1" runat="server"   DataKeyNames="QuestDetailID" Visible="False" 
                OnItemDataBound="ListView_ItemDataBound">

    and code behind

    Protected Sub ListView_ItemDataBound(sender As Object, e As ListViewItemEventArgs)
            
                Dim link As LinkButton = DirectCast(e.Item.FindControl("lnkDownload"), LinkButton)
                If (String.IsNullOrEmpty(link.CommandArgument)) Then
                    link.Visible = False
                End If
           
        End Sub

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, October 2, 2018 11:16 AM
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, October 2, 2018 1:25 PM