I have two issues which I currently face while learning.
After learning how to insert background image into database, I tried to display the background image inside a div tag on another page but it did not work.
Basically, I want a situation where I click on any ImageButton inside DataList and it will insert the Image that appear in the ImageButton into database and will redirect to another page, and display that image as a background image of a div tag. But when I click on ImageButton and it redirects to another page, the background image does not show.
Secondly, after I click on an ImageButton, and the image in the ImageButton is passed as the background image of a div tag image, I tried to print using this, but the background image does not show.
*Could it be that since the background image was not converted into byte before inserting, that why it did not show in the div tag of the second page?
*Could it be that because I did not use asp:Image control to set the background image that is why it did not print the background image along with the card?
How do I do this, is it because i am not using asp image control to set the background image, that’s why it’s not showing?
This is my first page HTML
<div class="col-sm-10" style="margin-top: 2%; display: flex; width: 100%;">
<div class="grid-corner" style="width: 100%; background-color: white; font-size: 9pt; margin: 0 auto;">
<asp:DataList ID="TemplateList" runat="server" Width="100%" RepeatDirection="Horizontal" RepeatColumns="6" CellSpacing="3" RepeatLayout="Table" CssClass="row">
<ItemTemplate>
<asp:ImageButton ID="ImageButton1" CssClass="ImageButton" OnClick="OnBackgroundChange" runat="server" ImageUrl='<%# "data:image/png;base64," + Convert.ToBase64String((byte[])Eval("Data")) %>' Height="150" BorderStyle="Solid" BorderWidth="1" />
</ItemTemplate>
</asp:DataList>
</div>
</div>
Second page HTML
<div class="col-sm-6">
<asp:Panel Class="print-contents" ID="pnlContents" runat="server">
<div class="card" id="IDcard" runat="server" style="margin: 0 auto; width: 78%; height: 430px; border-radius: 10px; background-image:src();">
<div class="row" runat="server" id="header" style="width: 100%; margin: 0 auto; margin-top: 2%;">
<div class="col-2">
<asp:Image ID="Image2" ImageUrl="image.png" CssClass="idcardimg" AlternateText="logo" runat="server" Height="28" />
</div>
<div class="col-8">
<div style="float: inline-start;">
<div style="text-align: center;">
<asp:Label ID="lblName" runat="server" Text="Organization Name"></asp:Label>
</div>
<div style="text-align: center;">
<asp:Label ID="addresslbl" runat="server" Text="Contact Address"></asp:Label>
</div>
</div>
</div>
</div>
<div style="text-align: center;">
<asp:Label ID="TypeLbl" runat="server" Text="ID Type"></asp:Label>
</div>
<div class="contained" runat="server" id="middle" style="margin-bottom: 3%; margin-top: 20%; margin: 0 auto; text-align: center;">
<br />
<div style="text-align: center; margin-top: 20%;">
<div style="text-align: center; margin-top: 20%;">
<asp:Image ID="Image1" runat="server" Width="80" Height="80" />
</div>
<div style="text-align: center; margin-top: 3%;">
<asp:Label ID="Namelbl" runat="server" Text="Holder's Name"></asp:Label>
</div>
<div style="text-align: center; margin-top: 3%;">
<asp:Label ID="DeptLbl" runat="server" Text="Title/Department"></asp:Label>
</div>
</div>
</div>
<div class="row" runat="server" id="below" style="width: 100%; margin-top: 30%; vertical-align: bottom;">
<div class="col-sm-5">
<div class="form-group" style="float: left; font-size: 5pt;">
<div class="input-group">
<asp:Label ID="permitID" runat="server" Text=""></asp:Label>
</div>
</div>
</div>
<div class="col-sm-7">
<div style="float: right; font-size: 5pt; vertical-align: bottom;">
<asp:Image ID="Image3" ImageUrl="Test.png" runat="server" ImageAlign="Baseline" Style="position: relative; bottom: 0px; display: block;" Width="70" Height="70" />
</div>
</div>
</div>
</div>
</asp:Panel>
<div style="margin: 0 auto; padding: 10px;">
<asp:Button ID="PrintCard" runat="server" CssClass="btn navbar-btn" Text="Print ID Card" OnClientClick="return PrintPanel();" />
</div>
</div>
First page C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = this.GetTemplate();
TemplateList.DataSource = dt;
TemplateList.DataBind();
}
}
private DataTable GetTemplate()
{
string connectionString = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
using (SqlConnection con = new SqlConnection(connectionString))
{
using (SqlCommand cmd = new SqlCommand("SELECT Data FROM TemplateTable WHERE ContentType = 'image/png'"))
{
using (SqlDataAdapter da = new SqlDataAdapter())
{
cmd.Connection = con;
da.SelectCommand = cmd;
using (DataTable dt = new DataTable())
{
da.Fill(dt);
return dt;
}
}
}
}
}
protected void OnBackgroundChange(object sender, ImageClickEventArgs e)
{
//Set the url of Image in string variable.
string image = ((ImageButton)sender).ImageUrl;
string connectionString = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
using (SqlConnection con = new SqlConnection(connectionString))
{
// Insert statement.
using (SqlCommand cmd = new SqlCommand("INSERT INTO DocTable (Uid, email, Name, CreatedBy, ImageUrl) VALUES (@Uid, @email, @Name, @CreatedBy, @ImageUrl)", con))
{
cmd.Parameters.AddWithValue("@Uid", labelid.Text.Trim());
cmd.Parameters.AddWithValue("@email", user.Text.Trim());
cmd.Parameters.AddWithValue("@Name", named.Text.Trim());
cmd.Parameters.AddWithValue("@CreatedBy", createby.Text.Trim());
cmd.Parameters.AddWithValue("@ImageUrl", image);
con.Open();
cmd.ExecuteNonQuery();
con.Close();
Session["Imagebg"] = image;
Response.Redirect("Page2.aspx");
}
}
}
Second page C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
if (Session["cardbgImage"] != null)
{
IDcard.Attributes.Add("style", string.Format("width: 100%; z-index: -1; background: linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.9)), url('{0}') center center no-repeat; background-size: contain;", GetImagePath()));
}
}
}
private string GetImagePath()
{
string connectionString = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
string imagePath = string.Empty;
using (SqlConnection con = new SqlConnection(connectionString))
{
using (SqlCommand cmd = new SqlCommand("SELECT [ImageUrl] FROM [DocTable] Where ImageUrl=@ImageUrl", con))
{
cmd.Parameters.AddWithValue("@ImageUrl", Session["cardbgImage"]);
con.Open();
SqlDataReader dr = cmd.ExecuteReader();
if (dr.Read())
{
string s = (string)dr["ImageUrl"];
byte[] data = System.Text.Encoding.ASCII.GetBytes(s);
imagePath = "data:image/jpeg;base64," + Convert.ToBase64String(data);
}
con.Close();
}
}
return imagePath;
}
