Insert Background Image set from ImageButton into Database in ASP.Net

Hi RichardSa,

Refer below sample.

HTML

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<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="ImageButton2" OnClick="OnBackgroundChange" runat="server" ImageUrl='<%#Eval("Url")%>' Height="50" 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>

Namesspaces

C#

using System.Data;
using System.Configuration;
using System.Data.SqlClient;

VB.Net

Imports System.Data
Imports System.Configuration
Imports System.Data.SqlClient

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = this.GetTemplate();
        TemplateList.DataSource = dt;
        TemplateList.DataBind();
    }
}

//OnClick event for ImageButton
protected void OnBackgroundChange(object sender, ImageClickEventArgs e)
{
    //Set the url of Image in string variable.
    string image = ((ImageButton)sender).ImageUrl;
    IDcard.Style["background-image"] = "url('" + image + "')";
    IDcard.Style["background-repeat"] = "no-repeat";
    IDcard.Style["background-size"] = "cover";
    string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(conString))
    {
        // Insert statement.
        using (SqlCommand cmd = new SqlCommand("INSERT INTO Images2 (ImageUrl) VALUES (@ImageUrl)", con))
        {
            cmd.Parameters.AddWithValue("@ImageUrl", image);
            con.Open();
            cmd.ExecuteNonQuery();
            con.Close();
        }
    }
}

private DataTable GetTemplate()
{
    string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(conString))
    {
        using (SqlCommand cmd = new SqlCommand("SELECT Url FROM Images"))
        {
            using (SqlDataAdapter da = new SqlDataAdapter())
            {
                cmd.Connection = con;
                da.SelectCommand = cmd;
                using (DataTable dt = new DataTable())
                {
                    da.Fill(dt);
                    return dt;
                }
            }
        }
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As DataTable = Me.GetTemplate()
        TemplateList.DataSource = dt
        TemplateList.DataBind()
    End If
End Sub

'OnClick event for ImageButton
Protected Sub OnBackgroundChange(ByVal sender As Object, ByVal e As ImageClickEventArgs)
    'Set the url of Image in string variable.
    Dim image As String = (CType(sender, ImageButton)).ImageUrl
    IDcard.Style("background-image") = "url('" & image & "')"
    IDcard.Style("background-repeat") = "no-repeat"
    IDcard.Style("background-size") = "cover"
    Dim conString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As SqlConnection = New SqlConnection(conString)
        'Insert statement.
        Using cmd As SqlCommand = New SqlCommand("INSERT INTO Images2 (ImageUrl) VALUES (@ImageUrl)", con)
            cmd.Parameters.AddWithValue("@ImageUrl", image)
            con.Open()
            cmd.ExecuteNonQuery()
            con.Close()
        End Using
    End Using
End Sub

Private Function GetTemplate() As DataTable
    Dim conString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As SqlConnection = New SqlConnection(conString)
        Using cmd As SqlCommand = New SqlCommand("SELECT Url FROM Images")
            Using da As SqlDataAdapter = New SqlDataAdapter()
                cmd.Connection = con
                da.SelectCommand = cmd
                Using dt As DataTable = New DataTable()
                    da.Fill(dt)
                    Return dt
                End Using
            End Using
        End Using
    End Using
End Function

Screenshot