I designed an ID card template, with features to change background of the card, and do some other editing on the card. Everything worked fine, when I click the ImageButton in the repeater control, the card background image changes to the selected image in the ImageButton, or when I click on the image control to upload photo, the photo is added to the Image control. Then, when I selected the card type from the DropDownList, there will be an auto page refresh, so I decided to put everything inside an Update Panel. I thought it will stop the auto page refresh, it did actually but another issue surfaced. After I select the card type from the DropDownList or maybe I click on a button, I can no longer change the card background when I click on the ImageButton in the repeater control or upload photo when I click on the Image control. None of this works when I select value from DropDownList control. Please how can I make it that even if after selecting value from DropDownList or click on any button, everything will still be working (Photo upload, background image change, TextChange etc.)
I have made use of Stored procedure to display image Data from database and also to aid in custom paging for my repeater control.
SQL
CREATE PROCEDURE [dbo].[Templates]
@PageIndex INT = 1
,@PageSize INT = 10
,@RecordCount INT OUT
AS
BEGIN
SELECT ROW_NUMBER() OVER(ORDER BY Id) RowNumber
,Id
,Data
INTO #Temp
FROM BackgroundTemplate
WHERE ContentType = 'image/png'
SELECT @RecordCount = COUNT(*) FROM #Temp
SELECT * FROM #Temp
WHERE (RowNumber BETWEEN ((@PageIndex-1) * @PageSize) + 1 AND (@PageIndex * @PageSize)) OR @PageIndex = - 1
DROP TABLE #Temp
END
RETURN 0
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" intergrity="sha384-AYmEC3Yw5cVb3ZcuHt0A9w35dYTsvhLPVnYs9eStHfGJv0vKxVfELGroGkvsg+p" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous" />
<script defer="" src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" media="all" />
<link href="css/bootstrap.css" rel="stylesheet" media="all" />
<link href="css/IdStyle.css" rel="stylesheet" />
<title></title>
<style type="text/css">
#content {
flex: auto;
}
@media screen and (min-width: 1200px) {
#content {
width: 100%;
}
}
@media screen and (min-width: 360px) and (max-width:640px) {
#content {
width: 100%;
}
}
#CardBtn { background-color: #145c7c; border-color: #145c7c; font-size: 9pt; color: #fff; margin: 0 auto; min-width: 100px;}
@media print {
body * {
visibility: hidden;
}
.print-contents, .print-contents * {
visibility: visible;
}
.print-contents {
position: absolute;
left: 0px;
right: 0px;
}
#IDcard {
visibility: visible;
}
}
.front{width: 220px; height: 350px; background-color: transparent; border-radius: 10px; border: 1px solid #999; margin: 0 auto;}
.back{width: 220px; height: 350px; background-color: white; border-radius: 10px; border: 1px solid #999; margin: 0 auto; margin-top: 2%;}
.dp{width: 100px; position: relative; height: 100px; top: 30px; left: 50%; cursor: pointer; transform: translate(-50%); border-radius: 5px; border: 0.5px solid #f3f3f4;}
#Image2 {width: auto; height: 100%;}
.header h5{font-size: 8px;}
.bottom{clear:both; width: 100%; height: 38%; background-color: transparent; border-radius: 10px; text-align: center;}
.bottom h1{font-size: 15px; position: relative; top: 35%; text-transform: uppercase;}
.bottom h5{font-size: 9px; position: relative; top: 50px; text-transform: uppercase;}
.image{position: relative; top: 30px; float: right; margin: 0 auto; right: 5px;}
.sign{position: relative; top: 30px; float: left; margin: 0 auto; left: 5px;}
.imgQR{border: 1px solid #f3f3f4;}
.holder{border: 1px solid #f3f3f4; cursor: pointer;}
.info{font-size: 6px; margin: 10px 10px; margin-top: 6%; text-align: center; line-height: normal; vertical-align: baseline;}
.roundline{height: 10px; width: 100%; background-color: #343339; position: relative; top: 1px; left: 50%; transform: translate(-50%); border-radius: 5px;}
#adminsign{top: -4px; font-size: 4px;}
</style>
<script type="text/javascript">
$(function () {
var fileUpload = $("[id*=imgupload]");
var img = $("[id*=dp]");
img.click(function () { fileUpload.click(); });
fileUpload.change(function () {
var reader = new FileReader();
reader.onload = function (e) {
$("[id*=dp]").attr("src", e.target.result);
}
reader.readAsDataURL($(this)[0].files[0]);
});
});
</script>
<script type="text/javascript">
$(function () {
var fileUpload = $("[id*=signupload]");
var img = $("[id*=holder]");
img.click(function () { fileUpload.click(); });
fileUpload.change(function () {
var reader = new FileReader();
reader.onload = function (e) {
$("[id*=holder]").attr("src", e.target.result);
}
reader.readAsDataURL($(this)[0].files[0]);
});
});
</script>
</head>
<body style="background-color: #fdfdfd; font-family: 'Graphik', sans-serif; font-size: 17px; font-weight: 400;">
<form id="form1" runat="server">
<asp:ScriptManager ID="script" runat="server"></asp:ScriptManager>
<div id="content" style="font-size: 10pt; width: 100%;">
<asp:UpdatePanel ID="UpdatePane1" runat="server" ClientIDMode="Static" UpdateMode="Conditional">
<ContentTemplate>
<div class="row col-sm-12" runat="server" style="width: 100%; margin: 0 auto; padding: 10px; margin-bottom: 0%;">
<div class="col-sm-3" style="width: 100%; background-color: white; font-size: 9pt; margin: 0 auto; overflow-y: scroll;">
<div class="container">
<div class="row news-list" style="width: 100%;">
<asp:Repeater runat="server" ID="backgroundTemplates">
<ItemTemplate>
<div style="margin: 0 auto; padding: 10px; display: inline-block;">
<asp:ImageButton ID="ImageButton1" CssClass="ImageButton" runat="server" ImageUrl='<%# "data:image/png;base64," + Convert.ToBase64String((byte[])Eval("Data")) %>' Height="100" BorderStyle="Solid" BorderWidth="1" />
</div>
</ItemTemplate>
</asp:Repeater>
<asp:Repeater ID="rptPager" runat="server">
<ItemTemplate>
<asp:LinkButton ID="lnkPage" runat="server" Text='<%#Eval("Text") %>' CommandArgument='<%# Eval("Value") %>'
CssClass='<%# Convert.ToBoolean(Eval("Enabled")) ? "page_enabled" : "page_disabled" %>'
OnClick="Page_Changed" OnClientClick='<%# !Convert.ToBoolean(Eval("Enabled")) ? "return false;" : "" %>'></asp:LinkButton>
</ItemTemplate>
</asp:Repeater>
</div>
</div>
</div>
<div class="col-sm-5" style="width: 100%; margin: 0 auto;">
<div class="container" id="IDcard" runat="server" style="width: 100%; margin: 0 auto; padding: 10px;">
<asp:Panel Class="print-contents" ID="pnlContents" runat="server">
<div class="front" runat="server" id="front">
<div class="IDtop">
<div class="row" runat="server" id="header" style="width: 100%; margin-top: 5px;">
<div class="col-2">
<asp:Image ID="Image2" CssClass="idcardimg" AlternateText="logo" runat="server" Height="20" />
</div>
<div class="header col-9">
<div style="text-align: center;">
<h5>
<asp:Label ID="lblName" runat="server" Text="Heritage Schools"></asp:Label></h5>
</div>
</div>
</div>
<div class="type" id="type" style="text-align: center;">
<asp:Label ID="typelbl" runat="server" Text="STAFF"></asp:Label>
<span style="color: #999;">IDENTITY CARD</span>
</div>
<asp:FileUpload ID="imgupload" runat="server" Style="display: none" />
<asp:Image AlternateText="Upload Photo" ID="dp" runat="server" ImageUrl="Photo.png" CssClass="dp" />
</div>
<div class="bottom">
<h1>
<asp:Label runat="server" ID="idname" Text="Holder's Name"></asp:Label></h1>
<h5>
<asp:Label runat="server" ID="Designatelbl" Text="Title"></asp:Label></h5>
<h5>
<asp:Label runat="server" ID="cardID" Text="ID"></asp:Label></h5>
<br />
<div class="sign">
<asp:FileUpload ID="signupload" runat="server" Style="display: none" />
<asp:Image AlternateText="Upload Signature" ID="holder" ImageUrl="Sign.png" runat="server" CssClass="holder" Height="30" />
<p style="font-size: 8pt;">Holder's signature</p>
</div>
<div class="image">
<asp:Image ID="Image3" runat="server" CssClass="imgQR" ImageUrl="~/images/qr.png" Height="50" BorderStyle="Solid" />
</div>
</div>
</div>
<asp:HiddenField ID="ImageDatahf" runat="server" />
</asp:Panel>
<div class="btnfront" style="margin: 0 auto; padding: 10px; text-align: center;">
<asp:Button ID="Button1" runat="server" CssClass="btn navbar-btn" Text="Print Front Card" />
</div>
<asp:Panel Class="print-contents" ID="Panel1" runat="server">
<div class="back">
<div class="roundline"></div>
<div class="info">
<p>This is an official document and relates only to the person whose name, signature and photograph appear on the reverse.</p>
<p>Impersonation of the authorized holder, alteration or destruction are penal offences.</p>
<p>If lost, must be reported immediately and if found, please send to the nearest police station.</p>
<p>OR</p>
<asp:Label runat="server" ID="comp" Text="Company/Institution"></asp:Label>
<br />
<asp:Label runat="server" ID="addrss" Text="Company/Institution Address"></asp:Label>
<br />
<div class="authority">
<asp:Image ID="Image5" runat="server" ImageUrl="~/images/sign.PNG" Height="30" />
<br />
<label style="font-size: 6pt;">Authorized signature</label>
<br />
<asp:Label runat="server" ID="adminsign" Text="Human Resource Manager"></asp:Label>
</div>
</div>
</div>
</asp:Panel>
<div class="btnfront" style="margin: 0 auto; padding: 10px; text-align: center;">
<asp:Button ID="Button2" runat="server" CssClass="btn navbar-btn" Text="Print Back Card" />
</div>
</div>
</div>
<div class="col-sm-4" 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; overflow-y: scroll;">
<div class="" style="width: 100%; margin: 0 auto; padding: 6px; margin-top: 1%; border-radius: 4px;">
<div style="margin-top: 1%; margin-bottom: 2%;">
<label style="font-weight: 500; font-size: 8pt; color: #93979e;">Edit ID Card</label>
</div>
<asp:Label ID="colorhead" runat="server">Font 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="LabelColor" />
<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="fontlbl" runat="server">Font Theme</asp:Label>
<div class="input-group">
<input type="text" class="fonts" />
</div>
<br />
<asp:Label ID="Label1" runat="server">Personal Details</asp:Label>
<hr />
<asp:Label ID="Label5" runat="server" Style="color: #999;">Card Type</asp:Label>
<div class="input-group" style="font-size: 4pt; margin-top: 3%;">
<asp:DropDownList ID="DropDownList1" runat="server" CssClass="form-control" ClientIDMode="Static" AutoPostBack="true" OnSelectedIndexChanged="DropDownList1_OnSelectedIndexChanged">
<asp:ListItem>Select</asp:ListItem>
<asp:ListItem Value="STAFF">STAFF</asp:ListItem>
<asp:ListItem Value="STUDENT">STUDENT</asp:ListItem>
</asp:DropDownList>
</div>
<asp:Label ID="Label2" runat="server" Style="color: #999;">Name</asp:Label>
<div class="input-group" style="font-size: 4pt; margin-top: 2%;">
<asp:TextBox ID="Textname" runat="server" AutoCompleteType="None" Font-Size="4pt" CssClass="form-control" placeholder="Name" AutoPostBack="true" OnTextChanged="Textname_TextChanged" onkeypress="GetValue(this.newname)" />
</div>
<asp:Label ID="Label6" runat="server" Style="color: #999;">Department/Title</asp:Label>
<div class="input-group" style="font-size: 4pt; margin-top: 3%;">
<asp:TextBox ID="TitleText" runat="server" AutoCompleteType="None" Font-Size="4pt" CssClass="form-control" placeholder="Name" AutoPostBack="true" OnTextChanged="TitleText_TextChanged" onkeypress="GetValue(this.title)" />
</div>
<asp:Label ID="Label8" runat="server" Style="color: #999;">ID</asp:Label>
<div class="input-group" style="font-size: 4pt; margin-top: 2%;">
<asp:TextBox ID="TextID" runat="server" AutoCompleteType="None" Font-Size="4pt" CssClass="form-control" placeholder="Name" AutoPostBack="true" OnTextChanged="TextID_TextChanged" onkeypress="GetValue(this.id)" />
</div>
<asp:Label ID="Label4" runat="server" Style="color: #999;">Organization Address</asp:Label>
<div class="input-group" style="font-size: 4pt; margin-top: 3%;">
<asp:TextBox ID="OrgAddress" runat="server" AutoCompleteType="None" Font-Size="4pt" CssClass="form-control" placeholder="Name" AutoPostBack="true" OnTextChanged="OrgAddress_TextChanged" onkeypress="GetValue(this.address)" />
</div>
<asp:Label ID="Label11" runat="server" Style="color: #999;">Authorized Signature</asp:Label>
<asp:FileUpload ID="FileUpload2" runat="server" />
<br />
<div class="btnfront" style="margin: 0 auto; width: 100%; margin-top: 5%;">
<asp:Button ID="CardBtn" runat="server" CssClass="btn navbar-btn" Text="Save Card" UseSubmitBehavior="false" OnClick="ExportToImage" OnClientClick="return ConvertToImage(this)" />
</div>
</div>
</div>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="CardBtn" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</div>
</form>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/tommoor/fontselect-jquery-plugin/master/fontselect.css" />
<script src="https://rawgit.com/tommoor/fontselect-jquery-plugin/master/jquery.fontselect.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script type="text/javascript">
function ConvertToImage(CardBtn) {
html2canvas($("#cardrear")[0]).then(function (canvas) {
var base64 = canvas.toDataURL();
$("[id*=ImageDatahf]").val(base64);
__doPostBack(CardBtn.name, "");
});
return false;
}
</script>
<script type="text/javascript">
$(document).ready(function () {
$('.ImageButton').click(function () {
var image = $(this).attr('src');
$('.front').css({ 'background-image': 'url(' + image + ')', 'background-repeat': 'no-repeat', 'background-size': 'cover' });
return false;
});
});
</script>
</body>
</html>
C#
private readonly int PageSize = 10;
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
this.GetCardbackground(1);
}
}
private void GetCardbackground(int pageIndex)
{
string connectionString = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
using (SqlConnection con = new SqlConnection(connectionString))
{
using (SqlCommand cmd = new SqlCommand("CardBackground", con))
{
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@PageIndex", pageIndex);
cmd.Parameters.AddWithValue("@PageSize", PageSize);
cmd.Parameters.Add("@RecordCount", SqlDbType.Int, 4);
cmd.Parameters["@RecordCount"].Direction = ParameterDirection.Output;
con.Open();
IDataReader dt = cmd.ExecuteReader();
backgroundTemplates.DataSource = dt;
backgroundTemplates.DataBind();
dt.Close();
con.Close();
int recordCount = Convert.ToInt32(cmd.Parameters["@RecordCount"].Value);
this.PopulatePager(recordCount, pageIndex);
}
}
}
private void PopulatePager(int recordCount, int currentPage)
{
double dblPageCount = (double)((decimal)recordCount / Convert.ToDecimal(PageSize));
int pageCount = (int)Math.Ceiling(dblPageCount);
List<ListItem> pages = new List<ListItem>();
if (pageCount > 0)
{
for (int i = 1; i <= pageCount; i++)
{
pages.Add(new ListItem(i.ToString(), i.ToString(), i != currentPage));
}
}
rptPager.DataSource = pages;
rptPager.DataBind();
}
protected void Page_Changed(object sender, EventArgs e)
{
int pageIndex = int.Parse((sender as LinkButton).CommandArgument);
this.GetCardbackground(pageIndex);
}
protected void Textname_TextChanged(object sender, EventArgs e)
{
idname.Text = Server.HtmlEncode(Textname.Text);
}
protected void TitleText_TextChanged(object sender, EventArgs e)
{
Designatelbl.Text = Server.HtmlEncode(TitleText.Text);
}
protected void TextID_TextChanged(object sender, EventArgs e)
{
cardID.Text = Server.HtmlEncode(TextID.Text);
}
protected void OrgAddress_TextChanged(object sender, EventArgs e)
{
addrss.Text = Server.HtmlEncode(OrgAddress.Text);
}
protected void DropDownList1_OnSelectedIndexChanged(object sender, EventArgs e)
{
if (DropDownList1.SelectedValue == "STAFF")
{
typelbl.Text = "STAFF";
}
else if (DropDownList1.SelectedValue == "STUDENT")
{
typelbl.Text = "STUDENT";
}
}
protected void ExportToImage(object sender, EventArgs e)
{
string base64 = Request.Form[ImageDatahf.UniqueID].Split(',')[1];
byte[] bytes = Convert.FromBase64String(base64);
Response.Clear();
Response.ContentType = "image/png";
Response.AddHeader("Content-Disposition", "attachment; filename=HTML.png");
Response.Buffer = true;
Response.Cache.SetCacheability(HttpCacheability.NoCache);
Response.BinaryWrite(bytes);
Response.End();
}
