Hi Mehram,
Check this example. Now please take its reference and correct your code.
HTML
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<style type="text/css">
.img-circle
{
border-radius: 50%;
}
input[type="checkbox"][id^="cb"]
{
display: none;
}
label
{
border: 1px solid #fff;
padding: 10px;
display: block;
position: relative;
margin: 10px;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
label::before
{
background-color: white;
color: white;
content: " ";
display: block;
border-radius: 50%;
border: 1px solid grey;
position: absolute;
top: -5px;
left: -5px;
width: 25px;
height: 25px;
text-align: center;
line-height: 28px;
transition-duration: 0.4s;
transform: scale(0);
}
label img
{
height: 100px;
width: 100px;
transition-duration: 0.2s;
transform-origin: 50% 50%;
}
:checked + label
{
border-color: #ddd;
}
:checked + label::before
{
content: "✓";
background-color: grey;
transform: scale(1);
}
:checked + label img
{
transform: scale(0.9);
box-shadow: 0 0 5px #333;
z-index: -1;
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
//On Page Load
$(function () {
SetSelection();
});
//On UpdatePanel Refresh
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm != null) {
prm.add_endRequest(function (sender, e) {
if (sender._postBackSettings.panelsToUpdate != null) {
SetSelection();
}
});
};
function SetSelection() {
$('[id*=hfSelected]').val('0');
$('[id*=lblImage]').on('click', function () {
$(this).closest('td').find('input[type=checkbox]').click();
});
$('input[type = checkbox]').on('click', function () {
var isSelected = $(this).closest('td').find('[id*=hfSelected]');
if ($(isSelected).val() == "0") {
$(isSelected).val(1);
} else {
$(isSelected).val(0);
}
});
}
</script>
<section class="content-header">
<h1>Voting </h1>
</section>
<asp:UpdatePanel ID="upContent" runat="server">
<ContentTemplate>
<section class="content">
<div class="row">
<div class="col-xs-12">
<div class="box-body table-responsive">
<div class="row">
<div class="col-xs-12">
<table class="table table-bordered">
<tr>
<th>Company</th>
<th>Election Year</th>
<th></th>
</tr>
<tr>
<td style="width: 200px;">
<asp:DropDownList ID="cboCompany" runat="server" CssClass="chzn-select ddst" Width="100%"></asp:DropDownList>
</td>
<td style="width: 380px;">
<asp:DropDownList ID="cboElectionYear" runat="server" CssClass="chzn-select ddst" Width="100%" Enabled="true"></asp:DropDownList>
</td>
<td style="text-align: left;">
<asp:LinkButton ID="btnGetReport" runat="server" CssClass="btn btn-default btn-flat toolbtn" Style="float: left; margin: 0px;">Get Data</asp:LinkButton>
</td>
</tr>
</table>
</div>
</div>
<br />
<div class="row" id="divOptions" runat="server" visible="false">
<div class="col-xs-12" style="text-align: center;">
<asp:LinkButton ID="lnkExcel" runat="server" CssClass="gridbuttonred" style="padding:4px; border-radius:0px" Visible="false">Export to Excel</asp:LinkButton>
</div>
</div>
<br />
<div class="row">
<div class="col-xs-12 col-lg-12 col-md-12 col- row">
<asp:DataList ID="dlCustomers" runat="server" RepeatColumns="4" CellSpacing="5" RepeatLayout="Table"
DataKeyField="ElectionContributorsID">
<ItemTemplate>
<table class="table" border="0">
<tr>
<th colspan="2"><b><%# Eval("MemberName") %></b></th>
</tr>
<tr>
<td colspan="2">
<input type="checkbox" id='cb<%#Eval("ElectionContributorsID") %>' /><label for='cb<%#Eval("ElectionContributorsID") %>'>
<asp:Image ID="lblImage" runat="server" CssClass="img-circle" Width="100px" hight="100px"
ImageUrl='<%#DataBinder.Eval(Container.DataItem, "PicPath")%>' /></label>
<asp:HiddenField ID="hfSelected" runat="server" />
</td>
</tr>
<tr>
<td>Phone:</td>
<td><%# Eval("MemberFatherName")%></td>
</tr>
<tr>
<td>Fax:</td>
<td><%# Eval("FamilyName")%></td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
<asp:Button ID="Button1" Text="Save" runat="server" OnClick="OnSave" CssClass="btn btn-success" />
</div>
</div>
</div>
</div>
</div>
</section>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="lnkExcel" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdateProgress DisplayAfter="0" ID="MPG1" AssociatedUpdatePanelID="upContent"
runat="server">
<ProgressTemplate>
<div id="overlay">
<div id="modalprogress">
<div id="theprogress">
<img alt="indicator" src="Images/loading.gif" />
<br />
<br />
Please wait while system is updating ...
</div>
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</asp:Content>
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("ElectionContributorsID", typeof(int)),
new System.Data.DataColumn("MemberName", typeof(string)),
new System.Data.DataColumn("PicPath", typeof(string)),
new System.Data.DataColumn("MemberFatherName", typeof(string)),
new System.Data.DataColumn("FamilyName", typeof(string)) });
dt.Rows.Add(1, "Chrysanthemum", "~/Images/Chrysanthemum.jpg", "Chrysanthemum", "Flower");
dt.Rows.Add(2, "Desert", "~/Images/Desert.jpg", "Desert", "Flower");
dt.Rows.Add(3, "Hydrangeas", "~/Images/Hydrangeas.jpg", "Hydrangeas", "Flower");
dt.Rows.Add(4, "Jellyfish", "~/Images/Jellyfish.jpg", "Jellyfish", "Flower");
dt.Rows.Add(5, "Koala", "~/Images/Koala.jpg", "Koala", "Flower");
dt.Rows.Add(6, "Lighthouse", "~/Images/Lighthouse.jpg", "Lighthouse", "Flower");
dt.Rows.Add(7, "Penguins", "~/Images/Penguins.jpg", "Penguins", "Flower");
dt.Rows.Add(8, "Tulips", "~/Images/Tulips.jpg", "Tulips", "Flower");
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 System.Web.UI.WebControls.Image).ImageUrl;
i += this.InsertDetails(id, path);
}
}
ScriptManager.RegisterClientScriptBlock(sender as Control, this.GetType(), "alert", "alert('" + i.ToString() + " records inserted.')", true);
}
private int InsertDetails(string id, string path)
{
int i = 0;
string conString = System.Configuration.ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (System.Data.SqlClient.SqlConnection con = new System.Data.SqlClient.SqlConnection(conString))
{
string query = "INSERT INTO MemberDetails VALUES(@Id,@ImagePath)";
System.Data.SqlClient.SqlCommand cmd = new System.Data.SqlClient.SqlCommand(query, 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("ElectionContributorsID", GetType(Integer)),
New System.Data.DataColumn("MemberName", GetType(String)),
New System.Data.DataColumn("PicPath", GetType(String)),
New System.Data.DataColumn("MemberFatherName", GetType(String)),
New System.Data.DataColumn("FamilyName", GetType(String))})
dt.Rows.Add(1, "Chrysanthemum", "~/Images/Chrysanthemum.jpg", "Chrysanthemum", "Flower")
dt.Rows.Add(2, "Desert", "~/Images/Desert.jpg", "Desert", "Flower")
dt.Rows.Add(3, "Hydrangeas", "~/Images/Hydrangeas.jpg", "Hydrangeas", "Flower")
dt.Rows.Add(4, "Jellyfish", "~/Images/Jellyfish.jpg", "Jellyfish", "Flower")
dt.Rows.Add(5, "Koala", "~/Images/Koala.jpg", "Koala", "Flower")
dt.Rows.Add(6, "Lighthouse", "~/Images/Lighthouse.jpg", "Lighthouse", "Flower")
dt.Rows.Add(7, "Penguins", "~/Images/Penguins.jpg", "Penguins", "Flower")
dt.Rows.Add(8, "Tulips", "~/Images/Tulips.jpg", "Tulips", "Flower")
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"), System.Web.UI.WebControls.Image).ImageUrl
i += Me.InsertDetails(id, path)
End If
Next
ScriptManager.RegisterClientScriptBlock(TryCast(sender, Control), Me.GetType(), "alert", "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 = 0
Dim conString As String = System.Configuration.ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using con As Data.SqlClient.SqlConnection = New Data.SqlClient.SqlConnection(conString)
Dim query As String = "INSERT INTO MemberDetails VALUES(@Id,@ImagePath)"
Dim cmd As Data.SqlClient.SqlCommand = New Data.SqlClient.SqlCommand(query, 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