<%# Page Language="C#" AutoEventWireup="true" CodeFile="Ar_PieChart.aspx.cs" Inherits="Ar_PieChart" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta http-equiv='content-type' content='text/html; charset=UTF-16' />
<meta name="viewport" content="width=device-height,minimum-scale=0.5,maximum-scale=3.0,user-scalable=yes" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', { packages: ['corechart'] });
</script>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: 'POST',
dataType: 'json',
contentType: 'application/json',
url: 'Ar_PieChart.aspx/GetData',
data: '{}',
success:
function (response) {
drawVisualization(response.d);
}
});
})
function drawVisualization(dataValues) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Column Name');
data.addColumn('number', 'Column Value');
for (var i = 0; i < dataValues.length; i++) {
data.addRow([dataValues[i].ColumnName, dataValues[i].Value]);
}
new google.visualization.PieChart(document.getElementById('visualization')).draw(data, { is3D: true });
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="visualization" style="width: 600px; height: 350px">
</div>
</form>
</body>
</html>
Code Behind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Web.Services;
using MySql.Data.MySqlClient;
public partial class Ar_PieChart : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static List<Data> GetData()
{
MySqlConnection conn = new MySqlConnection("server=****;user id=****;Password=****;database=****");
DataSet ds = new DataSet();
DataTable dt = new DataTable();
conn.Open();
string cmdstr = "SELECT Class,COUNT(Class) FROM sh_report GROUP BY Class";
MySqlCommand cmd = new MySqlCommand(cmdstr, conn);
MySqlDataAdapter adp = new MySqlDataAdapter(cmd);
adp.Fill(ds);
dt = ds.Tables[0];
List<Data> dataList = new List<Data>();
string cat = "";
int val = 0;
foreach (DataRow dr in dt.Rows)
{
cat = dr[0].ToString();
val = Convert.ToInt32(dr[1]);
dataList.Add(new Data(cat, val));
}
return dataList;
}
}
public class Data
{
public string ColumnName = "";
public int Value = 0;
public Data(string columnName, int value)
{
ColumnName = columnName;
Value = value;
}
}
I am getting chart perfectly but i am in need of Arabic style like reverse.
i mean while seeing the chart view in mirror.
If any one know the answer please help me.
Thanks in advance.
Related
I want to create a grid and automatic update it, when data changes in the database. It works with a simple table control.
public partial class index : System.Web.UI.Page
{
static string connectionString = #"Data Source=*******;initial catalog=Test;persist security info=True; Integrated Security=SSPI;";
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static IEnumerable<Person> GetData()
{
using (var connection = new SqlConnection(connectionString))
{
connection.Open();
using (SqlCommand command = new SqlCommand(#"SELECT [Id],[Name] FROM [dbo].[Persons]", connection))
{
command.Notification = null;
SqlDependency.Start(connectionString);
SqlDependency dependency = new SqlDependency(command);
dependency.OnChange += new OnChangeEventHandler(Dependency_OnChange);
if (connection.State == ConnectionState.Closed)
connection.Open();
using (var reader = command.ExecuteReader())
return reader.Cast<IDataRecord>()
.Select(x => new Person(x.GetInt32(0), x.GetString(1))).ToList();
}
}
}
private static void Dependency_OnChange(object sender, SqlNotificationEventArgs e)
{
MyHub.Show();
}
public void FillGrid()
{
List<Person> persons = new List<Person>();
using (var connection = new SqlConnection(connectionString))
{
connection.Open();
using (SqlCommand command = new SqlCommand(#"SELECT [Id],[Name] FROM [dbo].[Persons]", connection))
{
if (connection.State == ConnectionState.Closed)
connection.Open();
using (SqlDataReader rdr = command.ExecuteReader())
{
while (rdr.Read())
{
var id = rdr.GetInt32(0);
var name = rdr.GetString(1);
persons.Add(new Person(id, name));
}
}
}
}
grid.DataSource = persons;
grid.DataBind();
}
}
public class MyHub : Hub
{
public static void Show()
{
IHubContext context = GlobalHost.ConnectionManager.GetHubContext<MyHub>();
context.Clients.All.displayStatus();
}
}
And the apsx Page :
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.6.4.min.js"></script>
<script src="Scripts/jquery.signalR-2.2.2.min.js"></script>
<script src="signalr/hubs"></script>
<script type="text/javascript">
$(function () {
// Proxy created on the fly
var job = $.connection.myHub;
// Declare a function on the job hub so the server can invoke it
job.client.displayStatus = function () {
getData();
};
// Start the connection
$.connection.hub.start();
getData();
});
function getData()
{
var $tbl = $('#tbl');
$.ajax({
url: '/index.aspx/GetData',
contentType: 'application/json;charset=utf-8',
datatype: 'json',
type: 'POST',
success: function (data) {
if (data.d.length > 0) {
var newdata = data.d;
$tbl.empty();
$tbl.append(' <tr><th>ID</th><th>Name</th></tr>');
var rows = [];
for (var i = 0; i < newdata.length; i++) {
rows.push(' <tr><td>' + newdata[i].Id + '</td><td>' + newdata[i].Name + '</td><td></tr>');
}
$tbl.append(rows.join(''));
}
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="tbl"></table>
<dx:ASPxGridView ID="grid" runat="server"></dx:ASPxGridView>
</div>
</form>
</body>
</html>
However I want to use a Devepress Aspxgridview. The Devexpress Site states they don't support SignalR. However since the Javascript function is triggered when data changes in the database, is it possible somehow to force the client to get the data from the server? Force a postback and/or call the FillGrid method? ( To create the grid from js is not possible since the AspxgridView Control is much more complicated).
SOURCE: https://www.youtube.com/watch?v=30m-7wpmbrc
Although SignalR is not supported out of the box, it should be possible to manually notify the server side about the update using the existing API. You can send a callback to the server using the ASPxClientGridView.PerformCallback method, and handle the server side ASPxGridView.CustomCallback event to reload data from the SQL server.
I have written the fallowing ashx code. for autocomplete textbox.
i want to transfer the values ContactId, ContactName from ashx to code behind in aspx file.
how can i do that
code for ashx file
<%# WebHandler Language="C#" Class="Search_CS" %>
using System;
using System.Web;
using System.Data.SqlClient;
using System.Configuration;
using System.Text;
public class Search_CS : IHttpHandler {
public void ProcessRequest (HttpContext context) {
string prefixText = context.Request.QueryString["q"];
using (SqlConnection conn = new SqlConnection())
{
conn.ConnectionString = ConfigurationManager
.ConnectionStrings["constr"].ConnectionString;
using (SqlCommand cmd = new SqlCommand())
{
cmd.CommandText = "select ContactId, ContactName from Customers where " +
"ContactName like #SearchText + '%'";
cmd.Parameters.AddWithValue("#SearchText", prefixText);
cmd.Connection = conn;
StringBuilder sb = new StringBuilder();
conn.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
sb.Append(sdr["ContactName"])
.Append(Environment.NewLine);
}
}
conn.Close();
context.Response.Write(sb.ToString());
}
}
}
public bool IsReusable {
get {
return false;
}
}
}
code for aspx file
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="css/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
<script src="scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="scripts/jquery.autocomplete.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#<%=txtSearch.ClientID%>").autocomplete('Search_CS.ashx');
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>
</div>
</form>
</body>
</html>
try this
in aspx page
<div>
<script type="text/javascript">
function get_look_suggs(key, cont) {
var script_name = 'Search_CS.ashx';
var params = { 'q': $("#<%=txtSearch.ClientID%>").val() }
$.get(script_name, params,
function (obj) {
// obj is just array of strings
var res = [];
for (var i = 0; i < obj.length; i++) {
res.push({ id: i, value: obj[i].Name });
}
// will build suggestions list
cont(res);
},
'json');
}
$(document).ready(function () {
$("#<%=txtSearch.ClientID%>").autocomplete({ ajax_get: get_look_suggs });
});
</script>
<asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>
</div>
in handler
using System.Collections.Generic;
using System.Configuration;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;
using System.Data.SqlClient;
using System;
using System.Data;
public class Search_CS : IHttpHandler
{
private readonly JavaScriptSerializer js = new JavaScriptSerializer();
public class names
{
public names(string p)
{
// TODO: Complete member initialization
this.Name = p;
}
public string Name { get; set; }
}
// Handle request based on method
public bool IsReusable { get { return false; } }
public void ProcessRequest(HttpContext context)
{
string prefixText = context.Request.QueryString["q"];
using (SqlConnection conn = new SqlConnection())
{
conn.ConnectionString = ConfigurationManager
.ConnectionStrings["constr"].ConnectionString;
using (SqlCommand cmd = new SqlCommand())
{
cmd.CommandText = "select ContactId, ContactName from Customers where " +
"ContactName like #SearchText + '%'";
cmd.Parameters.AddWithValue("#SearchText", prefixText);
cmd.Connection = conn;
conn.Open();
List<names> lstnew = new List<names>();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
lstnew.Add(new names(sdr["ContactName"].ToString()));
}
}
conn.Close();
string jsonObj = js.Serialize(lstnew);
context.Response.AddHeader("Content-Disposition", "inline; filename=\"files.json\"");
context.Response.Write(jsonObj);
context.Response.ContentType = "application/json";
}
}
}
}
Below is my .aspx page code
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="chat.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.6.4.js" type="text/javascript"></script>
<script src="Scripts/json2.js" type="text/javascript"></script>
<script src="Scripts/jquery.signalR-1.0.0-rc2.min.js" type="text/javascript"></script>
<script src="signalr/hubs" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var query = window.location.search;
var toRemove = '?id=';
var gorge = query.replace(toRemove, '');
// Proxy created on the fly
var hub = $.connection.chatHub;
$.connection.hub.qs = "Id=" + gorge;
// Start the connection
$.connection.hub.start(function () {
//chat.server.getAllOnlineStatus();
});
});
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div id="container" class="wrap">
<div id="chatbox" class="chatbox">
<ul id="frndcontact">
</ul>
</div>
</div>
</form>
</body>
</html>
Below is my Hub class
[HubName("chatHub2")]
public class Chat2 : Hub
{
private SqlConnection objconn;
string Connstr = #"Data Source=somevalue;Initial Catalog=somevalue;Integrated Security=True;";
public Task JoinGroup()
{
return Groups.Add(Context.ConnectionId, "foo");
}
public DataTable GetDataTable(string strQuery)
{
SqlCommand objcmd;
SqlDataAdapter objda;
DataTable ds = new DataTable();
try
{
objconn = new SqlConnection(Connstr);
objconn.Open();
objcmd = new SqlCommand(strQuery, objconn);
objda = new SqlDataAdapter(objcmd);
objda.Fill(ds);
return ds;
}
catch (SqlException ex)
{
throw ex.InnerException;
}
finally
{
objconn.Close();
objcmd = null;
objda = null;
}
}
public override Task OnConnected()
{
int id = Convert.ToInt32(Context.QueryString["id"]);
string sql = string.Format("exec getfriend '" + id + "' ");
System.Data.DataTable dtgetfriend = GetDataTable(sql);
}}
Now when I am debugging I am not able to get my breakpoint hit on OnConnected. Why am I not able to start with this piece of code?
Also I have added this code in global.asax
public void Application_Start()
{
RouteTable.Routes.MapHubs();
}
You're not subscribed to the hub. Prior to start you need to declare at least one client side function and you need to reference your hub by the correct name. So if you modify your JS to be:
$(document).ready(function () {
var query = window.location.search;
var toRemove = '?id=';
var gorge = query.replace(toRemove, '');
// Proxy created on the fly
var hub = $.connection.chatHub2;
$.connection.hub.qs = "Id=" + gorge;
hub.client.foo = function() {};
// Start the connection
$.connection.hub.start(function () {
//chat.server.getAllOnlineStatus();
});
});
You'll be in good shape.
I am trying to get a simple example of how to us the AutoComplete JQuery plug-in work but running into some issue. The code is written in C# (2008) without using MVC.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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">
<head runat="server">
<title></title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
//GetFormulary();
LoadAutoComplete();
});
function LoadAutoComplete() {
$("#quickSearchTextBox").autocomplete({
source: function(request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "/WebSite1/Default.aspx/GetTest2",
data: "{}",
dataType: "json",
success: function(data) {
response($.map(data, function(item) {
return {
label: item.TestName,
value: item.TestName
}
}));
}
});
},
minLength: 2
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="quickSearchTable" border="0">
<tbody>
<tr>
<td>
<input style="width: 100%" id="quickSearchTextBox" title="Enter search words" maxlength="200" value="" />
</td>
</tr>
</tbody>
</table>
<div id="searchResults" style="display: none;">
</div>
</div>
</form>
</body>
</html>
Code Behind:
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Web.Script.Serialization;
using System.Web.Services;
using System.Web.UI;
public partial class _Default : Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static string GetTest1()
{
return GetFTest2("art");
}
private static string GetFTest2(string searchPhrase)
{
var formularyTests = new List<FormularyTest>();
const string connectionString = "";
using (var sqlConnection = new SqlConnection(connectionString))
{
sqlConnection.Open();
var sqlCommand = new SqlCommand("Search", sqlConnection) { CommandType = CommandType.StoredProcedure };
sqlCommand.Parameters.Add(new SqlParameter("#Phrase", searchPhrase));
SqlDataReader sqlDataReader = sqlCommand.ExecuteReader();
while (sqlDataReader.Read())
{
formularyTests.Add(new FormularyTest { Name = sqlDataReader["LongName"].ToString() });
}
}
var jSearializer = new JavaScriptSerializer();
return jSearializer.Serialize(formularyTests);
}
[WebMethod]
public static List<FormularyTest> GetTest2()
{
return GetFTest1("arterial");
}
private static List<FormularyTest> GetFTest1(string searchPhrase)
{
var formularyTests = new List<FormularyTest>();
const string connectionString = "";
using (var sqlConnection = new SqlConnection(connectionString))
{
sqlConnection.Open();
var sqlCommand = new SqlCommand("Search", sqlConnection) { CommandType = CommandType.StoredProcedure };
sqlCommand.Parameters.Add(new SqlParameter("#Phrase", searchPhrase));
SqlDataReader sqlDataReader = sqlCommand.ExecuteReader();
while (sqlDataReader.Read())
{
formularyTests.Add(new FormularyTest { Name = sqlDataReader["LongName"].ToString() });
}
}
return formularyTests;
}
}
public class FormularyTest
{
public string Name { get; set; }
public string Url { get; set; }
}
For some reason I cannot get anything to show up in the textbox. A little help would be much appreciated.
The JavaScriptSerializer is returning a result in the format of:
{d:"[{\"Name\":\"Test 1\",\"Url\":\"url1\"},{\"Name\":\"Test 2\",\"Url\":\"url2\"}]"}
So, data.d would give you your serialized string [{"Name":"Test 1","Url":"url1"},{"Name":"Test 2","Url":"url2"}]. That woudl be closer to what you want, but you're really after a JSON array version of that string. If you use eval(data.d) instead of data in your success function, it will work. Admittedly, using eval is an imperfect solution, but it does allow your code to "work".
The following JavaScript has the change:
function LoadAutoComplete() {
$("#quickSearchTextBox").autocomplete({
source: function (request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "/Service.asmx/Test",
data: "{'searchTerm':'" + request.term + "'}",
dataType: "json",
async: true,
success: function (data) {
response($.map(eval(data.d), function (item) {
return {
label: item.Name,
value: item.Url
}
}));
},
error: function (result) {
alert("Error loading the data");
}
});
},
minLength: 2
});
I have implemented a simple code to bind data to jqgrid in asp.net, I initially had problem with sorting the grid but was able to overcome the same. Now my concern is I am not able to implement pagination in Jqgrid. It would be great if anybody can help me out with this. Here is my aspx code.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%# Import Namespace="System.Web.Script.Serialization" %>
<%# Import Namespace="System.Collections.Generic" %>
<%# Import Namespace="System.Web.Services" %>
<!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">
<head runat="server">
<title></title>
<link href="ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<%--<link href="jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" />--%>
<script src="grid.locale-en.js" type="text/javascript"></script>
<script src="jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="json2.js" type="text/javascript"></script>
<link href="jquery-ui-1.8.7.custom.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function() {
$('#submit').click(function() {
$('#list').jqGrid({
datatype: function(postdata) {
var params = new Object();
params.page = postdata.page;
params.pageSize = postdata.rows;
params.sortIndex = postdata.sidx;
params.sortDirection = postdata.sord;
$.ajax({
url: 'Default.aspx/GetData',
type: 'POST',
data: JSON.stringify(params),
// dataType: "json",
contentType: "application/json; charset=utf-8",
error: function(data, textStatus) {
alert('Error loading json');
},
success: function(data, st) {
if (st == 'success') {
var grid = $("#list");
var gridData = JSON.parse(data.d);
grid.clearGridData();
for (var i = 0; i < gridData.length; i++) {
grid.addRowData(i + 1, gridData[i]);
}
}
}
});
},
colNames: ['Product ID', 'Product Name', 'Product Number'],
colModel: [
{ name: 'ProductID', index: 'ProductID', sort: true, width: 80, align: 'center', sorttype: "int" },
{ name: 'Name', index: 'Name', width: 120, align: 'center' },
{ name: 'ProductNumber', index: 'ProductNumber', width: 120, align: 'center'}],
pager: $("#pager"),
height: 200,
width: 600,
rowNum: 20,
rowList: [10, 20, 30],
rownumWidth: 40,
sortorder: 'desc',
loadonce: true,
records: 20,
viewRecords: true
});
});
});
// }).navGrid('#pager', { search: true, edit: false, add: false, del: false, searchtext: "Search" });
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" EnablePageMethods="true" runat="server">
</asp:ScriptManager>
<input type="button" id="submit" value="Fetch" title="Fetch" />
<table id="list">
</table>
<div id="pager">
</div>
</form>
</body>
</html>
And this is my code behind page
using System;
using System.Data;
using System.Data.SqlClient;
using System.Web.Services;
using System.Collections.Generic;
using System.Text;
using System.Web.Script.Serialization;
using System.Web.Script.Services;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static string GetData(int page, int pageSize, string sortIndex, string sortDirection)
{
string connectionString = GetConnectionString();
string queryString = string.Empty;
if (sortIndex == "")
{
queryString = "SELECT top " + pageSize + " ProductID,Name,ProductNumber FROM [AdventureWorks].[Production].[Product]";
}
else
{
queryString = "SELECT top " + pageSize + " ProductID,Name,ProductNumber FROM [AdventureWorks].[Production].[Product] ORDER BY " + sortIndex + " " + sortDirection;
}
DataSet ds = new DataSet();
SqlConnection connection = new SqlConnection(connectionString);
connection.Open();
SqlCommand command = connection.CreateCommand();
command.CommandText = queryString;
SqlDataAdapter da = new SqlDataAdapter(queryString, connectionString);
da.Fill(ds, "product");
DataTable dt = ds.Tables["product"];
IList<Product> pd = new List<Product>();
connection.Close();
for (int i = 0; i < dt.Rows.Count; i++)
{
Product p = new Product();
p.ProductID = dt.Rows[i]["ProductID"].ToString();
p.Name = Convert.ToString(dt.Rows[i]["Name"]);
p.ProductNumber = Convert.ToString(dt.Rows[i]["ProductNumber"]);
pd.Add(p);
p = null;
}
JavaScriptSerializer jsonSerz = new JavaScriptSerializer();
string serializedData = jsonSerz.Serialize(pd);
pd = null;
return serializedData;
}
static private string GetConnectionString()
{
return "Data Source=INMDCD0109\\SQLEXPRESS;Initial Catalog=AdventureWorks;Integrated Security=SSPI";
}
}
public class Product
{
public string ProductID { get; set; }
public string Name { get; set; }
public string ProductNumber { get; set; }
}
Thanks in advance
I wrote you already in the previous my answer many suggestion how to improve your code. Because you don't write any comment to my previous answer I will be short now.
I you need implement pagination, it is enough to use statement like SELECT TOP 10 only for the first page from 10 rows. If you need to return for example the 6-th page you need skip 50 first rows and then get the next 10. If the data which you return contain the id (ProductID in your case) you can do this for example with the following statement using common table expression (CTE):
WITH Previous (ProductID,Name,ProductNumber) AS (
SELECT TOP 50 ProductID,Name,ProductNumber
FROM [AdventureWorks].[Production].[Product]
)
SELECT TOP 10 T.ProductID,T.Name,T.ProductNumber
FROM [AdventureWorks].[Production].[Product] AS T
LEFT OUTER JOIN Previous AS P ON T.ProductID=P.ProductID
WHERE P.ProductID IS NULL
If the returned data contain no id, then you can use ROW_NUMBER to implement pagination.
UPDATED: One more small remark. The usage of DataSet, DataTable and SqlDataAdapter in your example is not effective. The usage of command.ExecuteReader (SqlCommand::ExecuteReader) which returns SqlDataReader seems me better here.