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: data, loading: 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 } }
|