C# AJAX與前端框架React的集成實踐

在這個示例中，我們將展示如何在一個基于React的前端項目中使用C#和ASP.NET Core來處理AJAX請求。我們將創(chuàng)建一個簡單的待辦事項應(yīng)用，其中包括以下功能：

1. 使用React構(gòu)建前端UI。
2. 使用ASP.NET Core創(chuàng)建后端API。
3. 使用C#處理AJAX請求。

第1步：創(chuàng)建React項目

首先，我們需要創(chuàng)建一個新的React項目。在命令行中運行以下命令：

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

第2步：創(chuàng)建ASP.NET Core項目

接下來，我們需要創(chuàng)建一個新的ASP.NET Core項目。在命令行中運行以下命令：

dotnet new webapi -o TodoApi
cd TodoApi
dotnet run

第3步：定義數(shù)據(jù)模型

在TodoApi項目中，創(chuàng)建一個名為TodoItem.cs的新文件，并添加以下代碼：

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

第4步：創(chuàng)建數(shù)據(jù)庫上下文

安裝Entity Framework Core：

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

創(chuàng)建一個名為TodoContext.cs的新文件，并添加以下代碼：

using Microsoft.EntityFrameworkCore;

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

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

在Startup.cs中配置數(shù)據(jù)庫上下文：

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

第5步：創(chuàng)建API控制器

創(chuàng)建一個名為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項目中發(fā)送AJAX請求

安裝axios庫：

npm install axios

在src文件夾中創(chuàng)建一個名為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}`);

現(xiàn)在你可以在React組件中使用這些函數(shù)來發(fā)送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;

現(xiàn)在你已經(jīng)成功地將C#、ASP.NET Core和React集成在一起，創(chuàng)建了一個簡單的待辦事項應(yīng)用。你可以根據(jù)需要擴展此應(yīng)用，添加更多功能和樣式。