How do I create a feature where users can design card to their taste?

Question

How do I create a feature where users can design card to their taste?

Donald Symmons 3,066

Hello,

I have seen web applications where users are given the chance to design their cards themselves, choose colors and backgrounds. And I am trying to create a similar situation where a user can design and select background and font color for an invitational card. I thought of it and I don’t know any other way besides what I am about to explain here. I am using AjaxControlToolkit ColorPickerExtender to choose background color of card. There is a TextBox which contains color code when a color is selected from the AjaxControlToolkit ColorPickerExtender. Now I was thinking if it is to save the color code in the database table and retrieve it on another page. For example, after user has selected the background color of the card using the AjaxControlToolkit ColorPickerExtender, and the user clicks the save button and the color code in the TextBox is saved in the database table. Then when user navigates to the page where he or she can print the card, the chosen background color of the card will be retrieved and displayed on the card background. Please I want to know if this is the right approach to this, and how can I really do what I explained above?

Thank you

<div class="card1" runat="server" id="bgCard" style="width: 100%; height: auto; border: 0.3px solid #c7c7c7; border-radius: 5px; position: relative;">
                                        <div class="card-body">
                                        </div>
                                    </div>


<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: 10pt; border: none;"></span>
                                            </span>
                                        </div>
                                    </div>
<script type="text/javascript">
        function LabelColor(sender) {
           // document.getElementById("bgCard").style.color = "#" + sender.get_selectedColor();
            document.getElementById("bgCard").style.backgroundColor = "#" + sender.get_selectedColor();
        }
    </script>

When I save the color code that is displayed in the TextBox this is how it is in my table

Id	BgColor	email	CardID
1	0b2436	******@mail.com	20

Then, this is how I am retrieving the background color from database

string color = dr["BgColor"].ToString();//my color string bgCard.Style.Add("background-color", color);

So, in trying to retrieve the saved color from database table, I tried this but then I realized that color code come after a hashtag (#), for example: #0b2436, so I thought to myself how will only numbers represent color code without the hashtag?

So please I ask if anybody has a better idea on how I can achieve what I explained above?

Answer accepted by question author

0 additional answers

Your answer

Answer 1

QiYou-MSFT 4,341 Microsoft External Staff

Hi @Donald Symmons

It can be implemented, and for the convenience of the demonstration I use Session to pass the data.

Step 1: Select the color the user wants and enter his email address

<body>
    
    <form id="form1" runat="server" >
         <div >
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        
        <h1>Create a Business Card</h1>
    
        <asp:Label 
            ID="lblCardText" 
            Text="Card Text"
            AssociatedControlID="txtCardText"
            runat="server" />
        <br />
        <asp:TextBox
            ID="txtCardText"
            Runat="server" />
            
        <br /><br />    
    
        <asp:Label 
            ID="lblCardColor" 
            Text="Card Color"
            AssociatedControlID="txtCardColor"
            runat="server" />
        <br />
        <asp:TextBox
            ID="txtCardColor"
            AutoCompleteType="None"
            Runat="server" />
        <asp:Button
            ID="btnPickColor"
            Text="Pick Color"
            Runat="server" />
        <asp:Label
            ID="lblSample"
            Runat="Server" BackColor="#33FF99"> Sample </asp:Label>        
        <cc1:ColorPickerExtender 
            ID="txtCardColor_ColorPickerExtender"  
            TargetControlID="txtCardColor"
            PopupButtonID="btnPickColor"
            PopupPosition="TopRight"
            SampleControlID="lblSample"            
            Enabled="True" 
            runat="server">
        </cc1:ColorPickerExtender>
            
        <br /><br />
        
        <asp:Button
            ID="btnSubmit"
            Text="Submit"
            Runat="server"
            onclick="btnSubmit_Click"/>

       
    
    </div>
    </form>
</body>

 public string color="";
        protected void Page_Load(object sender, EventArgs e)
        {

            
         
        }

        protected void btnSubmit_Click(object sender, EventArgs e)
        {
            color = "background-color:#"+ txtCardColor.Text;
            Session["Color"] = color;
            Session["Email"] = txtCardText.Text;
            Response.Redirect("WebForm1.aspx");
        }

Step 2: Receive the data of the previous page through the Session and transfer the value from the back-end to the front-end through the <%=%> method.

 public partial class WebForm1 : System.Web.UI.Page
    {
        public static string a;
        public static string b;
        protected void Page_Load(object sender, EventArgs e)
        {
             a = Session["Email"].ToString();
             b = Session["Color"].ToString();

        }
    }

<form id="form1" runat="server">
       
       Email:<%=a %>
       Color:<%=b %>
        <div style=<%=b %>>
            <br />
            Test
        </div>
    </form>

Similarly, if you are stored through a database, just store the data of page 1 in the database and read it out on page 2.

Card

Best Regards

Qi You

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.

Donald Symmons 3,066 Reputation points

2023-05-23T09:46:22.4233333+00:00

Hi @QiYou-MSFT , Okay. Using Session could mean that if another user wants to have the same card, he will not be able to because session would have expired. The things is, if I am designing an online invitation card, and I send the registration link to people to register..when they register, the card that will appear at the end of registration for printing will be the one I designed for my event. I don't know if you understand me? So from your last statement: "Similarly, if you are stored through a database, just store the data of page 1 in the database and read it out on page 2." I think I'll use your example, but retrieve data from database and use the HTML code you showed me.
QiYou-MSFT 4,341 Reputation points Microsoft External Staff

2023-05-23T10:21:26.41+00:00

Hi @Donald Symmons

I used Session here for the convenience of the presentation. In fact, the principle is to obtain the code of this color through the color selected by the user, and then transmit it through the database. In our method, the color code is a string of 6 characters of hexadecimal digits. But the hexadecimal code (#RRGGBB) for colors in HTML requires this '#'. Your final meaning 'how will only numbers represent color code without the hashtag' I don't quite understand. Do you want to delete "#"? Generally speaking, 'bgcolor' can 'background-color:' can not.

If it's a functional problem, I can help you make a new example of this feature tomorrow. If it is a question of details, you can continue to ask questions and I will answer them one by one.

Best Regards

Qi You

Donald Symmons 3,066

Hi @QiYou-MSFT ,

After inserting the color code in the database, I retrieved the color code on next page and called it in the div card.

This is working

<div class="card1" runat="server" id="myCard" style="width: 250px; height: auto; position: relative;">
      <div class="card-body">
                            
      </div>
 </div>

private void DisplayCard()
        {
            string connectionString = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
            using (SqlConnection con = new SqlConnection(connectionString))
            {
               using (SqlCommand cmd = new SqlCommand("SELECT * FROM CardTable WHERE id = @id", con))
               {
                    cmd.Parameters.AddWithValue("@id", Request.QueryString["Id"]);
                    con.Open();
                    SqlDataReader dr = cmd.ExecuteReader();
                    if (dr.Read())
                    {
                       string bgColor = dr["BgColor"].ToString();
 		       myCard.Style.Add("background-color", string.Format("#{0}", bgColor));
                    }
               }
            }
        }

QiYou-MSFT 4,341 Reputation points Microsoft External Staff

2023-05-25T06:32:48.1+00:00

Hi @Donald Symmons

I am very happy that your project runs perfectly. I'll make a small suggestion: when choosing a color, you can refer to my example, which is to set up a sample to see what color is selected and how it works. This way I think the user experience of your project is more perfect.

Best Regards

Qi You
Donald Symmons 3,066 Reputation points

2023-05-25T16:57:43.47+00:00

Hi @QiYou-MSFT ,

I'll make a small suggestion: when choosing a color, you can refer to my example, which is to set up a sample to see what color is selected and how it works. This way I think the user experience of your project is more perfect.

Do you mean like a preview where user can the color selected ?

if it is, then yes, there is a preview before the color code is inserted into database table.
QiYou-MSFT 4,341 Reputation points Microsoft External Staff

2023-05-26T09:22:21.7833333+00:00

Hi @Donald Symmons

Ok, I think it's very good now.

Best Regards

Qi You

Share via

How do I create a feature where users can design card to their taste?

0 additional answers

Your answer