#

React Code Beispiel:

Anzeigen einer Liste in React von Daten aus Asp.Net Core Web API

 

 

 

 

React Article.js

 

React code article.js

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: dataloading: false }); //*refresh state of arcticles

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

    }

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

 

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

}

 

 

 

 

React: app.js

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>

        );

    }

}

 

 

 

 

Asp.Net Core Controller

Controllers/ArticlesController.cs

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 >-------------

        }

 

 

DataModel for Articles

Models/ArticleModel.cs

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 >-------------

    }

}

 

 

 

ApplicationDbContext

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

    }

}

 

 

Mobile

.