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 () { //.name is anchor tag with class "name"
$('[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" />
<!-- ModalPopupExtender -->
<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)
{
//Added to similate delay so that we see the loader working
//Must be removed when moving to production
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
'Added to similate delay so that we see the loader working
'Must be removed when moving to production
System.Threading.Thread.Sleep(2000)
Return GetCustomersPageWise(pageIndex, 10).GetXml()
End Function
ScreenShot
