Hi jovceka,
Refer below sample.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript">
$(function () {
GetProduct();
});
function Getproductname(ele) {
$(ele).html($(ele).closest('div').find('.sproductname').html());
if ($(ele).attr("ClickCount") == undefined || $(ele).attr("count") < 1) {
$(ele).removeAttr("data-target");
alert("pop and navigation is disabled after first click");
$(ele).href = window.open("http://www.google.in", "_blank", "toolbar=yes");
}
else {
$(ele).attr("data-target", "#DesPopUp");
$(".modal-body #lblName").html("Id is :" + $(ele).data('id') + " Name is : " + $(ele).closest('div').find('.sproductname').html());
$(".modal-body #lblName").css("color", "red");
}
$(ele).attr("ClickCount", 1);
}
function GetProduct() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "WebService.asmx/GetData",
data: {},
dataType: "json",
success: function (data) {
var table = $('#tblgrid');
var rows = "";
for (var i = 0; i < data.d.length; i++) {
rows += "<div class=trclass>" +
"<tr><td class=tdcolumn>" +
"<div class=tablediv>" +
"<div class=Productid>" + data.d[i].ProductId + "</div>" +
"<div class=sproductname>" + data.d[i].ProductName + "</div><br />" +
'<p><a class="btn btdeal" target="_blank" onclick = Getproductname(this) data-id="' + data.d[i].ProductId + '" id=btnDeal role="button" data-toggle="modal" >submit</a></p>' +
"</div></td></tr></div>"
}
table.append(rows);
},
failure: function (response) { alert(response.d); },
error: function (response) { alert(response.d); }
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="modal fade" id="DesPopUp" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
</div>
<div class="modal-body" id="listOfNotes">
<p>
Some text in the modal.</p>
<asp:Label ID="lblName" runat="server" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close</button>
</div>
</div>
</div>
</div>
</div>
<div>
<table id="tblgrid">
</table>
</div>
</form>
</body>
</html>
WebService
C#
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web.Services;
/// <summary>
/// Summary description for WebService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService
{
[WebMethod]
public Products[] GetData()
{
List<Products> details = new List<Products>();
string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
string query = "SELECT TOP 5 ProductId,ProductName FROM Products ORDER BY ProductId ASC";
SqlCommand cmd = new SqlCommand(query);
using (SqlConnection con = new SqlConnection(conString))
{
using (var sda = new SqlDataAdapter())
{
DataTable TableData = new DataTable();
cmd.Connection = con;
sda.SelectCommand = cmd;
TableData.Clear();
sda.Fill(TableData);
foreach (DataRow dtrow in TableData.Rows)
{
Products user = new Products();
user.ProductId = Convert.ToInt32(dtrow["ProductId"].ToString());
user.ProductName = dtrow["ProductName"].ToString();
details.Add(user);
}
}
}
return details.ToArray();
}
public class Products
{
public int ProductId { get; set; }
public string ProductName { get; set; }
}
}
VB.Net
Imports System.Collections.Generic
Imports System.Configuration
Imports System.Data
Imports System.Data.SqlClient
Imports System.Web.Services
' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
<System.Web.Script.Services.ScriptService()> _
<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
Public Class WebService
Inherits System.Web.Services.WebService
<WebMethod()>
Public Function GetData() As Products()
Dim details As List(Of Products) = New List(Of Products)()
Dim conString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Dim query As String = "SELECT TOP 5 ProductId,ProductName FROM Products ORDER BY ProductId ASC"
Dim cmd As SqlCommand = New SqlCommand(query)
Using con As SqlConnection = New SqlConnection(conString)
Using sda = New SqlDataAdapter()
Dim TableData As DataTable = New DataTable()
cmd.Connection = con
sda.SelectCommand = cmd
TableData.Clear()
sda.Fill(TableData)
For Each dtrow As DataRow In TableData.Rows
Dim user As Products = New Products()
user.ProductId = Convert.ToInt32(dtrow("ProductId").ToString())
user.ProductName = dtrow("ProductName").ToString()
details.Add(user)
Next
End Using
End Using
Return details.ToArray()
End Function
Public Class Products
Public Property ProductId As Integer
Public Property ProductName As String
End Class
End Class
Screenshot
