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

发布时间:2024-09-09 15:02:21 作者:小樊
来源:亿速云 阅读:80

在这个示例中,我们将展示如何在一个基于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集成在一起,创建了一个简单的待办事项应用。你可以根据需要扩展此应用,添加更多功能和样式。

推荐阅读:
  1. C# 环境
  2. 怎么使用Echarts实现前端ajax动态数据后端C#

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

上一篇:AJAX在C#中处理复杂用户交互的实例

下一篇:C# AJAX技术提升页面交互性能

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》