React Code Beispiel: Liste mit React aus Daten Asp.Net Core API mit SQL Server

import React, { Component } from 'react';

export class Articles extends Component {

    //--------< component: Articles >--------

    //====< compontent >====

    static displayName = Articles.name;

    constructor(props) {

        //-< react: parameter >

        super(props);

        //-</ react: parameter >

        //--< react: variables >--

        this.state = {

            articles: [],

            loading: true

        };

        //--</ react: variables >-

    }

    //--< component.events >--

    componentDidMount() {

        this.populateData();

    }

    //--</ component.events >--

    //====</ compontent >====

    //========< Fill HTML >======

    static renderTable(articles) {

        return (

            <table className='table table-striped' aria-labelledby="tabelLabel">

                <thead>

                    <tr>

                        <th>title</th>

                    </tr>

                </thead>

                <tbody>

                    {articles.map(article =>

                        <tr key={article.IDArticle}>

                            <td>{article.title}</td>                            

                        </tr>

                    )}

                </tbody>

            </table>

        );

    }

    //========</ Fill HTML >======

    //====< react: render >====

    //*set root hmtl, load data, fill data 

    render() {

        //----< prepare document >---

        let contents = this.state.loading

            ? <p><em>Loading...</em></p>

            : Articles.renderTable(this.state.articles);

        //----</ prepare document >---

        //----< fill html >----

        return (

            <div>

                <h1 id="tableLabel" >Articles</h1>

                <p>This component demonstrates fetching data from the server.</p>

                {contents}

            </div>

        );

        //----</ fill html >----

    }

    //====</ react: render >====

    //====< functions >====

    //*load data from web api

    async populateData() {

        //--------< populateData() >--------

        const response = await fetch('api/articles');   //*get web_data from web api as json-string

        const data = await response.json();             //*convert json to data

        this.setState({ articles: data, loading: false }); //*refresh state of arcticles

        //--------</ populateData() >--------

    }

    //====</ functions >====

    //--------</ component: Articles >--------

}

import React, { Component } from 'react';

import { Route } from 'react-router';

import { Layout } from './components/Layout';

import { Articles } from './components/Articles';

import { Home } from './components/Home';

import { FetchData } from './components/FetchData';

import { Counter } from './components/Counter';

import AuthorizeRoute from './components/api-authorization/AuthorizeRoute';

import ApiAuthorizationRoutes from './components/api-authorization/ApiAuthorizationRoutes';

import { ApplicationPaths } from './components/api-authorization/ApiAuthorizationConstants';

import './custom.css'

export default class App extends Component {

    static displayName = App.name;

    render() {

        return (

            <Layout>

                <Route exact path='/' component={Articles} />

                <Route exact path='/home' component={Home} />

                <Route path='/counter' component={Counter} />

                <AuthorizeRoute path='/fetch-data' component={FetchData} />

                <Route path={ApplicationPaths.ApiAuthorizationPrefix} component={ApiAuthorizationRoutes} />

            </Layout>

        );

    }

}

using System;

using System.Collections.Generic;

using System.Linq;

using System.Threading.Tasks;

using Microsoft.AspNetCore.Http;

using Microsoft.AspNetCore.Mvc;

using Microsoft.EntityFrameworkCore;

using CodeDocu.Models;

namespace CodeDocu.Controllers

{

    //------------< Namespace >------------

    [Route("api/articles")]

    [ApiController]

    public class ArticlesController : ControllerBase

    {

        //--------< Controller: ArticlesController >--------

        #region init

        private readonly Data.ApplicationDbContext _context;

        public ArticlesController(Data.ApplicationDbContext context)

        {

            _context = context; //*get database context

        }

        #endregion /init

        // GET: api/Articles

        [HttpGet]

        public async Task<ActionResult<IEnumerable<ArticelModel>>> GetArticles()

        {

            //-------------< Liste >-------------

            var data= _context.tbl_Articles.Take(10);

            return await data.ToListAsync();

            //-------------</ Liste >-------------

        }

using System;

using System.Collections.Generic;

using System.ComponentModel.DataAnnotations;

#nullable disable

namespace CodeDocu.Models

{

    public partial class ArticelModel

    {

        //-------------< Class: Model_Project >-------------

        #region Variables

        //------------< Region: Variables >------------

        //[Required]

        [Key]

        public int IDArticle { get; set; }

        [MaxLength(450)]

        public string IDUser { get; set; }

        [MaxLength(255)]

        [Required]

        public string Title { get; set; }

        public string TextContent { get; set; }

        public string HtmlContent { get; set; }

        [MaxLength(450)]

        public string Folder { get; set; }

        [MaxLength(450)]

        public string Keywords { get; set; }

        [DisplayFormat(DataFormatString = "{0:d}")] //Format as ShortDateTime

        public DateTime? DtCreated { get; set; }

        [DisplayFormat(DataFormatString = "{0:d}")] //Format as ShortDateTime

        public DateTime? DtEdit { get; set; }

        //------------</ Region: Variables >------------

        #endregion /Variables

        #region Class

        //------------< Region: Class >------------

        public ArticelModel()

        {

            //-< init >-           

            DtCreated = DateTime.Now;

            DtEdit = DateTime.Now;

            Title = "";

            TextContent = "";

            HtmlContent = "";

            //-</ init >-

        }

        //------------</ Region: Class >------------

        #endregion /Class

        //-------------</ Class: Model_Project >-------------

    }

}

namespace CodeDocu.Data

{

    public class ApplicationDbContext : ApiAuthorizationDbContext<ApplicationUser>

    {

        public ApplicationDbContext(

            DbContextOptions options,

            IOptions<OperationalStoreOptions> operationalStoreOptions) : base(options, operationalStoreOptions)

        {

        }

        #region EF: Datase-Tabels to Models

        //------------< region: Datase-Tables to Models >------------

        public DbSet<Models.ArticelModel> tbl_Articles { get; set; }

        protected override void OnModelCreating(ModelBuilder modelBuilder)

        {

            base.OnModelCreating(modelBuilder);

            modelBuilder.Entity<Models.ArticelModel>().ToTable("tbl_Articles");           

        }

        //------------</ region : Datase-Tables to Models >------------

        #endregion /EF: Datase-Tabels to Models

    }

}