下面是一个使用ASP.NET Core API和React JS的解决方案的示例代码:
ASP.NET Core API的代码示例:
public class TodoItem
{
public int Id { get; set; }
public string Title { get; set; }
}
[Route("api/[controller]")]
[ApiController]
public class TodoController : ControllerBase
{
private static List _todoItems = new List();
[HttpGet]
public IEnumerable Get()
{
return _todoItems;
}
[HttpPost]
public IActionResult Post([FromBody] TodoItem todoItem)
{
_todoItems.Add(todoItem);
return Ok();
}
}
React JS的代码示例:
import React, { useState } from 'react';
function TodoForm() {
const [title, setTitle] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
const todoItem = { title };
fetch('api/Todo', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(todoItem)
})
.then(() => {
setTitle('');
})
.catch(error => {
console.error('Error:', error);
});
};
return (
);
}
export default TodoForm;
import React, { useEffect, useState } from 'react';
function TodoList() {
const [todos, setTodos] = useState([]);
useEffect(() => {
fetch('api/Todo')
.then(response => response.json())
.then(data => {
setTodos(data);
})
.catch(error => {
console.error('Error:', error);
});
}, []);
return (
{todos.map(todo => (
- {todo.title}
))}
);
}
export default TodoList;
import React from 'react';
import TodoForm from './TodoForm';
import TodoList from './TodoList';
function App() {
return (
);
}
export default App;
这些示例代码演示了如何在ASP.NET Core API和React JS之间建立通信,并展示了如何从API中获取数据并将其显示在React组件中。