I am trying to connect my ASP.NET web services with React-Native app. I am using SQL Server with ASP.NET web services now want to connect react-native app with my ASP.NET - any solution for this?
Now I am stuck and searched a lot but I have not yet found any solution.
Here's the web service part. Let's say I'm just returning a corporate leader to the client. I can either create a Web API controller or an MVC controller that returns a JsonResult. leader here is merely a Leader c# object. I've chosen the latter. The key here is that we're returning JSON data back to the client in the form of a JSON object.
[HttpGet]
public JsonResult Leader() {
return Json(leader, JsonRequestBehavior.AllowGet);
}
Let's assume the endpoint of this service will be: http://www.example.com/Leader. Now my React Native app is going to need to reference this url There are various apis for retrieving data from a web service, but I like using Fetch or you could use Axios, etc. My example below will be using Fetch. For the most basic React Native app, we'd just using the componentDidMount() event to run the Fetch request, and put leader in a state object. Note: This is an oversimplified answer and I haven't tested it out.
import React, {Component} from 'react';
import { Text, Card } from 'react-native';
export default class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {
leader = {},
errMessage = ''
}
}
componentDidMount() {
fetch(url)
.then(response => {
if (response.ok) {
return response;
} else {
let error = new Error('Error ' + response.status + ': ' + response.statusText);
error.response = response;
throw error;
}
},
error => {
let errmess = new Error(error.message);
throw errmess;
})
.then(response => response.json())
.then(leaders => {
this.setState({ leader: leader });
})
.catch(error => {
this.setState({ errMessage: error.message });
});
}
render () {
const {lastName, firstName} = this.state.leader;
return (
<Card
title="Our beloved leader">
<Text>`${firstName} ${lastName}/></Text>
</Card>
);
}
}
Your web service needs to return data in JSON format. You know which urls are defined for which actions.
Let's say you have an endpoint like: http://mywebservice.com/GetEmployees.
In your React app, you're going to run XMLHttpRequest or Fetch using those web service urls, such as http://mywebservice.com/GetEmployees. You will process the returned JSON in your React App and display it with something like the JavaScript map function.
As the others have mentioned, your web service is going to be talking to SQL Server. Your React Native app will not be dealing directly the SQL Server.
class EwdsUserBox extends React.Component {
constructor(props) {
super(props);
this.state = {
data: []
};
}
loadCommentsFromServer(page=0, count=25) {
const xhr = new XMLHttpRequest();
let params = "?page="+page+"&count=" + count;
xhr.open('get', this.props.url, true);
xhr.onload = function() {
var data = JSON.parse(xhr.responseText);
this.setState({ data: data});
}.bind(this);
xhr.send();
}
componentDidMount() {
this.loadCommentsFromServer(0,25);
}
render() {
const ewds = this.state.data;
var count = 0;
return (
<div className="ewdsUserBox body-content">
<EwdsUserSummary total={ewds.length} disabled={count} locked={0}/>
<EwdsUserTable data={ewds} />
</div>
);
}
}
This is for ReactJS but you'll notice I'm using an XMLHttpRequest to retrieve the JSON data. EwdsUserBox is just my container component. I'll then pass this data to subcomponents, in this case a user table and user row.
const EwdsUserTable = (props) => {
let counter = 0;
let ewdsData = props.data;
if (ewdsData) {
var ewdsUserRows = ewdsData.map(function (ewdsUser) {
return (
<EwdsUserRow ewdsUser={ewdsUser} key={counter++} />
);
});
}
return (
<div className="ewdsUserTable" >
<table id="mytable" className="table table-striped table-bordered table-condensed fixed">
<caption>EWDS Users</caption>
<thead>
<tr>
<th className="sort" type="string">User Name</th>
<th className="sort" type="string">Email Address</th>
<th>Pwd Changed</th>
<th type="date">Last Logon</th>
<th>Locked</th>
<th className="sort" type="string">Disabled</th>
<th></th>
</tr>
</thead>
<tbody>
{ewdsUserRows}
</tbody>
</table>
</div>
);
};
Here's where I'm actually displaying the data.
class EwdsUserRow extends React.Component {
render() {
const {UserName, EmailAddress, AccountCreated, PasswordChanged, AccountName,
Locked, Enabled} = this.props.ewdsUser;
return (
<tr>
<td>{UserName}</td>
<td>{EmailAddress}</td>
<td>{AccountCreated}</td>
<td>{PasswordChanged}</td>
<td>{Locked}</td>
<td>{Enabled}</td>
</tr>
);
}
}