How to get data from database using asp.net core web api

Soheb Ahmad

i have a crud operation in asp.net core web api.i check all api on postman all doing work fine. Now i want to connect this project with react and perform all operation using react please someone help me right now.... Thank you

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Tuhin Paul2y ago

Accepted answer

Axios is a popular library for making HTTP requests in React. Install it by running

npm install axios

apiService.js

import axios from 'axios';

const API_URL = 'https://your-api-url.com/api'; // Replace with your actual API URL

export const getItems = () => {
    return axios.get(`${API_URL}/items`);
};

export const getItemById = (id) => {
    return axios.get(`${API_URL}/items/${id}`);
};

export const createItem = (data) => {
    return axios.post(`${API_URL}/items`, data);
};

export const updateItem = (id, data) => {
    return axios.put(`${API_URL}/items/${id}`, data);
};

export const deleteItem = (id) => {
    return axios.delete(`${API_URL}/items/${id}`);
};

In your React components, you can now use the functions from apiService.js to perform CRUD operations.

import React, { useEffect, useState } from 'react';
import { getItems, createItem, updateItem, deleteItem } from './apiService';

const App = () => {
    const [items, setItems] = useState([]);
    const [newItem, setNewItem] = useState('');

    useEffect(() => {
        fetchItems();
    }, []);

    const fetchItems = async () => {
        try {
            const response = await getItems();
            setItems(response.data);
        } catch (error) {
            console.error('Error fetching items', error);
        }
    };

    const handleCreate = async () => {
        try {
            await createItem({ name: newItem });
            setNewItem('');
            fetchItems();
        } catch (error) {
            console.error('Error creating item', error);
        }
    };

    const handleUpdate = async (id) => {
        try {
            await updateItem(id, { name: 'Updated Name' });
            fetchItems();
        } catch (error) {
            console.error('Error updating item', error);
        }
    };

    const handleDelete = async (id) => {
        try {
            await deleteItem(id);
            fetchItems();
        } catch (error) {
            console.error('Error deleting item', error);
        }
    };

    return (
        
            Items
             setNewItem(e.target.value)}
            />
            
            
                {items.map((item) => (
                    
                        {item.name}
                        
                        
                    
                ))}
            
        
    );
};

export default App;

Soheb Ahmad2y ago
Thank You Tuhin Paul,Aman Gupta
+1

Aman Gupta2y ago

Hi Soheb,

To connect your ASP.NET Core Web API with a React frontend and perform CRUD operations, follow these steps:

Create a Service to Handle API Calls

Create a file called apiService.js in your src folder

import axios from 'axios';

const API_URL = 'http://localhost:5000/api'; // Replace with your API base URL

export const getItems = async () => {
  return await axios.get(`${API_URL}/items`);
};

export const getItemById = async (id) => {
  return await axios.get(`${API_URL}/items/${id}`);
};

export const createItem = async (data) => {
  return await axios.post(`${API_URL}/items`, data);
};

export const updateItem = async (id, data) => {
  return await axios.put(`${API_URL}/items/${id}`, data);
};

export const deleteItem = async (id) => {
  return await axios.delete(`${API_URL}/items/${id}`);
};

Implement CRUD Operations in React

In your App.js or any component where you want to perform CRUD operations, import the service and use it.

import React, { useState, useEffect } from 'react';
import { getItems, createItem, updateItem, deleteItem } from './apiService';

function App() {
  const [items, setItems] = useState([]);
  const [newItem, setNewItem] = useState('');

  useEffect(() => {
    loadItems();
  }, []);

  const loadItems = async () => {
    const response = await getItems();
    setItems(response.data);
  };

  const handleCreate = async () => {
    await createItem({ name: newItem });
    loadItems();
    setNewItem('');
  };

  const handleUpdate = async (id) => {
    await updateItem(id, { name: 'Updated Item' });
    loadItems();
  };

  const handleDelete = async (id) => {
    await deleteItem(id);
    loadItems();
  };

  return (
    
      Items
      
        {items.map(item => (
          
            {item.name}
            
            
          
        ))}
      
       setNewItem(e.target.value)} 
      />
      
    
  );
}

export default App;

Test Your Application

Run your React app using

npm start

Ensure your ASP.NET Core Web API is running, and test your application by performing CRUD operations from the React frontend.

CORS Configuration (if needed)

If you face CORS issues, ensure your ASP.NET Core Web API allows requests from your React app. In your Startup.cs, configure CORS:

This setup should get you started with integrating React with your ASP.NET Core Web API for performing CRUD operations. Let me know if you need further assistance!