I have DataList that shows images from database; the images are contained in an Imagebutton. I also have a card on the web page, the card has labels and image controls. I want to be able to click on any of the Imagebuttons, and pass the clicked image as background image to card.
The idea is to create ID card templates with editing features like changing backgrounds, label colors, fonts and passport picture where users can create ID cards by choosing any template and edit the ID card using the provided features.
Here is my HTML. I know it may not be professional, as my Datalist control is not responsive; it skips out of its div tag if I increase the RepeatColumn 3 to 4
<div class="row" runat="server" style="width: 100%; margin: 0 auto; padding: 10px; margin-bottom: 0%;">
<div class="col-sm-3" style="margin-top: 2%; left: 0; z-index: 999; width: 100%; margin: 0 auto; padding: 10px; border-radius: 4px; border: 0.2px solid #f0f1f2; background-color: #fff;">
<div class="card" style="width: auto; background-color: #fff; border: none;">
<div class="card-body">
<asp:DataList ID="TemplateList" runat="server" Width="100%" RepeatDirection="Horizontal" RepeatColumns="3" CellSpacing="2" RepeatLayout="Table" CssClass="row">
<ItemTemplate>
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl='<%# "data:image/png;base64," + Convert.ToBase64String((byte[])Eval("Data")) %>' Height="100" BorderStyle="Solid" BorderWidth="1" />
</ItemTemplate>
</asp:DataList>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card1" id="IDcard" runat="server" style="width: 100%; border-radius: 6px; border: 2px solid #f0f1f2; background-color: #fff;">
<div class="row" style="width: 100%; margin: 0 auto; padding: 6px; margin-top: 3%;">
<div class="col-2">
<asp:Image ID="Image2" ImageUrl="image.png" AlternateText="logo" runat="server" Width="35" Height="30" />
</div>
<div class="col-8">
<span 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>
</span>
</div>
</div>
<div class="contained" style="margin-bottom: 3%; margin: 0 auto; text-align: center;">
<br />
<div style="text-align: center; margin-top: 10%;">
<div style="text-align: center; margin-top: 10%;">
<asp:Image ID="Image1" ImageUrl="Test.png" 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="Label4" runat="server" Text="Title/Designation/Department"></asp:Label>
</div>
</div>
</div>
<div class="row" style="width: 100%; margin: 0 auto; margin-top: 10%;">
<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 class="form-group" style="float: right; font-size: 5pt;">
<div class="input-group">
<asp:Image ID="Image3" ImageUrl="Test.png" runat="server" Width="80" Height="80" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-3" style="margin-top: 2%; left: 0; z-index: 999; width: 100%; margin: 0 auto; padding: 10px; border-radius: 4px; border: 0.2px solid #f0f1f2; background-color: #fff;">
<div class="" style="width: 100%; margin: 0 auto; padding: 6px; margin-top: 1%; border-radius: 4px;">
<div style="margin-top: 1%; margin-bottom: 4%;">
<label style="font-weight: 500; font-size: 8pt; color: #93979e;">Edit your permit</label>
</div>
<asp:Label ID="headcolor" runat="server">Header Color</asp:Label>
<div class="input-group" style="font-size: 4pt;">
<asp:TextBox ID="TextBox1" runat="server" AutoCompleteType="None" Font-Size="4pt" CssClass="form-control" />
<cc1:ColorPickerExtender ID="ColorPicker1" runat="server" TargetControlID="TextBox1"
PopupButtonID="ColorBtn" PopupPosition="TopRight" OnClientColorSelectionChanged="ColorChanged" />
<div class="input-group-append">
<span class="input-group-text" id="ColorBtn" runat="server" style="height: auto; background-color: transparent; color: #404344;">
<span id="toggle_picker" class="fad fa-eye-dropper" aria-hidden="true" style="cursor: pointer; font-size: 11pt; border: none;"></span>
</span>
</div>
</div>
<asp:Label ID="Label3" runat="server">Label Color</asp:Label>
<div class="input-group" style="font-size: 4pt;">
<asp:TextBox ID="BackTxt" runat="server" AutoCompleteType="None" Font-Size="4pt" CssClass="form-control" />
<cc1:ColorPickerExtender ID="ColorPickerExtender1" runat="server" TargetControlID="BackTxt"
PopupButtonID="BackColorBtn" PopupPosition="TopRight" OnClientColorSelectionChanged="ChangedAllColor" />
<div class="input-group-append">
<span class="input-group-text" id="BackColorBtn" runat="server" style="height: auto; background-color: transparent; color: #404344;">
<span id="perm_id" class="fad fa-eye-dropper" aria-hidden="true" style="cursor: pointer; font-size: 11pt; border: none;"></span>
</span>
</div>
</div>
<asp:Label ID="fontlbl" runat="server">Choose Font</asp:Label>
<div class="input-group">
<input type="text" class="fonts" />
</div>
</div>
</div>
</div>
This is how the background images are selected from database and displayed in the DataList control
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;
}
}
}
}
}
