C# AJAX与前端框架React的集成实践

在这个示例中，我们将展示如何在一个基于React的前端项目中使用C#和ASP.NET Core来处理AJAX请求。我们将创建一个简单的待办事项应用，其中包括以下功能：

1. 使用React构建前端UI。
2. 使用ASP.NET Core创建后端API。
3. 使用C#处理AJAX请求。

第1步：创建React项目

首先，我们需要创建一个新的React项目。在命令行中运行以下命令：

npx create-react-app todo-app
cd todo-app
npm start

第2步：创建ASP.NET Core项目

接下来，我们需要创建一个新的ASP.NET Core项目。在命令行中运行以下命令：

dotnet new webapi -o TodoApi
cd TodoApi
dotnet run

第3步：定义数据模型

在TodoApi项目中，创建一个名为TodoItem.cs的新文件，并添加以下代码：

public class TodoItem
{
    public int Id { get; set; }
    public string Title { get; set; }
    public bool IsCompleted { get; set; }
}

第4步：创建数据库上下文

安装Entity Framework Core：

dotnet add package Microsoft.EntityFrameworkCore.Sqlite
dotnet add package Microsoft.EntityFrameworkCore.Design

创建一个名为TodoContext.cs的新文件，并添加以下代码：

using Microsoft.EntityFrameworkCore;

public class TodoContext : DbContext
{
    public TodoContext(DbContextOptions<TodoContext> options) : base(options)
    {
    }

    public DbSet<TodoItem> TodoItems { get; set; }
}

在Startup.cs中配置数据库上下文：

public void ConfigureServices(IServiceCollection services)
{
    services.AddDbContext<TodoContext>(opt => opt.UseSqlite("Data Source=todos.db"));
    services.AddControllers();
}

第5步：创建API控制器

创建一个名为TodosController.cs的新文件，并添加以下代码：

using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;

[Route("api/todos")]
[ApiController]
public class TodosController : ControllerBase
{
    private readonly TodoContext _context;

    public TodosController(TodoContext context)
    {
        _context = context;
    }

    [HttpGet]
    public async Task<ActionResult<IEnumerable<TodoItem>>> GetTodoItems()
    {
        return await _context.TodoItems.ToListAsync();
    }

    [HttpPost]
    public async Task<ActionResult<TodoItem>> PostTodoItem(TodoItem item)
    {
        _context.TodoItems.Add(item);
        await _context.SaveChangesAsync();

        return CreatedAtAction(nameof(GetTodoItem), new { id = item.Id }, item);
    }

    [HttpGet("{id}")]
    public async Task<ActionResult<TodoItem>> GetTodoItem(int id)
    {
        var item = await _context.TodoItems.FindAsync(id);

        if (item == null)
        {
            return NotFound();
        }

        return item;
    }

    [HttpPut("{id}")]
    public async Task<IActionResult> PutTodoItem(int id, TodoItem item)
    {
        if (id != item.Id)
        {
            return BadRequest();
        }

        _context.Entry(item).State = EntityState.Modified;

        try
        {
            await _context.SaveChangesAsync();
        }
        catch (DbUpdateConcurrencyException)
        {
            if (!TodoItemExists(id))
            {
                return NotFound();
            }
            else
            {
                throw;
            }
        }

        return NoContent();
    }

    [HttpDelete("{id}")]
    public async Task<IActionResult> DeleteTodoItem(int id)
    {
        var item = await _context.TodoItems.FindAsync(id);

        if (item == null)
        {
            return NotFound();
        }

        _context.TodoItems.Remove(item);
        await _context.SaveChangesAsync();

        return NoContent();
    }

    private bool TodoItemExists(int id)
    {
        return _context.TodoItems.Any(e => e.Id == id);
    }
}

第6步：在React项目中发送AJAX请求

安装axios库：

npm install axios

在src文件夹中创建一个名为api.js的新文件，并添加以下代码：

import axios from 'axios';

const api = axios.create({
  baseURL: 'http://localhost:5000/api/todos',
});

export const fetchTodos = () => api.get('/');
export const createTodo = (todo) => api.post('/', todo);
export const updateTodo = (id, todo) => api.put(`/${id}`, todo);
export const deleteTodo = (id) => api.delete(`/${id}`);

现在你可以在React组件中使用这些函数来发送AJAX请求。例如，在App.js中：

import React, { useState, useEffect } from 'react';
import { fetchTodos, createTodo, updateTodo, deleteTodo } from './api';

function App() {
  const [todos, setTodos] = useState([]);

  useEffect(() => {
    fetchTodos().then((response) => setTodos(response.data));
  }, []);

  // ...其他代码，如添加、更新和删除待办事项

  return (
    <div className="App">
      {/* ...渲染待办事项列表 */}
    </div>
  );
}

export default App;

现在你已经成功地将C#、ASP.NET Core和React集成在一起，创建了一个简单的待办事项应用。你可以根据需要扩展此应用，添加更多功能和样式。