Select Unselect DataList Item on Image Click using jQuery in ASP.Net

Hi Mehram,

Check this example. Now please take its reference and correct your code.

HTML

<style type="text/css">
    .img-circle
    {
        border-radius: 50%;
    }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('[id*=hfSelected]').val('');
        $('[id*=lblImage]').on('click', function () {
            if ($(this).css('opacity') != "0.5") {
                $(this).css("opacity", 0.5);
                $(this).closest('td').find('[id*=hfSelected]').val(1);
            } else {
                $(this).css("opacity", 1);
                $(this).closest('td').find('[id*=hfSelected]').val(0);
            }
        });
    });
</script>
<asp:DataList ID="dlCustomers" runat="server" RepeatColumns="4" CellSpacing="5" RepeatLayout="Table"
    DataKeyField="ID">
    <ItemTemplate>
        <table class="table" border="0">
            <tr>
                <th colspan="2">
                    <b><%# Eval("Name") %></b>
                </th>
            </tr>
            <tr>
                <td colspan="2">
                    <asp:Image ID="lblImage" runat="server" CssClass="img-circle" Width="100px" hight="100px"
                        ImageUrl='<%#DataBinder.Eval(Container.DataItem, "PicPath")%>' />
                    <asp:HiddenField ID="hfSelected" runat="server" />
                </td>
            </tr>
        </table>
    </ItemTemplate>
</asp:DataList>
<br />
<asp:Button Text="Save" runat="server" OnClick="OnSave" />

Namespaces

C#

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

VB.Net

Imports System.Configuration
Imports System.Data.SqlClient

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        System.Data.DataTable dt = new System.Data.DataTable();
        dt.Columns.AddRange(new System.Data.DataColumn[] { 
                        new System.Data.DataColumn("ID", typeof(int)),
                        new System.Data.DataColumn("Name", typeof(string)),
                        new System.Data.DataColumn("PicPath",typeof(string)) });
        dt.Rows.Add(1, "Chrysanthemum", "~/Images/Chrysanthemum.jpg");
        dt.Rows.Add(2, "Desert", "~/Images/Desert.jpg");
        dt.Rows.Add(3, "Hydrangeas", "~/Images/Hydrangeas.jpg");
        dt.Rows.Add(4, "Jellyfish", "~/Images/Jellyfish.jpg");
        dt.Rows.Add(5, "Koala", "~/Images/Koala.jpg");
        dt.Rows.Add(6, "Lighthouse", "~/Images/Lighthouse.jpg");
        dt.Rows.Add(7, "Penguins", "~/Images/Penguins.jpg");
        dt.Rows.Add(8, "Tulips", "~/Images/Tulips.jpg");
        this.dlCustomers.DataSource = dt;
        this.dlCustomers.DataBind();
    }
}
protected void OnSave(object sender, EventArgs e)
{
    int i = 0;
    foreach (DataListItem item in dlCustomers.Items)
    {
        bool isSelected = (item.FindControl("hfSelected") as HiddenField).Value == "1" ? true : false;
        if (isSelected)
        {
            string id = dlCustomers.DataKeys[item.ItemIndex].ToString();
            string path = (item.FindControl("lblImage") as Image).ImageUrl;
            i += this.InsertDetails(id, path);
        }
    }

    ClientScript.RegisterClientScriptBlock(this.GetType(), "", "alert('" + i.ToString() + " records inserted.')", true);
}

private int InsertDetails(string id, string path)
{
    int i = 1;
    string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(conString))
    {
        SqlCommand cmd = new SqlCommand("INSERT INTO MemberDetails VALUES(@Id,@ImagePath)", con);
        cmd.Parameters.AddWithValue("@Id", id);
        cmd.Parameters.AddWithValue("@ImagePath", path);
        con.Open();
        i = cmd.ExecuteNonQuery();
        con.Close();
    }

    return i;
}

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 System.Data.DataTable = New System.Data.DataTable()
        dt.Columns.AddRange(New System.Data.DataColumn() {
                            New System.Data.DataColumn("ID", GetType(Integer)),
                            New System.Data.DataColumn("Name", GetType(String)),
                            New System.Data.DataColumn("PicPath", GetType(String))})
        dt.Rows.Add(1, "Chrysanthemum", "~/Images/Chrysanthemum.jpg")
        dt.Rows.Add(2, "Desert", "~/Images/Desert.jpg")
        dt.Rows.Add(3, "Hydrangeas", "~/Images/Hydrangeas.jpg")
        dt.Rows.Add(4, "Jellyfish", "~/Images/Jellyfish.jpg")
        dt.Rows.Add(5, "Koala", "~/Images/Koala.jpg")
        dt.Rows.Add(6, "Lighthouse", "~/Images/Lighthouse.jpg")
        dt.Rows.Add(7, "Penguins", "~/Images/Penguins.jpg")
        dt.Rows.Add(8, "Tulips", "~/Images/Tulips.jpg")
        Me.dlCustomers.DataSource = dt
        Me.dlCustomers.DataBind()
    End If
End Sub

Protected Sub OnSave(ByVal sender As Object, ByVal e As EventArgs)
    Dim i As Integer = 0
    For Each item As DataListItem In dlCustomers.Items
        Dim isSelected As Boolean = If(TryCast(item.FindControl("hfSelected"), HiddenField).Value = "1", True, False)
        If isSelected Then
            Dim id As String = dlCustomers.DataKeys(item.ItemIndex).ToString()
            Dim path As String = TryCast(item.FindControl("lblImage"), Image).ImageUrl
            i += Me.InsertDetails(id, path)
        End If
    Next

    ClientScript.RegisterClientScriptBlock(Me.GetType(), "", "alert('" & i.ToString() & " records inserted.')", True)
End Sub

Private Function InsertDetails(ByVal id As String, ByVal path As String) As Integer
    Dim i As Integer = 1
    Dim conString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As SqlConnection = New SqlConnection(conString)
        Dim cmd As SqlCommand = New SqlCommand("INSERT INTO MemberDetails VALUES(@Id,@ImagePath)", con)
        cmd.Parameters.AddWithValue("@Id", id)
        cmd.Parameters.AddWithValue("@ImagePath", path)
        con.Open()
        i = cmd.ExecuteNonQuery()
        con.Close()
    End Using

    Return i
End Function

Screenshot