locked
Displaying images from an external Access database in a datalist on a webpage RRS feed

  • Question

  • User-2116945077 posted

    I have a C# asp.net project which is connected to an external Access2010 database.  Since Access doesn’t have an ‘Image’ Data Type, I used the ‘Hyperlink’ Data Type so that I can store the physical address of the images I want to add to my database.    From within Access, I can open the image without any hastle, but from my C# project….

     All I want the program to do, is follow the hyperlink filepath and display the picture to the viewer.  Since this program is for personal use, I want to keep the pictures on localside.

     On the aspx side, my coding looks like this:

    (NB.  I made use of a DataList named dlinfo)

    <asp:DataList ID="dlinfo" runat="server">
                <ItemTemplate>
                    <p>
                        authorname:
                        <asp:Label ID="lblauthorame" runat="server" Text='<%#Eval("[Skrywer name]") %>'></asp:Label>
                        <br />
                        Bookname:
                        <asp:Label ID="lblbookname" runat="server" Text='<%#Eval("[boeknaam]") %>'></asp:Label> 
                        <img src='<%#Eval("[cover3]") %>' />
                    </p>
                </ItemTemplate>
            </asp:DataList>
    

    And on the aspx.cs side, the coding looks like this:  

    (NB 'boekt' is the name of my table

      string connStr = WebConfigurationManager.ConnectionStrings["ConnectionString2"].ConnectionString;
    
            OleDbConnection ConnectionString2 = new OleDbConnection(connStr);
    
            ConnectionString2.Open();
    
            string asking = String.Format(("SELECT boekt.[Skrywer name], boeknaam, cover3 FROM boekt WHERE ([boekt].[Skrywer name]='Abby Green' AND boekt.boeknaam = 'Forgiven but not forgotten')"));
    
            OleDbCommand com = new OleDbCommand(asking, ConnectionString2);
    
            try
            {
                OleDbDataReader reader = com.ExecuteReader();
                dlinfo.DataSource = reader;
                dlinfo.DataBind();
                reader.Close();
    
            }
            finally
            {
                ConnectionString2.Close();
            }
    

    When I hit F5, everything but the picture is displayed to the screen.  I also tried adding a hyperlink-tag on the aspx side:

    <a href='<%#Eval("[cover3]") %>'>link</a>

    But once again I’ve hit a snag:  when I click on the link, nothing happens.  I’ve tried opening the link in a new tab, but the page is blank.

    I’ve also tried using Access’s   ‘Attachment’ and ‘OLE Object’. Data Types.   Neither of them display the picture, and clicking on the link  gives a HTTP 404 error

    Since I’m using an external database, I want to avoid using a datatable in my code and I do not want to add the pictures to the c# project itself either, since the database includes hundreds of pictures.

    Can somebody please help me?

    Hopefully waiting for guidance

    Riddleride

    Tuesday, June 12, 2018 8:38 PM

All replies

  • User-330142929 posted

    Hi Riddles,

    According to your code and description, I copied your code and reproduce your problem. I found that the URL generated in the html tag contains multiple # symbols On the front end.

    So I started to check the hyperlink data stored in the access database.

    The original hyperlink just stored a path, not a URL. Generate # symbol in characters after saving

    So we need to handle url string before binding to gridview.

    Here is my solution, wish it could be useful to you.

    Code behind.

    protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    OleDbConnection conn = new OleDbConnection(@"Provider = Microsoft.ACE.OLEDB.12.0; Data Source = C:\Users\Abrahamq\Documents\Database1.accdb;");
                    conn.Open();
                    OleDbCommand command = new OleDbCommand("select * from boekt", conn);
                    OleDbDataReader oleDbDataReader = command.ExecuteReader();
                    this.DataList1.DataSource = oleDbDataReader;
                    this.DataList1.DataBind();
                    oleDbDataReader.Close();
                    conn.Close();
                }
            }
            protected string Handle(object ImageUrl)
            {
                string url = Convert.ToString(ImageUrl);
                return url.Trim('#');
            }
    

    Aspx.

            <div>
                <asp:DataList ID="DataList1" runat="server">
                    <ItemTemplate>
                        ID:<asp:Label ID="Label1" runat="server" Text='<%# Eval("ID") %>'></asp:Label>
                        <asp:Image ID="Image2" runat="server" ImageUrl='<%# Handle(Eval("ImageUrl")) %>' Width="50px" Height="50px"/>
                    </ItemTemplate>
                </asp:DataList>
            </div>
    

    How it works.

    Please feel free to let me know if your problem still exists.

     

    Best Regards,

    Abraham

    Wednesday, June 13, 2018 2:09 PM
  • User-2116945077 posted

    Hi, Abraham

    Sorry for only replying now- I was studying for an exam and needed all the time I could get....undecided

    I'm afraid I am in need of your expertise again.  Firstly, in the database itself, did you make the picture's datatype a 'hyperlink'?  The reason I'm asking this, is because even though I added images to my database as a hyperlink and copied your code, I still hit a snag.  When I open the link directly from the database, the pictures open perfectly, but when i try to debug my project, the broken-image icon is shown in the browser.

    NB.  I made a new access database and c# project 

    Can you see what I'm doing wrong?

    aspx.net side  

      <form id="form1" runat="server">
       <div>
                <asp:DataList ID="DataList1" runat="server">
                    <ItemTemplate>
                        ID:<asp:Label ID="Label1" runat="server" Text='<%# Eval("ID") %>'></asp:Label>
                        <asp:Image ID="Image2" runat="server" ImageUrl='<%# Handle(Eval("picture")) %>' Width="50px" Height="50px"/>
                    </ItemTemplate>
                </asp:DataList>
            </div>
        </form>

    code-behind side  (again by msAccess Table's name is 'boekt'

    public partial class _Default : System.Web.UI.Page
        {
            protected void Page_Load(object sender, System.EventArgs e)
            {
                       if (!IsPostBack)
                {
                    OleDbConnection conn = new OleDbConnection(@"Provider=Microsoft.ACE.OLEDB.12.0;Data Source='C:\Users\Anja\Documents\Database1.accdb'");
                    conn.Open();
                    OleDbCommand command = new OleDbCommand("select * from boekt", conn);
                    OleDbDataReader oleDbDataReader = command.ExecuteReader();
                    this.DataList1.DataSource = oleDbDataReader;
                    this.DataList1.DataBind();
                    oleDbDataReader.Close();
                    conn.Close();
                }
            }
            protected string Handle(object ImageUrl)
            {
                string url = Convert.ToString(ImageUrl);
                return url.Trim('#');
            }
            }
        }

    Since you put the database's address in the code-behind file itself, I know that I don't need to do anything in the web.config file and therefore left it untouched.

    I am really baffled as I can clearly see that your example works 100%, and yet mine........ cry

    Can you please help?

    Riddleride

    Tuesday, December 18, 2018 2:21 PM