Image inside Repeater-VB.NET

Question

User-1578974752 posted

In the below repeater, Below   ,<%#DataBinder.Eval(Container.DataItem, "Question") this code ,I have to add an Image 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.  Appreciate the help

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

<div>

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

</div>

Repeater

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

<HeaderTemplate>

  </HeaderTemplate>

<ItemTemplate>

<div>

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

</div>

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

<td align="right"><img src="images/Dot.gif"/></td>

<td align="center"><asp:RadioButton ID="rad1" GroupName="Group1" runat="server" /></td>

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

<td align="left"><asp:RadioButton ID="rad2" GroupName="Group1" runat="server" OnSelectedIndexChanged="btnSave_Click" /></td>

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

<td align="center"><asp:RadioButton ID="rad3" GroupName="Group1" runat="server" /></td>

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

<td align="center"><asp:RadioButton ID="rad4" GroupName="Group1" runat="server" /></td>

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

</tr>

</ItemTemplate>

</asp:Repeater>

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TestConnectionString %>" SelectCommand="SELECT [Question], [Option1], [Option2], [Option3], [Option4] FROM [QuestionDetail]"></asp:SqlDataSource>

</div>

</form>

Code behind

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

For Each ri As RepeaterItem In repeater.Items

Dim r1 As RadioButton = TryCast(ri.FindControl("rad1"), RadioButton)

Dim r2 As RadioButton = TryCast(ri.FindControl("rad2"), RadioButton)

Dim r3 As RadioButton = TryCast(ri.FindControl("rad3"), RadioButton)

Dim r4 As RadioButton = TryCast(ri.FindControl("rad4"), RadioButton)

Dim r5 As RadioButton = TryCast(ri.FindControl("rad5"), RadioButton)

Next

End Sub

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

For Each item As RepeaterItem In repeater.Items

If item.ItemType = ListItemType.Item Then

Dim rdbList = TryCast(item.FindControl("rad1"), RadioButtonList)

Dim selected As String = rdbList.SelectedValue

ElseIf item.ItemType = ListItemType.Footer Then

Dim rdbList = TryCast(item.FindControl("rad2"), RadioButtonList)

Dim selected As String = rdbList.SelectedValue

End If

Next

End Sub

Answer 1

User283571144 posted

Hi shsu,

In the below repeater, Below   ,<%#DataBinder.Eval(Container.DataItem, "Question") this code ,I have to add an Image 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.  Appreciate the help

According to your description, I suggest you could firstly modify the sql query to seach the image path in the datasource and then using image tag to show the image for that question.

More details, you could refer to below codes:

QuestionDetail table:

CREATE TABLE [dbo].[Question]
(
	[Id] INT NOT NULL PRIMARY KEY, 
    [Question] NCHAR(80) NULL, 
    [Path] NCHAR(200) NULL, 
    [Option1] NCHAR(10) NULL, 
    [Option2] NCHAR(10) NULL, 
    [Option3] NCHAR(10) NULL, 
    [Option4] NCHAR(10) NULL
)

Codes:

        <div>
            <table>
            <asp:Repeater ID="repeater" runat="server" DataSourceID="SqlDataSource1">
                <HeaderTemplate>
                </HeaderTemplate>
                <ItemTemplate>
                    <div>
                        <td align="left"> <img src="<%#DataBinder.Eval(Container.DataItem, "Path") %>" /><%#DataBinder.Eval(Container.DataItem, "Question") %></td>
                    </div>
                    <tr style="background-color: White;">
                        <td align="right">

                            <img src="images/Dot.gif" /></td>
                        <td align="center">
                            <asp:RadioButton ID="rad1" GroupName="Group1" runat="server" /></td>
                        <td align="left"><%#DataBinder.Eval(Container.DataItem, "Option1") %></td>

                        <td align="left">
                            <asp:RadioButton ID="rad2" GroupName="Group1" runat="server" OnSelectedIndexChanged="btnSave_Click" /></td>

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

                        <td align="center">
                            <asp:RadioButton ID="rad3" GroupName="Group1" runat="server" /></td>

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

                        <td align="center">
                            <asp:RadioButton ID="rad4" GroupName="Group1" runat="server" /></td>

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

                    </tr>

                </ItemTemplate>

            </asp:Repeater>
                </table>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:aspnet-MVCApplication-20180424014300ConnectionString %>" SelectCommand="SELECT [Id], [Question], [Path], [Option1], [Option2], [Option3], [Option4] FROM [Question]"></asp:SqlDataSource>

        </div>

Rusult:

Best Reards,

Brando

Answer 2

User-1578974752 posted

Thanks. image box is showing but the image is not showing in the questions. Images are stored in the upload folder in wwwroot. Its Name and Path  is saved in the database through File upload

Dim fileName As String = Path.GetFileName(FileUpload1.PostedFile.FileName)

Dim filePath As String = "~/Uploads/" & fileName

'Save the Image File in Folder.

FileUpload1.PostedFile.SaveAs(Server.MapPath(filePath))

Answer 3

User283571144 posted

Hi shsu,

Could you please show me which the image path format you have stored in the database?

My image paht format path is as below:

..\fileupload\1.png

Best Regards,

Brando

Answer 4

User-1578974752 posted

Instead of the below code

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

I changed to Name ie saved as  abc.jpg in the table field Name

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

Now the image is showing

Answer 5

User-1578974752 posted

Here I am facing one issue

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

jpg file is not showing .It is saving in to database. Thanks

Answer 6

User-1578974752 posted

Hi Brando

Actually the image showing was the one stored inside the visual studio. But when I upload another image ,It is saving in to the folder and in to the database. But could not show in the repeater.

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

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

Answer 7

User283571144 posted

Hi shsu,

According to your codes("<img src="<%#DataBinder.Eval(Container.DataItem, "Name") %>" />"), the image src will as below:

<img src="fail-small.png" />

This will use the current page's folder's "fail-small.png" image.

In my opinion, this is the wrong path.

Have you tried ("<img src="<%#DataBinder.Eval(Container.DataItem, "Path") %>" />")?

Besides, the " ~/Uploads/fail-small.png " is not the right path, the right path is as below:

.. means the root path in the html page.

../Uploads/fail-small.png

Since I don't have your application, I don't know how you store the image in the upload folder and which is the root path of your application.

I suggest you could try to use F12 develop tool to see what path actually is in your repeater.

Best Regards,

Brando

Answer 8

User-369506445 posted

hi

try below

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