Carsontl
asked on
Displaying a picture from an access database in Visual Web Studio 2008
Hello everyone,
I'm trying to figure out how to display a picture from an access database, i'm not really sure where to begin, i changed the column to "OLE Object" but my knowledge pretty much ends there.
How do i get the website to either straight display the picture, or read the URL information out of the Picture column, turn it into a variable, and slap the variable in a <img src> ?
Here's the code i've put into play so far:
I'm trying to figure out how to display a picture from an access database, i'm not really sure where to begin, i changed the column to "OLE Object" but my knowledge pretty much ends there.
How do i get the website to either straight display the picture, or read the URL information out of the Picture column, turn it into a variable, and slap the variable in a <img src> ?
Here's the code i've put into play so far:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Editor.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.style1
{
width: 100%;
}
.style2
{
width: 230px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<table class="style1">
<tr>
<td class="style2">
<asp:Image ID="User Picture" runat="server" Height="210px"
ImageUrl="~/App_Data/Pictures/test.jpg" Width="227px" />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</td>
<td>
<asp:AccessDataSource ID="AccessDataSource1" runat="server"
DataFile="~/App_Data/Assets.mdb"
DeleteCommand="DELETE FROM [Assets] WHERE [ID] = ?"
InsertCommand="INSERT INTO [Assets] ([Host_Name], [Owner], [Manufacturer], [Model], [OS], [CPU], [Memory], [HD_Capacity], [Comments], [Picture]) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)"
SelectCommand="SELECT * FROM [Assets] WHERE ([ID] = ?)"
UpdateCommand="UPDATE [Assets] SET [Host_Name] = ?, [Owner] = ?, [Manufacturer] = ?, [Model] = ?, [OS] = ?, [CPU] = ?, [Memory] = ?, [HD_Capacity] = ?, [Comments] = ?, [Picture] = ? WHERE [ID] = ?">
<SelectParameters>
<asp:ControlParameter ControlID="DropDownList1" DefaultValue="1" Name="ID"
PropertyName="SelectedValue" Type="Int32" />
</SelectParameters>
<DeleteParameters>
<asp:Parameter Name="ID" Type="Int32" />
</DeleteParameters>
<UpdateParameters>
<asp:Parameter Name="Host_Name" Type="String" />
<asp:Parameter Name="Owner" Type="String" />
<asp:Parameter Name="Manufacturer" Type="String" />
<asp:Parameter Name="Model" Type="String" />
<asp:Parameter Name="OS" Type="String" />
<asp:Parameter Name="CPU" Type="String" />
<asp:Parameter Name="Memory" Type="String" />
<asp:Parameter Name="HD_Capacity" Type="String" />
<asp:Parameter Name="Comments" Type="String" />
<asp:Parameter Name="Picture" Type="String" />
<asp:Parameter Name="ID" Type="Int32" />
</UpdateParameters>
<InsertParameters>
<asp:Parameter Name="Host_Name" Type="String" />
<asp:Parameter Name="Owner" Type="String" />
<asp:Parameter Name="Manufacturer" Type="String" />
<asp:Parameter Name="Model" Type="String" />
<asp:Parameter Name="OS" Type="String" />
<asp:Parameter Name="CPU" Type="String" />
<asp:Parameter Name="Memory" Type="String" />
<asp:Parameter Name="HD_Capacity" Type="String" />
<asp:Parameter Name="Comments" Type="String" />
<asp:Parameter Name="Picture" Type="String" />
</InsertParameters>
</asp:AccessDataSource>
<asp:AccessDataSource ID="AccessDataSource2" runat="server"
DataFile="~/App_Data/Assets.mdb"
SelectCommand="SELECT [ID], [Owner] FROM [Assets]"></asp:AccessDataSource>
<asp:DropDownList ID="DropDownList1" runat="server"
DataSourceID="AccessDataSource2" DataTextField="Owner" DataValueField="ID"
Height="25px" Width="224px" AutoPostBack="True">
</asp:DropDownList>
<asp:DetailsView ID="DetailsView1" runat="server" AllowPaging="True"
AutoGenerateRows="False" CellPadding="4" DataKeyNames="ID"
DataSourceID="AccessDataSource1" ForeColor="#333333" GridLines="None"
Height="50px" Width="225px">
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<CommandRowStyle BackColor="#E2DED6" Font-Bold="True" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<FieldHeaderStyle BackColor="#E9ECF1" Font-Bold="True" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<Fields>
<asp:BoundField DataField="Host_Name" HeaderText="Host_Name"
SortExpression="Host_Name" />
<asp:BoundField DataField="Owner" HeaderText="Owner" SortExpression="Owner" />
<asp:BoundField DataField="Manufacturer" HeaderText="Manufacturer"
SortExpression="Manufacturer" />
<asp:BoundField DataField="Model" HeaderText="Model" SortExpression="Model" />
<asp:BoundField DataField="OS" HeaderText="OS" SortExpression="OS" />
<asp:BoundField DataField="CPU" HeaderText="CPU" SortExpression="CPU" />
<asp:BoundField DataField="Memory" HeaderText="Memory"
SortExpression="Memory" />
<asp:BoundField DataField="HD_Capacity" HeaderText="HD_Capacity"
SortExpression="HD_Capacity" />
<asp:BoundField DataField="Comments" HeaderText="Comments"
SortExpression="Comments" />
<asp:BoundField DataField="Picture" HeaderText="Picture"
SortExpression="Picture" />
<asp:CommandField ShowDeleteButton="True" ShowEditButton="True"
ShowInsertButton="True" />
</Fields>
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<EditRowStyle BackColor="#999999" />
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
</asp:DetailsView>
</td>
</tr>
<tr>
<td class="style2">
</td>
<td>
</td>
</tr>
</table>
</form>
</body>
</html>
ASKER
Thanks for the assistance Samtran,
I've replaced the code with what you've provided here, but it does not display the picture. I thought it was user error and i didn't have the URL put in correctly, but it no longer displays a red X, just doesn't display the picture.
I've replaced the code with what you've provided here, but it does not display the picture. I thought it was user error and i didn't have the URL put in correctly, but it no longer displays a red X, just doesn't display the picture.
ASKER
No response from anyone, someone please help?
What does the html look like? Can you do a "view source" and post it?
ASKER
Thanks Sam, here's the source, i added a table setup, but will probably end up removing it.
I have your code in this snippet, and it does not display the image.
I have your code in this snippet, and it does not display the image.
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Editor.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.style1
{
width: 100%;
}
.style2
{
width: 230px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<table class="style1">
<tr>
<td class="style2">
Image on this side</td>
<td>
<asp:AccessDataSource ID="AccessDataSource1" runat="server"
DataFile="~/App_Data/Assets.mdb"
DeleteCommand="DELETE FROM [Assets] WHERE [ID] = ?"
InsertCommand="INSERT INTO [Assets] ([Host_Name], [Owner], [Manufacturer], [Model], [OS], [CPU], [Memory], [HD_Capacity], [Comments], [Picture]) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)"
SelectCommand="SELECT * FROM [Assets] WHERE ([ID] = ?)"
UpdateCommand="UPDATE [Assets] SET [Host_Name] = ?, [Owner] = ?, [Manufacturer] = ?, [Model] = ?, [OS] = ?, [CPU] = ?, [Memory] = ?, [HD_Capacity] = ?, [Comments] = ?, [Picture] = ? WHERE [ID] = ?">
<SelectParameters>
<asp:ControlParameter ControlID="DropDownList1" DefaultValue="1" Name="ID"
PropertyName="SelectedValue" Type="Int32" />
</SelectParameters>
<DeleteParameters>
<asp:Parameter Name="ID" Type="Int32" />
</DeleteParameters>
<UpdateParameters>
<asp:Parameter Name="Host_Name" Type="String" />
<asp:Parameter Name="Owner" Type="String" />
<asp:Parameter Name="Manufacturer" Type="String" />
<asp:Parameter Name="Model" Type="String" />
<asp:Parameter Name="OS" Type="String" />
<asp:Parameter Name="CPU" Type="String" />
<asp:Parameter Name="Memory" Type="String" />
<asp:Parameter Name="HD_Capacity" Type="String" />
<asp:Parameter Name="Comments" Type="String" />
<asp:Parameter Name="Picture" Type="String" />
<asp:Parameter Name="ID" Type="Int32" />
</UpdateParameters>
<InsertParameters>
<asp:Parameter Name="Host_Name" Type="String" />
<asp:Parameter Name="Owner" Type="String" />
<asp:Parameter Name="Manufacturer" Type="String" />
<asp:Parameter Name="Model" Type="String" />
<asp:Parameter Name="OS" Type="String" />
<asp:Parameter Name="CPU" Type="String" />
<asp:Parameter Name="Memory" Type="String" />
<asp:Parameter Name="HD_Capacity" Type="String" />
<asp:Parameter Name="Comments" Type="String" />
<asp:Parameter Name="Picture" Type="String" />
</InsertParameters>
</asp:AccessDataSource>
<asp:AccessDataSource ID="AccessDataSource2" runat="server"
DataFile="~/App_Data/Assets.mdb"
SelectCommand="SELECT [ID], [Owner] FROM [Assets]"></asp:AccessDataSource>
<asp:DropDownList ID="DropDownList1" runat="server"
DataSourceID="AccessDataSource2" DataTextField="Owner" DataValueField="ID"
Height="25px" Width="224px" AutoPostBack="True">
</asp:DropDownList>
<asp:DetailsView ID="DetailsView1" runat="server" AllowPaging="True"
AutoGenerateRows="False" CellPadding="4" DataKeyNames="ID"
DataSourceID="AccessDataSource1" ForeColor="#333333" GridLines="None"
Height="50px" Width="225px">
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<CommandRowStyle BackColor="#E2DED6" Font-Bold="True" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<FieldHeaderStyle BackColor="#E9ECF1" Font-Bold="True" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<Fields>
<asp:BoundField DataField="Host_Name" HeaderText="Host_Name"
SortExpression="Host_Name" />
<asp:BoundField DataField="Owner" HeaderText="Owner" SortExpression="Owner" />
<asp:BoundField DataField="Manufacturer" HeaderText="Manufacturer"
SortExpression="Manufacturer" />
<asp:BoundField DataField="Model" HeaderText="Model" SortExpression="Model" />
<asp:BoundField DataField="OS" HeaderText="OS" SortExpression="OS" />
<asp:BoundField DataField="CPU" HeaderText="CPU" SortExpression="CPU" />
<asp:BoundField DataField="Memory" HeaderText="Memory"
SortExpression="Memory" />
<asp:BoundField DataField="HD_Capacity" HeaderText="HD_Capacity"
SortExpression="HD_Capacity" />
<asp:BoundField DataField="Comments" HeaderText="Comments"
SortExpression="Comments" />
<asp:TemplateField HeaderText="Picture">
<ItemTemplate>
<asp:Image ID="ImgPicture" runat="server" ImageUrl='<%#Eval("Picture")%>' />
</ItemTemplate>
</asp:TemplateField>
<asp:CommandField ShowDeleteButton="True" ShowEditButton="True"
ShowInsertButton="True" />
</Fields>
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<EditRowStyle BackColor="#999999" />
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
</asp:DetailsView>
</td>
</tr>
<tr>
<td class="style2">
</td>
<td>
</td>
</tr>
</table>
</form>
</body>
</html>
Thanks for posting that (it might be helpful later)...but what I'm actually looking for is when you view it in a running browser and are testing the page...what you posted is the aspx file as you have it in the IDE and are designing it...but what actually outputs to the browser when you do a "view source" is not going to have server tags in it...
ASKER
Here you code, i read Source and just copied the original programming.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title>
<style type="text/css">
.style1
{
width: 100%;
}
.style2
{
width: 230px;
}
</style>
</head>
<body>
<form name="form1" method="post" action="testing.aspx" id="form1">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="KGYVOuSYYeK5FrGdlUpT6HusjAFu5XZ4Dza4XJfrri2lFq/nPERzBBdTF3iJk+U6SdOJLemPyux9IaKRq6b0A2Jo98Xn4xmntSWwLU6EPW2LOKVvt57LNyH2exTgupHz6aYJ4Fdvrj5VhvPxaqVDm2ll9jH4z64WmoR9bzkcFCjFIKnl+bigzDhQOudkLPh92mEDCjt/2aOBEcYJapu3lxZDXp7cFCDy6gymPAjm3anHOq564fqTiKJjaLkCznk7inE821iz4MWThDFY957kdH2raqXGADwXnerjmqeAwZmxkTfFlP0mHxbhIQ/n4dcMYsJafg+zYk3pgqSFvg0kHSiOoCqWcHC6Tekh5UFyQ6pnUESiena9QbVW/dIdA+4/CreXiihTdMdL5/2NiVVFi3MX9jIioURSslXcNsJ9UBSNzl7+VHZDBgHI/kQ0IIQJn/UruZ6p9KZKq2tSYvdLfYh3X/E6JBwk9fr3E088DKZ+H3w2pz99fdUUqZ8MQ+Bcdg0Ss+BkKjYucyl/OXsHmMHrvL99qab2/gA0BreHanv2Ml3l+7+q8vnmiQFpUT5wzi8Lyw0t1vrnWhc7rLxfE4wu4czQmGvM/Mbx4/Dapkc/VuaFMiq0fZKLk8nlZalt/D2J0WRkaNx2JXQBbG6v+THW8VEGHipdd9SpnykKgWZVffbGiZ2y0C7viTH9VKhfy44xp+RaMZ4RIlN0CMKWMH8SngxDUGcC8GTilnOZH5zvIyR8la3JawTRwgjdNT1Ag8NQSAMatSnVrDnhCfKmvAsLrpK8CdXy+8nCd2gEwBc=" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<div>
<input type="hidden" name="__VIEWSTATEENCRYPTED" id="__VIEWSTATEENCRYPTED" value="" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="dhV1v3VBfSCOOlcvJUq3ZbQ77AI1d0l0COgM8JwJJe4WdpU2aNRvEee08ZP+KNzptEjvvcbuInHJ8JqHRiBdOetVGNceNRT14WHu06pMK2DLwymJy9o3X6tU6S34Igyv" />
</div>
<table class="style1">
<tr>
<td class="style2">
Image on this side</td>
<td>
<select name="DropDownList1" onchange="javascript:setTimeout('__doPostBack(\'DropDownList1\',\'\')', 0)" id="DropDownList1" style="height:25px;width:224px;">
<option selected="selected" value="1">TOM CARSON</option>
<option value="2">SOPHORN ENG</option>
<option value="8">DEBBIE VESCIO</option>
<option value="9">JACKIE KONOLD</option>
<option value="10">JOHN WILSON</option>
<option value="11">LISA PENZONE</option>
<option value="12">MELISSA ABRAM</option>
</select>
<div>
<table cellspacing="0" cellpadding="4" border="0" id="DetailsView1" style="color:#333333;height:50px;width:225px;border-collapse:collapse;">
<tr style="color:#333333;background-color:#F7F6F3;">
<td style="background-color:#E9ECF1;font-weight:bold;">Host_Name</td><td>OH50CARSONTL630</td>
</tr><tr style="color:#284775;background-color:White;">
<td style="background-color:#E9ECF1;font-weight:bold;">Owner</td><td>TOM CARSON</td>
</tr><tr style="color:#333333;background-color:#F7F6F3;">
<td style="background-color:#E9ECF1;font-weight:bold;">Manufacturer</td><td>DELL</td>
</tr><tr style="color:#284775;background-color:White;">
<td style="background-color:#E9ECF1;font-weight:bold;">Model</td><td>D630</td>
</tr><tr style="color:#333333;background-color:#F7F6F3;">
<td style="background-color:#E9ECF1;font-weight:bold;">OS</td><td>WINXP</td>
</tr><tr style="color:#284775;background-color:White;">
<td style="background-color:#E9ECF1;font-weight:bold;">CPU</td><td>C2D 2.0GHZ</td>
</tr><tr style="color:#333333;background-color:#F7F6F3;">
<td style="background-color:#E9ECF1;font-weight:bold;">Memory</td><td>3000MB</td>
</tr><tr style="color:#284775;background-color:White;">
<td style="background-color:#E9ECF1;font-weight:bold;">HD_Capacity</td><td>80GB</td>
</tr><tr style="color:#333333;background-color:#F7F6F3;">
<td style="background-color:#E9ECF1;font-weight:bold;">Comments</td><td>OH50 SysAdmin</td>
</tr><tr style="color:#284775;background-color:White;">
<td style="background-color:#E9ECF1;font-weight:bold;">Picture</td><td>
<img id="DetailsView1_ImgPicture" src="c:\a.jpg" style="border-width:0px;" />
</td>
</tr><tr style="color:#333333;background-color:#E2DED6;font-weight:bold;">
<td colspan="2"><a href="javascript:__doPostBack('DetailsView1','Edit$0')" style="color:#333333;">Edit</a> <a href="javascript:__doPostBack('DetailsView1','Delete$0')" style="color:#333333;">Delete</a> <a href="javascript:__doPostBack('DetailsView1','New$0')" style="color:#333333;">New</a></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td class="style2">
</td>
<td>
</td>
</tr>
</table>
</form>
</body>
</html>ASKER
Wow, can't type in the morning, i meant here you go...
The image is trying to render, but the path it is pulling from the database is:
<img id="DetailsView1_ImgPictur
so I'm guessing "Picture" column is storing text like: "c:\a.jpg"?
and as a web application, ideally,
1. Your images would be in a folder inside the web folder...so your app might have a folder structure like:
\bin
\Images
pages.aspx
2. If your jpg's were inside the "Images" folder like the structure above, your db "Picture" column, would hold text like:
"Images/a.jpg"
so that when the image renders it would look like:
<img id="DetailsView1_ImgPictur
there's a few variations on #2 that are minor and can be dealt with...
but #1, storing your images in the web site itself is key...while it is possible to keep your pictures in a folder or server outside the actual web site, you end up having to deal with a bunch of security/permissions issues....
<img id="DetailsView1_ImgPictur
so I'm guessing "Picture" column is storing text like: "c:\a.jpg"?
and as a web application, ideally,
1. Your images would be in a folder inside the web folder...so your app might have a folder structure like:
\bin
\Images
pages.aspx
2. If your jpg's were inside the "Images" folder like the structure above, your db "Picture" column, would hold text like:
"Images/a.jpg"
so that when the image renders it would look like:
<img id="DetailsView1_ImgPictur
there's a few variations on #2 that are minor and can be dealt with...
but #1, storing your images in the web site itself is key...while it is possible to keep your pictures in a folder or server outside the actual web site, you end up having to deal with a bunch of security/permissions issues....
ASKER
Sorry for the delay, i got the pictures displaying how you showed, i can see the picture now!
Is there a way to move that line of code to the other side (left side) of the table where i've put the text
"Image on this side"
I'm afraid that if i just cut that code and paste it into the other side of the table i'm going to break a link to the database or something.
Is there a way to move that line of code to the other side (left side) of the table where i've put the text
"Image on this side"
I'm afraid that if i just cut that code and paste it into the other side of the table i'm going to break a link to the database or something.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Hmm i think i'm going to disregard the table and stick with the simple approach.
Thanks a ton for your help Sam!
Thanks a ton for your help Sam!
ASKER
Very helpful!!!!!!!
instead of:
<asp:BoundField DataField="Picture" HeaderText="Picture" SortExpression="Picture" />
try:
<asp:TemplateField HeaderText="Picture">
<ItemTemplate>
<asp:Image ID="ImgPicture" runat="server" ImageUrl='<%#Eval("Picture
</ItemTemplate>
</asp:TemplateField>