ID Card Template: Set background image of Card by clicking an image in Imagebutton in DataList

Donald Symmons 2,856 Reputation points
2023-03-30T23:09:11.26+00:00

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;
                        }
                    }
                }
            }
        }


.NET
.NET
Microsoft Technologies based on the .NET software framework.
3,438 questions
ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,301 questions
C#
C#
An object-oriented and type-safe programming language that has its roots in the C family of languages and includes support for component-oriented programming.
10,353 questions
0 comments No comments
{count} votes

Accepted answer
  1. Lan Huang-MSFT 26,121 Reputation points Microsoft Vendor
    2023-03-31T06:37:04.7733333+00:00

    Hi @Donald Symmons,

    You can use the following code:

    Image size can be changed according to your own needs.

     <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl='<%# "data:image/png;base64," + Convert.ToBase64String((byte[])Eval("Data")) %>' Height="100" BorderStyle="Solid" BorderWidth="1" OnClientClick="return GetButtonId(this)" />
    
     <script type="text/javascript">     
           function GetButtonId(button) {          
               var message = button.src;
               document.getElementById('IDcard').style.backgroundImage = 'url(' + message + ')'; 
               document.getElementById("IDcard").style.backgroundSize = "500px 500px";  
               return false;
           };
       </script>
    

    Best regards,
    Lan Huang


    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    0 comments No comments

0 additional answers

Sort by: Most helpful