Hi everyone, this is regarding code publshed on ASP Snippets called 'Load on demand data in GridView on scroll using ASP.Net and jQuery AJAX' by Mudassar Khan. https://www.aspsnippets.com/Articles/Load-on-demand-data-in-GridView-on-scroll-using-ASPNet-and-jQuery-AJAX.aspx With help from Mudassar Khan and recently a contributer of this forum called AnandM, I need help to be able to run code behind from a link produced within the gridview. With the altered Code a gridview is displayed with Data from a database, on the webpage which as you scroll down the gridview gets the next lot of data. The first column has a hyperlink attached and if you click the link an Ajax ModalPopupExtender appears and the text of the link appears within the popup.Ultimately what I want is when the link is clicked I'd like to pass the text from the cell I've clicked on to a vb proc that takes runs a query on the database and returns the data back to the ModalPopupExtender and then shows the popup. I've included all the code as modified by AnandM. I'd appreciate any help on this please
Kind regards
Mick
HTML
<%@ Page Title="" Language="VB" MasterPageFile="~/Masterpages/UllixMasterPage.master"
AutoEventWireup="false" CodeFile="movie2.aspx.vb" Inherits="Video_Movies_movie2" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="Content2" ContentPlaceHolderID="ChildContent1" runat="Server">
<asp:Panel ID="Panel1" Height="300" runat="server">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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;
}
.style2
{
width: 100%;
}
.style3
{
width: 24px;
}
</style>
<body>
<form id="form1">
<table class="style2">
<tr>
<td class="style3">
</td>
<td>
</td>
</tr>
<tr>
<td class="style3">
</td>
<td>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<table style="width: 100%">
<tr>
<td style="width: 28px">
</td>
<td>
<table class="Grid" cellspacing="0" rules="all" border="1" id="Table1" style="width: 1180px;
border-collapse: collapse;">
<tr>
<th scope="col" style="width: 420px;">
Movie Title
</th>
<th scope="col" style="width: 80px;">
Movie Genre
</th>
<th scope="col" style="width: 165px;">
FilmSeries
</th>
<th scope="col" style="width: 142px;">
Film Studio
</th>
<th scope="col" style="width: 60px;">
Film Year
</th>
<th scope="col" style="width: 63px;">
File Ext
</th>
<th scope="col" style="width: 40px;">
ID
</th>
<th scope="col" style="width: 40px;">
mediatypes
</th>
</tr>
</table>
<div id="dvGrid" style="height: 565px; overflow: auto; width: 1200px">
<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="False" CssClass="Grid"
Width="1180px" Font-Names="Verdana" Font-Size="XX-Small" Font-Bold="True" OnRowDataBound="gvCustomers_RowDataBound">
<Columns>
<asp:BoundField DataField="title" HeaderText="Movie Title" ItemStyle-CssClass="title"
ItemStyle-Width="400" HeaderStyle-Width="400">
<HeaderStyle Width="400px" />
<ItemStyle Font-Names="Verdana" Font-Size="XX-Small" CssClass="title" Width="400px" />
</asp:BoundField>
<asp:BoundField DataField="genre" HeaderText="Movie Genre" ItemStyle-CssClass="genre"
ItemStyle-Width="80" HeaderStyle-Width="80">
<HeaderStyle Width="80px" />
<ItemStyle Font-Names="Verdana" Font-Size="XX-Small" CssClass="genre" Width="80px" />
</asp:BoundField>
<asp:BoundField DataField="filmseries" HeaderText="Film Series" ItemStyle-CssClass="filmseries"
ItemStyle-Width="160" HeaderStyle-Width="160">
<HeaderStyle Width="160px" />
<ItemStyle Font-Names="Verdana" Font-Size="XX-Small" CssClass="filmseries" Width="160px" />
</asp:BoundField>
<asp:BoundField DataField="studio" HeaderText="Film Studio" ItemStyle-CssClass="studio"
ItemStyle-Width="130" HeaderStyle-Width="130">
<HeaderStyle Width="130px" />
<ItemStyle Font-Names="Verdana" Font-Size="XX-Small" CssClass="studio" Width="130px" />
</asp:BoundField>
<asp:BoundField DataField="filmyear" HeaderText="Film Year" ItemStyle-CssClass="filmyear"
ItemStyle-Width="60" HeaderStyle-Width="60">
<HeaderStyle Width="60px" />
<ItemStyle Font-Names="Verdana" Font-Size="XX-Small" CssClass="filmyear" Width="60px" />
</asp:BoundField>
<asp:BoundField DataField="fileext" HeaderText="File Ext" ItemStyle-CssClass="fileext"
ItemStyle-Width="60" HeaderStyle-Width="60">
<HeaderStyle Width="60px" />
<ItemStyle Font-Names="Verdana" Font-Size="XX-Small" CssClass="fileext" Width="60px" />
</asp:BoundField>
<asp:BoundField DataField="recid" HeaderText="recid" ItemStyle-CssClass="recid" ItemStyle-Width="40"
HeaderStyle-Width="40">
<HeaderStyle Width="40px" />
<ItemStyle Font-Names="Verdana" Font-Size="XX-Small" CssClass="recid" Width="40px" />
</asp:BoundField>
<asp:BoundField DataField="mediatype" HeaderText="mediatype" ItemStyle-CssClass="mediatype"
ItemStyle-Width="40" HeaderStyle-Width="40">
<HeaderStyle Width="40px" />
<ItemStyle Font-Names="Verdana" Font-Size="XX-Small" CssClass="mediatype" Width="40px" />
</asp:BoundField>
</Columns>
</asp:GridView>
<br />
<asp:Button ID="btnPopUp" Text="ShowPopUp" OnClick="ShowPopUp" Style="display: none;"
runat="server" />
<asp:Button ID="btnShow" runat="server" Text="Show Modal Popup" />
<asp:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panel3" TargetControlID="btnShow"
CancelControlID="btnClose" BackgroundCssClass="modalBackground">
</asp:ModalPopupExtender>
<asp:Panel ID="Panel3" 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>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>
<br />
<br />
<br />
<br />
<%--<script type="text/javascript" src="jquery-1.11.3.js"></script>--%>
<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 () {
$("[id$=gvCustomers] tr").eq(0).remove();
$(".title").click(function () {
$('[id*=lblContactName]').html($(this).html());
$('[id*=btnShow]').click();
});
});
//Load GridView Rows when DIV is scrolled
$("#dvGrid").on("scroll", function (e) {
var $o = $(e.currentTarget);
if ($o[0].scrollHeight - $o.scrollTop() <= $o.outerHeight()) {
GetRecords();
}
});
//Function to make AJAX call to the Web Method
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: "Movie2.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 to recieve XML response append rows to GridView
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);
$(".title", row).html(customer.find("title").text());
$(".genre", row).html(customer.find("genre").text());
$(".filmseries", row).html(customer.find("filmseries").text());
$(".studio", row).html(customer.find("studio").text());
$(".filmyear", row).html(customer.find("filmyear").text());
$(".fileext", row).html(customer.find("fileext").text());
$(".recid", row).html(customer.find("recid").text());
$(".mediatype", row).html(customer.find("mediatype").text());
$("[id$=gvCustomers]").append(row);
});
//Hide Loader
$("#loader").hide();
}
</script>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
</table>
</form>
</body>
</html>
</asp:Panel>
<asp:Panel ID="Panel2" runat="server">
<table class="style2">
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</asp:Panel>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder3" runat="Server">
</asp:Content>
VB.Net
Imports System.Data
Imports System.Data.SqlClient
Imports System.Web.Services
Imports System.Collections.Generic
Partial Class Video_Movies_movie2
'Inherits System.Web.UI.Page
Inherits BasePage
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not IsPostBack Then
gvCustomers.DataSource = GetCustomersPageWise(1, 40)
gvCustomers.DataBind()
End If
If Page.IsPostBack = False Then
MyBase.LogActivity("Movies")
Title = ConstClass.saveHitsNewToggleAdmin("Movies", "movies New", Request.UserHostAddress, True)
End If
End Sub
Public Shared Function GetCustomersPageWise(ByVal pageIndex As Integer, ByVal pageSize As Integer) As DataSet
Dim constring As String = ConfigurationManager.ConnectionStrings("ClubConnString").ConnectionString
Using con As New SqlConnection(constring)
Using cmd As New SqlCommand("GetMoviesMulti")
cmd.CommandType = CommandType.StoredProcedure
cmd.Parameters.AddWithValue("@PageIndex", pageIndex)
cmd.Parameters.AddWithValue("@PageSize", pageSize)
cmd.Parameters.AddWithValue("@mediatype", "Movie")
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
Protected Sub gvCustomers_RowDataBound(ByVal sender As Object, ByVal 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") = "title"
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(ByVal sender As Object, ByVal e As EventArgs)
lblContactName.Text = "WWWWWWWW"
' mp1.Show()
End Sub
<WebMethod()> _
Public Shared Function GetCustomers(ByVal 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, 40).GetXml()
End Function
End Class
