SQL Server Table to JSON Object Array


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Configuration;
using System.Data;
using System.Diagnostics;
using System.Web.Script.Serialization;
using System.IO;
using System.Text;
using System.Web.Services;
using System.Text.RegularExpressions;
using System.Collections;

private static string databaseTableToJsonArrayObject()
{
string CONNECTIONSTRING_KEY_NAME = "Your_ConnectionStrings_Name_Attribute";
string TABLE_TO_CONNECT_TO = "Your_Tables_Name";
string SELECT = "DISTINCT *"; //string SELECT = "SELECT id"
string WHERE = ""; //string WHERE = "WHERE id = 1"
string ORDERBY = ""; //string ORDERBY = "ORDER BY id ASC|DESC"

DataTable dt = new DataTable();
using (SqlConnection conString = new SqlConnection(ConfigurationManager.ConnectionStrings[CONNECTIONSTRING_KEY_NAME].ConnectionString))
{

using (SqlCommand sqlCmd = new SqlCommand("SELECT " + SELECT + " FROM " + TABLE_TO_CONNECT_TO + WHERE + ORDERBY, conString))
{
conString.Open();
SqlDataAdapter da = new SqlDataAdapter(sqlCmd);
da.Fill(dt);
System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
Dictionary<string, object> row;
foreach (DataRow dr in dt.Rows)
{
row = new Dictionary<string, object>();

int columnCount = 0;
foreach (DataColumn col in dt.Columns)
{
row.Add(columnCount.ToString(), dr[col]);
columnCount++;
}
rows.Add(row);
}
conString.Close();
return serializer.Serialize(rows);

}
}

}

Advertisements

AXDS Plugin: JSON to styled jQuery Datatable

(by AXDS)

Useful for quick data visualisation. Converts a JSON object into a styled filterable/sortable table. Also uses Bootstrap and jQuery Datatable libraries.

Example: https://jsfiddle.net/kvndLfn8/

The plugin, once called on a target location, requires a table ID and an object of data in order to work.

HTML:

<div id="examplePlace"></div>

Script:

var tableId = "tableID";
var targetElement = "#examplePlace";
$(targetElement).Create_AXDS_Table({
"tableId": tableId,
"data": {
"tableColumnHeaders": tableColumnHeaders,
"tableContentsValues": tableContentsValues
},
"options": tableOptions
});
});

The data and objects are formatted as below:

The tableData is split into the header and the values to populate the rows. The id inside the headers is linked to the key of the values. For example: The column ‘fstName’ will be populated with any keys with ‘fstName’.


 var tableColumnHeaders = [{
"id": "fstName",
"text": "First Name"
}, {
"id": "lstName",
"text": "Last Name"
}, {
"id": "mobile",
"text": "Mobile Number"
}, {
"id": "dob",
"text": "Date of Birth"
}];

var tableContentsValues = [{
"fstName": "Wade",
"lstName": "Wilson",
"mobile": "07567 567 432",
"dob": "01/01/1985",
}, {
"fstName": "Peter",
"lstName": "Parker",
"mobile": "07594 567 890",
"dob": "01/01/1995",
}, {
"fstName": "Fred",
"lstName": "Flintstone",
"dob": "01/01/1965",
}, {
"fstName": "Tony",
"lstName": "Stark",
"mobile": "01345 987 234",
"dob": "01/01/1975",
}]

The tableOptions is for styling the table. This is pretty self explanatory.


var tableOptions = [{
"tableBordered": true,
"tableStriped": true,
"responsive": true,
"cellspacing": 0,
"noWrap": true,
"width": "100%",
"rowStyling": {
"fontStyle": "italic",
"color": "red"
},
"tableStyling": {
"textAlign": "center",
"color": "blue"
}
}];

This will produce a styled table with the given ID in the target location. This table and ID can be used with the jQuery Datatable library to produce a filterable/sortable table.

How to: ReactJS basics

(by AXDS)

ReactJS is a library developed at Facebook. It uses a concept called a Virtual DOM that renders nodes based on state changes. It performs mostly on the client side, but can be rendered server side.

The CDN links: https://facebook.github.io/react/downloads.html

ReactJS blank JSFiddle: https://jsfiddle.net/00d9dwzs/

The main idea around ReactJS is that is built around rendering components.

Firstly, we need to define a place in the HTML for the ReactJS application to render to. (You could also just use the HTML document or body)

<div id="container">

</div>

Components are defined using the 'createClass' method.

var App = React.createClass({

render: function() {
return (
<h1>Hello world!</h1>
)
}

});

Rendering out this components is pretty straight forward:

React.render(<App/>, document.getElementById('container'));

The above should render and display ‘Hello world!’ in the defined location.
components are custom classes, which can call and use other components.

Here’s a JSFiddle showing component rendering: https://jsfiddle.net/o0e73fqf/

In order to make this more useful we can introduce ‘props’. These are variables passes through components using attributes. For example, including 'attributeName="Hello"' This attributes are then available using '{this.props.attributeName}'

var App = React.createClass({

render: function() {
return (
<h1>Hello, {this.props.firstName} {this.props.lastName}!</h1>
)
}
});

React.render(<App firstName="John" lastName="Smith"/>, document.getElementById('container'));

Here’s a JSFiddle of the use of props:  https://jsfiddle.net/13jg12t9/

Another thing to know about ReactJS is it’s use of ‘state’. A component has state variables, these variables can be initialised straight away by setting them inside of the ‘getInitialState’ function. This can be available and read using '{this.state.stateVariable}' or, set using the 'this.setState' function.

var App = React.createClass({

getInitialState: function(){
return{
firstName: "John",
lastName: "Smith"
}
},


render: function() {
return (
<h1>Hello, {this.state.firstName} {this.state.lastName}!</h1>
);
}

});

React.render(<App />, document.getElementById('container'));

Here’s a JSFiddle of the use of state: https://jsfiddle.net/jrk9ycmn/

Components can be called and used inside of another component. This can be useful as you can set up a component that branches off to relevant other components that handle and return some HTML creation given their data attributes.

 

var peopleList =
[
{
firstName: "John",
lastName: "Smith"
},
{
firstName: "James",
lastName: "Bond"
}
];

var App = React.createClass({
render: function() {
return (
<div>
<Message message="Hello, world!"/>
<MakeListOfPeople data={this.props.data}/>
</div>
);
}
});

var Message = React.createClass({
render: function() {
return (
<div className="messageDiv">
<h1>{this.props.message}</h1>
</div>
);
}
});

var MakeListOfPeople = React.createClass({
render: function() {
var PeopleList = this.props.data.map(function(people) {
return (
	<li>{people.firstName} {people.lastName}< /li>
);
});
return (
<ul className="commentList">
{PeopleList}</ul>
);
}
});

React.render(<App data={peopleList}/>, document.getElementById('container'));

Here’s a JSFiddle of components inside components: https://jsfiddle.net/2m4vLL56/

Although there are a lot more component functions to know, it’s pretty much the basics of ReactJS.


 

Information/Tutorials Links:

 

Useful Examples:


 

Add a ‘Scroll to top of page’ Button

(by AXDS)

Thanks to: http://www.webtipblog.com/adding-scroll-top-button-website/


Example: https://jsfiddle.net/zgmnhLkL/

Checks for a scroll event past a threshold. Once triggered uses jQuery to toggle a class on the button. This class shows/hides the button using CSS. A click event is added to the button to scroll the window to a given element or id.

HTML:

<div style="height:3000px;border:1px solid black;">
<!-- Mimics the site content -->
</div>
<div class="scroll-top-wrapper ">
<span class="scroll-top-inner">
<i class="fa fa-2x fa-arrow-circle-up"></i>
</span>
</div>

JavaScript (jQuery):


$(function() {
$(document).on('scroll', function() {
if ($(window).scrollTop() > 100) {
$('.scroll-top-wrapper').addClass('show');
} else {
$('.scroll-top-wrapper').removeClass('show');
}
});
$('.scroll-top-wrapper').on('click', scrollToTop);
});

function scrollToTop() {
verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
element = $('body');
offset = element.offset();
offsetTop = offset.top;
$('html, body').animate({
scrollTop: offsetTop
}, 500, 'linear');
}

CSS:


.scroll-top-wrapper {
position: fixed;
opacity: 0;
visibility: hidden;
overflow: hidden;
text-align: center;
z-index: 99999999;
background-color: #777777;
color: #eeeeee;
width: 50px;
height: 48px;
line-height: 48px;
right: 30px;
bottom: 30px;
padding-top: 2px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.scroll-top-wrapper:hover {
background-color: #888888;
}

.scroll-top-wrapper.show {
visibility: visible;
cursor: pointer;
opacity: 1.0;
}

.scroll-top-wrapper i.fa {
line-height: inherit;
}