Add example of server and client validation for React

Author: SteveSandersonMS

samples/react/ReactGrid/Controllers/PeopleApiController.cs

@@ -0,0 +1,30 @@
+using System.ComponentModel.DataAnnotations;
+using System.Threading.Tasks;
+using Microsoft.AspNet.Mvc;
+
+namespace ReactExample.Controllers
+{
+    public class PeopleApiController : Controller
+    {
+        [HttpPut("api/people/{personId:int}")]
+        public async Task<ActionResult> UpdatePerson([FromBody] PersonDto person)
+        {
+            if (!ModelState.IsValid) {
+                return HttpBadRequest(ModelState);
+            } else {
+                return new HttpOkResult();
+            }
+        }
+    }
+    
+    public class PersonDto {
+        public string name { get; set; }
+        public string city { get; set; }
+        public string state { get; set; }
+        public string country { get; set; }
+        public string company { get; set; }
+        
+        [Range(1, 10)]
+        public int favoriteNumber { get; set; }
+    }
+}

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

@@ -2,7 +2,7 @@ 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';
+import { columnMeta } from '../data/columnMeta.jsx';
 const resultsPerPage = 10;
 
 export class PeopleGrid extends React.Component {
@@ -13,6 +13,7 @@ export class PeopleGrid extends React.Component {
                 <h1>People</h1>
                 <div id="table-area">
                     <Griddle results={fakeData}
+                        columns={columnMeta.map(x => x.columnName)}
                         columnMetadata={columnMeta}
                         resultsPerPage={resultsPerPage}
                         tableClassName="table"

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

@@ -0,0 +1,57 @@
+import React from 'react';
+import Formsy from 'formsy-react';
+import { Input } from 'formsy-react-components';
+import { fakeData } from '../data/fakeData.js';
+
+export class PersonEditor extends React.Component {
+    constructor() {
+        super();
+        this.state = { savedChanges: false };
+    }
+    
+    onChange() {
+        this.setState({ savedChanges: false });
+    }
+    
+    submit(model, reset, setErrors) {
+        PersonEditor.sendJson('put', `/api/people/${ this.props.params.personId }`, model).then(response => {
+            if (response.ok) {
+                this.setState({ savedChanges: true });
+            } else {
+                // Parse server-side validation errors from the response and display them
+                response.json().then(setErrors);
+            }
+        });
+    }
+    
+    render() {
+        var personId = parseInt(this.props.params.personId);
+        var person = fakeData.filter(p => p.id === personId)[0];
+        var notificationBox = this.state.savedChanges
+            && <div className="alert alert-success"><b>Done!</b> Your changes were saved.</div>;
+
+        return <div className='row'>
+            <div className='page-header'>
+                <h1>Edit { person.name }</h1>
+            </div>
+            <Formsy.Form ref='form' className='form-horizontal' onChange={ this.onChange.bind(this) } onValidSubmit={ this.submit.bind(this) }>
+                <Input name='name' label='Name' value={ person.name } required />
+                <Input name='city' label='City' value={ person.city } required />
+                <Input name='state' label='State' value={ person.state } required />
+                <Input name='country' label='Country' value={ person.country } required />
+                <Input name='company' label='Company' value={ person.company } required />
+                <Input name='favoriteNumber' label='Favorite Number' value={ person.favoriteNumber } required validations="isInt" validationError="Must be a number" />
+                { notificationBox }
+                <button type='submit' className='btn btn-primary'>Save</button>
+            </Formsy.Form>
+        </div>;
+    }
+    
+    static sendJson(method, url, object) {
+        return fetch(url, {
+            method: method,
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(object) 
+        });
+    }
+}

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

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

samples/react/ReactGrid/ReactApp/data/columnMeta.js renamed to samples/react/ReactGrid/ReactApp/data/columnMeta.jsx

@@ -1,3 +1,12 @@
+import React from 'react';
+import { Link } from 'react-router';
+
+class RowActionsComponent extends React.Component {
+    render() {
+        return <Link to={'/edit/' + this.props.rowData.id}>Edit</Link>;
+    }
+}
+
 var columnMeta = [
   {
     "columnName": "id",
@@ -40,6 +49,13 @@ var columnMeta = [
     "order":  7,
     "locked": false,
     "visible": true
+  },
+  {
+    "columnName": "actions",
+    "order":  8,
+    "locked": true,
+    "visible": true,
+    "customComponent": RowActionsComponent
   }
 ];
 

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

@@ -1,5 +1,5 @@
 <div id="react-app" asp-react-prerender-module="ReactApp/components/ReactApp.jsx"></div>
 
 @section scripts {
-    <script src="bundle.js"></script>
+    <script src="/bundle.js"></script>
 }

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

@@ -6,7 +6,9 @@
         <link rel="stylesheet" href="/main.css" />
     </head>
     <body>
-        @RenderBody()
+        <div class="container">
+            @RenderBody()
+        </div>
         @RenderSection("scripts", required: false)
     </body>
 </html>

samples/react/ReactGrid/package.json

@@ -4,6 +4,8 @@
   "dependencies": {
     "babel-core": "^5.8.29",
     "bootstrap": "^3.3.5",
+    "formsy-react": "^0.17.0",
+    "formsy-react-components": "^0.6.3",
     "griddle-react": "^0.2.14",
     "history": "^1.12.6",
     "react": "^0.14.0",