Initial state

samples/react/ReactGrid/.gitignore

@@ -0,0 +1,5 @@
+/node_modules/
+project.lock.json
+/wwwroot/bundle.*
+/wwwroot/*.svg
+/wwwroot/*.css

samples/react/ReactGrid/Controllers/HomeController.cs

@@ -0,0 +1,24 @@
+using System.Threading.Tasks;
+using Microsoft.AspNet.Mvc;
+using Microsoft.AspNet.NodeServices.React;
+
+namespace ReactExample.Controllers
+{
+    public class HomeController : Controller
+    {
+        public async Task<IActionResult> Index(int pageIndex)
+        {
+            ViewData["ReactOutput"] = await ReactRenderer.RenderToString(
+                moduleName: "ReactApp/components/ReactApp.jsx",
+                exportName: "ReactApp",
+                baseUrl: Request.Path
+            );
+            return View();
+        }
+
+        public IActionResult Error()
+        {
+            return View("~/Views/Shared/Error.cshtml");
+        }
+    }
+}

samples/react/ReactGrid/README.txt

@@ -0,0 +1,2 @@
+Portions of this sample application (particularly, the fake data) are based
+on https://github.com/DavidWells/isomorphic-react-example

samples/react/ReactGrid/ReactApp/boot-client.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import createBrowserHistory from 'history/lib/createBrowserHistory';
+import { ReactApp } from './components/ReactApp.jsx';
+
+// In the browser, we render into a DOM node and hook up to the browser's history APIs
+var history = createBrowserHistory();
+ReactDOM.render(<ReactApp history={ history } />, document.getElementById('react-app'));

samples/react/ReactGrid/ReactApp/components/CustomPager.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Link } from 'react-router';
+
+export class CustomPager extends React.Component {
+    pageChange(event) {
+        this.props.setPage(parseInt(event.target.getAttribute("data-value")));
+    }
+    
+    render() {
+        var previous = "";
+        var next = "";
+
+        if(this.props.currentPage > 0){
+            previous = <div className="btn btn-default"><Link className="previous" to={'/' + (this.props.currentPage)}><i className="glyphicon glyphicon-arrow-left"></i>{this.props.previousText}</Link></div>;
+        }
+
+        if(this.props.currentPage != (this.props.maxPage -1)){
+            next = <div className="btn btn-default"><Link className="next" to={'/' + (this.props.currentPage + 2)}><i className="glyphicon glyphicon-arrow-right"></i>{this.props.nextText}</Link></div>;
+        }
+
+        var options = [];
+
+      var startIndex = Math.max(this.props.currentPage - 5, 0);
+      var endIndex = Math.min(startIndex + 11, this.props.maxPage);
+
+      if (this.props.maxPage >= 11 && (endIndex - startIndex) <= 10) {
+        startIndex = endIndex - 11;
+      }
+
+        for(var i = startIndex; i < endIndex ; i++){
+            var selected = this.props.currentPage == i ? "btn-default" : "";
+            options.push(<div key={i} className={"btn " + selected}><Link to={'/' + (i+1)}>{i+1}</Link></div>);
+        }
+
+        return (
+            <div className="btn-group">
+                {previous}
+                {options}
+                {next}
+            </div>
+        );
+    }
+}
+
+CustomPager.defaultProps = {
+    maxPage: 0,
+    nextText: '',
+    previousText: '',
+    currentPage: 0
+};

samples/react/ReactGrid/ReactApp/components/PeopleGrid.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import Griddle from 'griddle-react';
+import { CustomPager } from './CustomPager.jsx';
+import { fakeData } from '../data/fakeData.js';
+import { columnMeta } from '../data/columnMeta.js';
+const resultsPerPage = 10;
+
+export class PeopleGrid extends React.Component {
+    render() {
+        var pageIndex = this.props.params ? (this.props.params.pageIndex || 1) - 1 : 0;
+        return (
+            <div>
+                <h1>People</h1>
+                <div id="table-area">
+                    <Griddle results={fakeData}
+                        columnMetadata={columnMeta}
+                        resultsPerPage={resultsPerPage}
+                        tableClassName="table"
+                        useCustomPagerComponent="true"
+                        customPagerComponent={CustomPager}
+                        externalCurrentPage={pageIndex} />
+                </div>
+            </div>
+        );
+    }
+}

samples/react/ReactGrid/ReactApp/components/ReactApp.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Router, Route } from 'react-router';
+import { PeopleGrid } from './PeopleGrid.jsx';
+
+export class ReactApp extends React.Component {
+    render() {
+        return (
+            <Router history={this.props.history}>
+                <Route path="/" component={PeopleGrid} />
+                <Route path="/:pageIndex" component={PeopleGrid} />
+            </Router>
+        );
+    }
+}

samples/react/ReactGrid/ReactApp/data/columnMeta.js

@@ -0,0 +1,47 @@
+var columnMeta = [
+  {
+    "columnName": "id",
+    "order": 1,
+    "locked": false,
+    "visible": true
+  },
+  {
+    "columnName": "name",
+    "order": 2,
+    "locked": false,
+    "visible": true
+  },
+  {
+    "columnName": "city",
+    "order": 3,
+    "locked": false,
+    "visible": true
+  },
+  {
+    "columnName": "state",
+    "order": 4,
+    "locked": false,
+    "visible": true
+  },
+  {
+    "columnName": "country",
+    "order": 5,
+    "locked": false,
+    "visible": true
+  },
+  {
+    "columnName": "company",
+    "order": 6,
+    "locked": false,
+    "visible": true
+  },
+  {
+    "columnName": "favoriteNumber",
+    "order":  7,
+    "locked": false,
+    "visible": true
+  }
+];
+
+export var columnMeta;
+

samples/react/ReactGrid/Startup.cs

@@ -0,0 +1,68 @@
+using Microsoft.AspNet.Builder;
+using Microsoft.AspNet.Hosting;
+using Microsoft.Dnx.Runtime;
+using Microsoft.Framework.Configuration;
+using Microsoft.Framework.DependencyInjection;
+using Microsoft.Framework.Logging;
+
+namespace ReactExample
+{
+    public class Startup
+    {
+        public Startup(IHostingEnvironment env, IApplicationEnvironment appEnv)
+        {
+            // Setup configuration sources.
+            var builder = new ConfigurationBuilder()
+                .SetBasePath(appEnv.ApplicationBasePath)
+                .AddJsonFile("appsettings.json")
+                .AddEnvironmentVariables();
+            Configuration = builder.Build();
+        }
+
+        public IConfigurationRoot Configuration { get; set; }
+
+        // This method gets called by the runtime.
+        public void ConfigureServices(IServiceCollection services)
+        {
+            // Add MVC services to the services container.
+            services.AddMvc();
+        }
+
+        // Configure is called after ConfigureServices is called.
+        public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
+        {
+            loggerFactory.MinimumLevel = LogLevel.Information;
+            loggerFactory.AddConsole();
+            loggerFactory.AddDebug();
+
+            // Configure the HTTP request pipeline.
+
+            // Add the platform handler to the request pipeline.
+            app.UseIISPlatformHandler();
+
+            // Add the following to the request pipeline only in development environment.
+            if (env.IsDevelopment())
+            {
+                app.UseDeveloperExceptionPage();
+            }
+            else
+            {
+                // Add Error handling middleware which catches all application specific errors and
+                // send the request to the following path or controller action.
+                app.UseExceptionHandler("/Home/Error");
+            }
+
+            // Add static files to the request pipeline.
+            app.UseStaticFiles();
+
+            // Add MVC to the request pipeline.
+            app.UseMvc(routes =>
+            {
+                routes.MapRoute(
+                    name: "default",
+                    template: "{pageIndex?}",
+                    defaults: new { controller="Home", action = "Index" });
+            });
+        }
+    }
+}

samples/react/ReactGrid/Views/Home/Index.cshtml

@@ -0,0 +1,5 @@
+<div id="react-app">@Html.Raw(ViewData["ReactOutput"])</div>
+
+@section scripts {
+    <script src="bundle.js"></script>
+}

samples/react/ReactGrid/Views/Shared/Error.cshtml

@@ -0,0 +1,6 @@
+@{
+    ViewData["Title"] = "Error";
+}
+
+<h1 class="text-danger">Error.</h1>
+<h2 class="text-danger">An error occurred while processing your request.</h2>

samples/react/ReactGrid/Views/Shared/_Layout.cshtml

@@ -0,0 +1,12 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <title>ReactExample</title>
+        <link rel="stylesheet" href="/main.css" />
+    </head>
+    <body>
+        @RenderBody()
+        @RenderSection("scripts", required: false)
+    </body>
+</html>

samples/react/ReactGrid/Views/_ViewImports.cshtml

@@ -0,0 +1,2 @@
+@using ReactExample
+@addTagHelper "*, Microsoft.AspNet.Mvc.TagHelpers"

samples/react/ReactGrid/Views/_ViewStart.cshtml

@@ -0,0 +1,3 @@
+@{
+    Layout = "_Layout";
+}

samples/react/ReactGrid/appsettings.json

@@ -0,0 +1 @@
+{}

samples/react/ReactGrid/jsconfig.json

@@ -0,0 +1,6 @@
+{
+    "compilerOptions": {
+        "target": "ES6",
+        "module": "commonjs"
+    }
+}

samples/react/ReactGrid/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "ReactExample",
+  "version": "0.0.0",
+  "dependencies": {
+    "babel-core": "^5.8.29",
+    "body-parser": "^1.14.1",
+    "bootstrap": "^3.3.5",
+    "express": "^4.13.3",
+    "griddle-react": "^0.2.14",
+    "history": "^1.12.6",
+    "react": "^0.14.0",
+    "react-dom": "^0.14.0",
+    "react-router": "^1.0.0-rc3",
+    "underscore": "^1.8.3"
+  },
+  "devDependencies": {
+    "babel-loader": "^5.3.2",
+    "css-loader": "^0.21.0",
+    "extract-text-webpack-plugin": "^0.8.2",
+    "file-loader": "^0.8.4",
+    "style-loader": "^0.13.0",
+    "url-loader": "^0.5.6",
+    "webpack": "^1.12.2"
+  }
+}

samples/react/ReactGrid/project.json

@@ -0,0 +1,45 @@
+{
+  "webroot": "wwwroot",
+  "version": "1.0.0-*",
+  "tooling": {
+    "defaultNamespace": "ReactExample"
+  },
+  "dependencies": {
+    "Microsoft.AspNet.Diagnostics": "1.0.0-beta8",
+    "Microsoft.AspNet.IISPlatformHandler": "1.0.0-beta8",
+    "Microsoft.AspNet.Mvc": "6.0.0-beta8",
+    "Microsoft.AspNet.Mvc.TagHelpers": "6.0.0-beta8",
+    "Microsoft.AspNet.Server.Kestrel": "1.0.0-beta8",
+    "Microsoft.AspNet.StaticFiles": "1.0.0-beta8",
+    "Microsoft.AspNet.Tooling.Razor": "1.0.0-beta8",
+    "Microsoft.Framework.Configuration.Json": "1.0.0-beta8",
+    "Microsoft.Framework.Logging": "1.0.0-beta8",
+    "Microsoft.Framework.Logging.Console": "1.0.0-beta8",
+    "Microsoft.Framework.Logging.Debug": "1.0.0-beta8",
+    "Microsoft.AspNet.NodeServices.React": "1.0.0-alpha1"
+  },
+  "commands": {
+    "web": "Microsoft.AspNet.Server.Kestrel"
+  },
+  "frameworks": {
+    "dnx451": {},
+    "dnxcore50": {}
+  },
+  "exclude": [
+    "wwwroot",
+    "node_modules",
+    "bower_components"
+  ],
+  "publishExclude": [
+    "node_modules",
+    "bower_components",
+    "**.xproj",
+    "**.user",
+    "**.vspscc"
+  ],
+  "scripts": {
+    "prepublish": [
+      "npm install"
+    ]
+  }
+}

samples/react/ReactGrid/webpack.config.js

@@ -0,0 +1,19 @@
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
+
+module.exports = {
+    entry: './ReactApp/boot-client.jsx',
+    output: {
+        path: './wwwroot',
+        filename: 'bundle.js'
+    },
+    module: {
+        loaders: [
+            { test: /\.jsx?$/, loader: 'babel-loader' },
+            { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader') },
+            { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
+        ]
+    },
+    plugins: [
+        new ExtractTextPlugin('main.css')
+    ]
+};

samples/react/ReactGrid/wwwroot/web.config

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<configuration>
+  <system.webServer>
+    <handlers>
+      <add name="httpPlatformHandler" path="*" verb="*" modules="httpPlatformHandler" resourceType="Unspecified"/>
+    </handlers>
+    <httpPlatform processPath="%DNX_PATH%" arguments="%DNX_ARGS%" stdoutLogEnabled="false"/>
+  </system.webServer>
+</configuration>