我是React的新手,我一直在尝试实施一个简单的“员工详细信息”crud应用程序。我能够从数据库中获取数据并以表格格式显示。但我无法将数据从表单发布到数据库。如果你能为我提供一个详细的jsx代码来将数据从表单发布到控制器,那将非常有用。还有控制器端代码将数据保存到数据库。请在下面找到我的代码。
这是我的模型(使用的实体框架):
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'))
表格React 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>
);
}
});
答案 0 :(得分:0)
您似乎使用的是非常过时的React版本。您的代码中有几个问题(我只是在查看InputValues组件)。
为了使标签按预期工作,您需要在标签和输入上的id属性上具有匹配的htmlFor属性。
当用户使用键盘提交表单时,通过点击按钮处理表单提交不会触发处理程序,这就是为什么最好用onSubmit处理它。
我还更新了您的React语法以匹配当前的语法,其中refs以一种全新的方式定义,其中字符串ref在一年多前被删除,更多详细信息在链接https://reactjs.org/docs/refs-and-the-dom.html
我想你正在学习一个教程,但是请你找一个更新的语法,因为你以后很难调整。
无论如何,这里的代码将调用您的后端服务并为其提供表单数据。
class InputValues extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(e) {
e.preventDefault();
const data = new FormData();
data.append('firstName', this.firstName.value);
data.append('lastname', this.lastname.value);
data.append('gender', this.gender.value);
data.append('designation', this.designation.value);
data.append('salary', this.salary.value);
data.append('city', this.city.value);
data.append('country', this.country.value);
var xhr = new XMLHttpRequest();
xhr.open('post', this.props.url, true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
// Do something on success
}
}
xhr.send(data);
}
render() {
return(
<div>
<form onSubmit={this.handleSubmit}>
<label htmlFor="firstname">First Name </label><br/>
<input id="firstname" type="text" placeholder="Enter First Name" ref={(firstName) => this.firstName = firstName} />
<br/><br/>
<label htmlFor="lastname">Last Name: </label><br/>
<input id="lastname" type="text" placeholder="Enter Last Name" ref={(lastname) => this.lastname = lastname} />
<br/><br/>
<label htmlFor="gender">Gender: </label><br/>
<input id="gender" type="text" placeholder="Gender" ref={(gender) => this.gender = gender} />
<br/><br/>
<label htmlFor="designation">Designation: </label><br/>
<input id="designation" type="text" placeholder="Enter Designation" ref={(designation) => this.designation = designation} />
<br/><br/>
<label htmlFor="salary">Salary: </label><br/>
<input id="salary" type="number" placeholder="Enter Salary" ref={(salary) => this.salary = salary} />
<br/><br/>
<label htmlFor="city">City: </label><br/>
<input id="city" type="text" placeholder="Enter City" ref={(city) => this.city = city} />
<br/><br/>
<label htmlFor="country">Country: </label><br/>
<input id="country" type="text" placeholder="Enter Country" ref={(country) => this.country = country} />
<p>
<button type="submit">Submit</button>
</p>
</form>
</div>
);
}
};
希望有所帮助!