Source:  Twitter logo

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>
);
}
}
2 users liked answer #0dislike answer #02
Charles Owen profile pic
Charles Owen

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.

1 users liked answer #1dislike answer #11
Charles Owen profile pic
Charles Owen
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>       
); 
}   
}
0 users liked answer #2dislike answer #20
Charles Owen profile pic
Charles Owen

I created my services on Node.js and then I run my services with a specific IP Address and I used this IP address in my application to get data from Database using webservices of Node.js.

0 users liked answer #3dislike answer #30

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).