SqlDataReader rdr = cmd.ExecuteReader(); \r\n data = \"[\"; \r\n while (rdr.Read()) \r\n { \r\n if (data.Length > 1) data += \",\\n\"; \r\n data += \"{\"; \r\n data += String.Format(\"FirstName:'{0}', LastName:'{1}', Email:'{2}', id:'{3}'\", rdr[\"first_name\"], rdr[\"last_name\"], rdr[\"email\"], rdr[\"id\"]); \r\n data += \"}\"; \r\n } \r\n data += \"]\"; \r\n<\/code><\/pre>\nThis is a pretty common way to render dynamic data… I create an ASPX form page with absolutely no content. No tags at all. All that remains is the Page tag that links the code behind. I do this for images, PDF, CSV files and more. The code behind is what does the grunt work. It creates the output and pushes it through the response object. Effectively we cancel the default headers and create new headers telling the browser that we are now a different file type. In this case a plain\/text file. The browser will see this as a JavaScript file based on our HTML implementation later in this blog.<\/p>\n
public partial class TableData : System.Web.UI.Page \r\n { \r\n protected void Page_Load(object sender, EventArgs e) \r\n { \r\n String data = U_University.Lib.User.GetAllUsersData(); \r\n String script = @\" \r\n var app = angular.module('users', ['ngTable']). \r\n controller('UsersController', function ($scope, $filter, NgTableParams) { \r\n data=\" + data + @\"; \r\n $scope.tableParams = new NgTableParams({ \r\n page: 1, \/\/ show first page \r\n count: 10, \/\/ count per page \r\n sorting: { \r\n name: 'asc' \/\/ initial sorting \r\n } \r\n }, { \r\n total: data.length, \/\/ length of data \r\n getData: function($defer, params) { \r\n \/\/ use build-in angular filter \r\n var orderedData = params.sorting() ? \r\n $filter('orderBy')(data, params.orderBy()) : \r\n data; \r\n $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count())); \r\n } \r\n }); \r\n })\"; \r\n Response.ClearHeaders(); \r\n Response.ClearContent(); \r\n Response.ContentType = \"text\/plain\"; \r\n Response.Output.Write(script); \r\n } \r\n } \r\n<\/code><\/pre>\nIn the header of my HTML file, I establish my includes. All of the “.js” can easily be found with a Google search. You need the angular.js, ng-table.js and the ng-table.css files for this example. The key to my controller and its data is within the following tag:<\/p>\n
<script src=”TableData.aspx” type=”text\/javascript”><\/script><\/p>\n
This tag is referencing my empty page the hijacks the response object and outputs my controller containing my dynamic data.<\/p>\n
<script src=\"\/js\/angular.js\" type=\"text\/javascript\"><\/script> \r\n <script src=\"\/js\/angular-sanitize.js\" type=\"text\/javascript\"><\/script> \r\n <script src=\"\/js\/ng-table.js\" type=\"text\/javascript\"><\/script> \r\n <script src=\"TableData.aspx\" type=\"text\/javascript\"><\/script> \r\n <link href=\"\/css\/ng-table.css\" rel=\"stylesheet\" type=\"text\/css\" \/> \r\n<\/code><\/pre>\nNow to setup my table. I am using the ng-table.js library. This allows me to create a sortable and pageable table fairly easily. There is really nothing too fancy, just some additional attributes (data-title, sortable). Everything else in the table is standard HTML\/AngularJS.<\/p>\n
<div ng-app=\"users\" ng-controller=\"UsersController\"> \r\n <div class=\"text-center\"><h1>User Manager<\/h1><\/div> \r\n <form id=\"frmMain\" runat=\"server\"> \r\n <div class=\"text-right\"><asp:LinkButton runat=\"server\" ID=\"lnkNew\">New User<\/asp:LinkButton><\/div> \r\n <table ng-table=\"tableParams\" class=\"table\"> \r\n <tr ng-repeat=\"user in $data\"> \r\n <td data-title=\"'First Name'\" sortable=\"'FirstName'\"><a href=\"AddEdit.aspx?id={{user.id}}\">{{user.FirstName}}<\/a><\/td> \r\n <td data-title=\"'Last Name'\" sortable=\"'LastName'\">{{user.LastName}}<\/td> \r\n <td data-title=\"'Email'\" sortable=\"'Email'\">{{user.Email}}<\/td> \r\n <\/tr> \r\n <\/table> \r\n <\/form> \r\n <\/div> \r\n<\/code><\/pre>\nVOILA! We now have a sortable, pageable table – and it looks pretty as well!<\/p>\n
![\"sortableTable\"](\"http:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2015\/03\/sortableTable.png\")
\n<\/div>\n","protected":false},"excerpt":{"rendered":"