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

Question

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


                        
                            
                                
                                    
                                        
                                            
                                        
                                    
                                
                            
                        

                        
                            
                                
                                    
                                        
                                    
                                    
                                        
                                            
                                                
                                            
                                            
                                                
                                            
                                        
                                    
                                
                                
                                    

                                    
                                        
                                            
                                        
                                        
                                            
                                        
                                         
                                             
                                        
                                    
                                
                                
                                    
                                        
                                            
                                                
                                            
                                        
                                    
                                    
                                        
                                            
                                                
                                            
                                        
                                    
                                
                            
                        

                        
                            
                                
                                    Edit your permit
                                
                                Header Color
                                
                                    
                                    
                                    
                                        
                                            
                                        
                                    
                                
                                Label Color
                                
                                    
                                    
                                    
                                        
                                            
                                        
                                    
                                
                                Choose Font

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

Accepted Answer

Hi @Donald Symmons,

You can use the following code:

Image size can be changed according to your own needs.

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.

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

0 additional answers