0
私はReactを初めて使用しています。私は単純な "従業員の詳細"アプリケーションを実装しようとしています。データベースからデータを取得してテーブル形式で表示することができました。しかし、私はフォームからデータベースにデータを投稿できません。あなたがフォームからコントローラにデータを投稿するための詳細なjsxコードを提供できる人がいれば、非常に役に立ちます。また、データをデータベースに保存するためのコントローラー側コード。以下の私のコードを見つけてください。フォームデータをreactjsのASP.NET Web APIコントローラに投稿する方法
これは私のモデル（使用されるエンティティ・フレームワーク）である：
public partial class EmployeeTable
{
public int EmployeeID { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string Gender { get; set; }
public string Designation { get; set; }
public long Salary { get; set; }
public string City { get; set; }
public string Country { get; set; }
}
コントローラー：データベースからのデータを表示するため
namespace ReactModelApp.Controllers
{
[RoutePrefix("api/Employee")]
public class EmployeeController : ApiController
{
EmployeeEntities db = new EmployeeEntities();
[Route("GetEmployeeList")]
public IQueryable<EmployeeTable> GetEmployeeList()
{
return db.EmployeeTables.AsQueryable();
}
[Route("InputEmployee")]
public HttpResponseMessage InputEmployee([FromBody]EmployeeTable Employee)
{
try
{
using (EmployeeEntities entities = new EmployeeEntities())
{
entities.EmployeeTables.Add(Employee);
entities.SaveChanges();
var message = Request.CreateResponse(HttpStatusCode.Created, Employee);
message.Headers.Location = new Uri(Request.RequestUri + Employee.EmployeeID.ToString());
return message;
}
}
catch (Exception ex)
{
return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ex);
}
}
}
}
React.jsxコード：
var EmployeeRow = React.createClass({
render: function() {
return(
<tr>
<td>{this.props.item.EmployeeID}</td>
<td>{this.props.item.FirstName}</td>
<td>{this.props.item.LastName}</td>
<td>{this.props.item.Gender}</td>
<td>{this.props.item.Designation}</td>
<td>{this.props.item.Salary}</td>
<td>{this.props.item.City}</td>
<td>{this.props.item.Country}</td>
</tr>
);
}
});
var EmployeeTable = React.createClass({
getInitialState: function(){
return{
result:[]
}
},
componentWillMount: function(){
var xhr = new XMLHttpRequest();
xhr.open('get', this.props.url, true);
xhr.onload = function() {
var response = JSON.parse(xhr.responseText);
this.setState({ result: response });
}.bind(this);
xhr.send();
},
render: function(){
var rows = [];
this.state.result.forEach(function (item) {
rows.push(<EmployeeRow key={item.EmployeeID} item={item} />);
});
return (<table className="table">
<thead>
<tr>
<th>EmployeeID</th>
<th>FirstName</th>
<th>LastName</th>
<th>Gender</th>
<th>Designation</th>
<th>Salary</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
{rows}
</tbody>
</table>);
}
});
ReactDOM.render(<EmployeeTable url="api/Employee/GetEmployeeList" />,
document.getElementById('grid'))
フォームJSXを反応させますコード：
var InputValues=React.createClass({
handleClick:function(){
},
render:function(){
return(
<div>
<form>
<label id="firstname">First Name </label><br/>
<input type="text" placeholder="Enter First Name" ref="firstName" />
<br/><br/><label id="lastname">Last Name: </label><br/>
<input type="text" placeholder="Enter Last Name" ref="lastName" />
<br/><br/><label id="gender">Gender: </label><br/>
<input type="text" placeholder="Gender" ref="gender" />
<br/><br/><label id="designation">Designation: </label><br/>
<input type="text" placeholder="Enter Designation" ref="designation" />
<br/><br/><label id="salary">Salary: </label><br/>
<input type="number" placeholder="Enter Salary" ref="salary" />
<br/><br/><label id="city">City: </label><br/>
<input type="text" placeholder="Enter City" ref="city" />
<br/><br/><label id="country">Country: </label><br/>
<input type="text" placeholder="Enter Country" ref="country" />
<p>
<button type="button" onClick={this.handleClick}>Submit</button>
</p>
</form>
</div>
);
}
});
フォームデータを送信する必要がありますか？ WebApiはJSONを受け入れますので、state.itemを同期させておくと、それをそのままポストすることができます – JamesT