Hi mickburden,
while we create a HTML Anchor Tag so we cant call code behind method directly onclick of Anchor Tag so what you need to do is take a button and assign click event to it and make it hide with style attribute display none like below
<asp:Button ID="btnPopUp" Text="ShowPopUp" OnClick="ShowPopUp" Style="display: none;" runat="server" />
so now you need to call above button's jQuery Click Event Handler On Click of Anchor Tag like below
$(function () {
$(".name").click(function () {
$('[id*=btnShow]').click();
});
});
Below i have created a sample which full fill your requirement you need to modify the code according to your need.
HTML
<div>
<table class="Grid" cellspacing="0" rules="all" border="1" id="Table1" style="width: 500px;
border-collapse: collapse;">
<tr>
<th scope="col" style="width: 200px;">
Customer Name
</th>
<th scope="col" style="width: 100px;">
City
</th>
<th scope="col" style="width: 100px;">
Country
</th>
<th scope="col" style="width: 100px;">
Postal Code
</th>
</tr>
</table>
<div id="dvGrid" style="height: 250px; overflow: auto; width: 517px">
<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" CssClass="Grid"
Width="500" OnRowDataBound="gvCustomers_RowDataBound">
<Columns>
<asp:BoundField DataField="ContactName" HeaderText="Customer Name" ItemStyle-CssClass="name"
ItemStyle-Width="200" HeaderStyle-Width="200" />
<asp:BoundField DataField="City" HeaderText="City" ItemStyle-CssClass="city" ItemStyle-Width="100"
HeaderStyle-Width="100" />
<asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-CssClass="country"
ItemStyle-Width="100" HeaderStyle-Width="100" />
<asp:BoundField DataField="PostalCode" HeaderText="Postal Code" ItemStyle-CssClass="postal"
ItemStyle-Width="100" HeaderStyle-Width="100" />
</Columns>
</asp:GridView>
<br />
<asp:Button ID="btnPopUp" Text="ShowPopUp" OnClick="ShowPopUp" Style="display: none;"
runat="server" />
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Button ID="btnShow" runat="server" Text="Show Modal Popup" />
<cc1:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panel1" TargetControlID="btnShow"
CancelControlID="btnClose" BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" align="center" Style="display: none">
Modal PopUp was Called By
<asp:Label ID="lblContactName" runat="server" /><br />
<asp:Button ID="btnClose" runat="server" Text="Close" />
</asp:Panel>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
var pageIndex = 1;
var pageCount;
$(function () {
$(".name").click(function () {
$('[id*=lblContactName]').html($(this).html());
$('[id*=btnShow]').click();
});
});
$("#dvGrid").on("scroll", function (e) {
var $o = $(e.currentTarget);
if ($o[0].scrollHeight - $o.scrollTop() <= $o.outerHeight()) {
GetRecords();
}
});
function GetRecords() {
pageIndex++;
if (pageIndex == 2 || pageIndex <= pageCount) {
if ($("[id$=gvCustomers] .loader").length == 0) {
var row = $("[id$=gvCustomers] tr").eq(0).clone(true);
row.addClass("loader");
row.children().remove();
row.append('<td colspan = "999" style = "background-color:white"><img id="loader" alt="" src="103.gif" /></td>');
$("[id$=gvCustomers]").append(row);
}
$.ajax({
type: "POST",
url: "CS.aspx/GetCustomers",
data: '{pageIndex: ' + pageIndex + '}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert(response.d);
},
error: function (response) {
alert(response.d);
}
});
}
}
function OnSuccess(response) {
var xmlDoc = $.parseXML(response.d);
var xml = $(xmlDoc);
pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCount").text());
var customers = xml.find("Customers");
$("[id$=gvCustomers] .loader").remove();
customers.each(function () {
var customer = $(this);
var row = $("[id$=gvCustomers] tr").eq(0).clone(true);
$(".name", row).html(customer.find("ContactName").text());
$(".city", row).html(customer.find("City").text());
$(".postal", row).html(customer.find("PostalCode").text());
$(".country", row).html(customer.find("Country").text());
$("[id$=gvCustomers]").append(row);
});
$("#loader").hide();
}
</script>
<style type="text/css">
.modalBackground
{
background-color: Black;
filter: alpha(opacity=40);
opacity: 0.4;
}
.modalPopup
{
background-color: #FFFFFF;
width: 300px;
border: 3px solid #0DA9D0;
}
.modalPopup .header
{
background-color: #2FBDF1;
height: 30px;
color: White;
line-height: 30px;
text-align: center;
font-weight: bold;
}
.modalPopup .body
{
min-height: 50px;
line-height: 30px;
text-align: center;
padding: 5px;
}
.modalPopup .footer
{
padding: 3px;
}
.modalPopup .button
{
height: 23px;
color: White;
line-height: 23px;
text-align: center;
font-weight: bold;
cursor: pointer;
background-color: #9F9F9F;
border: 1px solid #5C5C5C;
}
.modalPopup td
{
text-align: left;
}
.Grid td
{
background-color: #A1DCF2;
color: black;
font-size: 10pt;
font-family: Arial;
line-height: 200%;
cursor: pointer;
width: 100px;
}
.Grid th
{
background-color: #3AC0F2;
color: White;
font-family: Arial;
font-size: 10pt;
line-height: 200%;
width: 100px;
}
</style>
</div>
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
gvCustomers.DataSource = GetCustomersPageWise(1, 10);
gvCustomers.DataBind();
}
}
protected void ShowPopUp(object sender, EventArgs e)
{
mp1.Show();
}
protected void gvCustomers_RowDataBound(object sender, System.Web.UI.WebControls.GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
DataRowView drv = (DataRowView)e.Row.DataItem;
HtmlAnchor mylink = new HtmlAnchor();
mylink.Attributes["class"] = "name";
string strid = e.Row.Cells[0].Text;
mylink.HRef = "#";
mylink.InnerText = e.Row.Cells[0].Text;
e.Row.Cells[0].CssClass = "";
e.Row.Cells[0].Controls.Add(mylink);
}
}
public static DataSet GetCustomersPageWise(int pageIndex, int pageSize)
{
string constring = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constring))
{
using (SqlCommand cmd = new SqlCommand("[Customer_GetCustomerWithPaging]"))
{
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@PageIndex", pageIndex);
cmd.Parameters.AddWithValue("@PageSize", pageSize);
cmd.Parameters.Add("@PageCount", SqlDbType.Int, 4).Direction = ParameterDirection.Output;
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.Connection = con;
sda.SelectCommand = cmd;
using (DataSet ds = new DataSet())
{
sda.Fill(ds, "Customers");
DataTable dt = new DataTable("PageCount");
dt.Columns.Add("PageCount");
dt.Rows.Add();
dt.Rows[0][0] = cmd.Parameters["@PageCount"].Value;
ds.Tables.Add(dt);
return ds;
}
}
}
}
}
[WebMethod]
public static string GetCustomers(int pageIndex)
{
System.Threading.Thread.Sleep(2000);
return GetCustomersPageWise(pageIndex, 10).GetXml();
}
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not IsPostBack Then
gvCustomers.DataSource = GetCustomersPageWise(1, 10)
gvCustomers.DataBind()
End If
End Sub
Protected Sub gvCustomers_RowDataBound(sender As Object, e As System.Web.UI.WebControls.GridViewRowEventArgs)
If e.Row.RowType = DataControlRowType.DataRow Then
Dim drv As DataRowView = DirectCast(e.Row.DataItem, DataRowView)
Dim mylink As New HtmlAnchor()
mylink.Attributes("class") = "name"
Dim strid As String = e.Row.Cells(0).Text
mylink.HRef = "#"
mylink.InnerText = e.Row.Cells(0).Text
e.Row.Cells(0).CssClass = ""
e.Row.Cells(0).Controls.Add(mylink)
End If
End Sub
Protected Sub ShowPopUp(sender As Object, e As EventArgs)
mp1.Show()
End Sub
Public Shared Function GetCustomersPageWise(pageIndex As Integer, pageSize As Integer) As DataSet
Dim constring As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using con As New SqlConnection(constring)
Using cmd As New SqlCommand("[Customer_GetCustomerWithPaging]")
cmd.CommandType = CommandType.StoredProcedure
cmd.Parameters.AddWithValue("@PageIndex", pageIndex)
cmd.Parameters.AddWithValue("@PageSize", pageSize)
cmd.Parameters.Add("@PageCount", SqlDbType.Int, 4).Direction = ParameterDirection.Output
Using sda As New SqlDataAdapter()
cmd.Connection = con
sda.SelectCommand = cmd
Using ds As New DataSet()
sda.Fill(ds, "Customers")
Dim dt As New DataTable("PageCount")
dt.Columns.Add("PageCount")
dt.Rows.Add()
dt.Rows(0)(0) = cmd.Parameters("@PageCount").Value
ds.Tables.Add(dt)
Return ds
End Using
End Using
End Using
End Using
End Function
<WebMethod()> _
Public Shared Function GetCustomers(pageIndex As Integer) As String
System.Threading.Thread.Sleep(2000)
Return GetCustomersPageWise(pageIndex, 10).GetXml()
End Function
ScreenShot
