Question

我正在尝试将ASP.NET Web服务与React-Native应用程序连接。我现在将SQL Server与ASP.NET Web服务一起使用，现在希望将react-native应用程序与我的ASP.NET连接-为此有任何解决方案？

现在，我陷入困境并进行了很多搜索，但是我还没有找到任何解决方案。

Answer 1

您的Web服务需要以JSON格式返回数据。您知道为哪些操作定义了哪些URL。

假设您有一个端点，例如：http://mywebservice.com/GetEmployees。

在您的React应用程序中，您将使用这些Web服务URL（例如http://mywebservice.com/GetEmployees）运行XMLHttpRequest或Fetch。您将在React App中处理返回的JSON，并使用JavaScript映射函数之类的内容进行显示。

正如其他人提到的那样，您的Web服务将与SQL Server进行通信。您的React Native应用程序将不会直接处理SQL Server。

Answer 2

login(@Param('userName') userName: string, @Param('password') password: string)

这是针对ReactJS的，但是您会注意到我正在使用XMLHttpRequest来检索JSON数据。 EwdsUserBox只是我的容器组件。然后，我会将这些数据传递给子组件，在这种情况下是用户表和用户行。

Post

};

这是我实际显示数据的地方。

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>          
    );  

}
}

Answer 3

这是Web服务部分。假设我只是将公司负责人返回给客户。我可以创建一个Web API控制器或一个返回JsonResult的MVC控制器。 Leader在这里仅仅是一个Leader c＃对象。我选择了后者。关键是我们要以JSON对象的形式将JSON数据返回给客户端。

    [HttpGet]
    public JsonResult Leader() {
        return Json(leader, JsonRequestBehavior.AllowGet);
    }

我们假设此服务的端点为：http://www.example.com/Leader。现在，我的React Native应用程序将需要引用该URL。有各种API可以从Web服务检索数据，但是我喜欢使用Fetch或可以使用Axios等。下面的示例将使用Fetch。对于最基本的React Native应用程序，我们只需要使用componentDidMount（）事件来运行Fetch请求，并将leader置于状态对象中。注意：这是一个过于简化的答案，我尚未对其进行测试。

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>
);
}
}

Answer 4

我在Node.js上创建了我的服务，然后使用特定的IP地址运行我的服务，然后在我的应用程序中使用该IP地址使用Node.js的Web服务从数据库获取数据。

如何使用SQL Server将本地应用程序与ASP.NET Web服务连接？

4 个答案: