Hi jovceka,
You can refer below article.
Please 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" />
</head>
<body>
<form id="form1" runat="server">
<table id="tblgrid">
</table>
<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>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
GetProduct();
});
function Getproductname(ele) {
$(ele).html($(ele).closest('div').find('.sproductname').html());
$(ele)[0].href = "Default.aspx?Id=" + $(ele).data('id') + "&Name=" + $(ele).closest('div').find('.sproductname').html();
}
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" onclick=Getproductname(this) data-id="' + data.d[i].ProductId + '" id=btnDeal role="button" target="_blank">submit</a></p>' +
"</div></td></tr></div>"
}
table.append(rows);
},
failure: function (response) { alert(response.d); },
error: function (response) { alert(response.d); }
});
}
</script>
</form>
</body>
</html>
Code
C#
WebService.cs
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web.Services;
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[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; }
}
}
Default.aspx.cs
protected void Page_Load(object sender, EventArgs e)
{
Response.Write("ID : " + Request.QueryString["Id"] + "<br/>Name : " + Request.QueryString["Name"]);
}
VB.Net
WenServiceVB.vb
Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
<System.Web.Script.Services.ScriptService()> _
<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
Public Class WebServiceVB
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
Default2.aspx.vb
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
Response.Write("ID : " & Request.QueryString("Id") & "<br/>Name : " + Request.QueryString("Name"))
End Sub
Screenshot
