React JS + .NET Core Web API + Microsoft SQL | full stack app tutorial
ฝัง
- เผยแพร่เมื่อ 10 ก.ค. 2021
- Code and Github link: art-of-engineer.blogspot.com/...
Related Tutorials:
--------------------
React JS + Python Django + SQLite full-stack app
• React JS + Python Djan...
--------------------
React JS + .NET Core Web API + Microsoft SQL full stack app
• React JS + .NET Core W...
--------------------
.NET Core API + Vue JS + Microsoft SQL full-stack web app
• .NET Core API + Vue JS...
--------------------
ASP .NET Core Web API + Microsoft SQL CRUD APIs
• ASP .NET Core Web API ...
--------------------
ASP .Net Core Web API + MySQL | CRUD APIs Tutorial
• ASP .Net Core Web API ...
--------------------
.NET Core Web API + PostgreSQL | CRUD APIs
• .NET Core Web API + Po...
--------------------
.Net Core Web API + MongoDB CRUD APIs
• .Net Core Web API + Mo...
--------------------
Python Django + SQLite | REST APIs
• Python Django + SQLite...
--------------------
Python Django + PostgreSQL | REST API Tutorial
• Python Django + Postgr...
--------------------
Python Django + MySQL CRUD API Tutorial
• Python Django + MySQL ...
--------------------
Python Django + MongoDB CRUD API Tutorial
• Python Django + MongoD...
--------------------
Python Django + Microsoft SQL Server CRUD API Tutorial
• Python Django + Micros...
--------------------
Hello every one, In this tutorial, you will learn to create a full stack web application from scratch using Microsoft SQL server for the database, .NET Core Web API for the backend, and React JS for the front end.
We will first start with creating the necessary tables in Microsoft SQL server, then create the Web API project with the required rest API end points. Finally we will use React JS for creating the front end.
-You will learn how to add routing for our app.
-Create bootstrap table with custom sorting and filtering capabilities.
-Add modal pop up windows with drop downs and date pickers.
-We will also learn how to upload an image and store it in the backend server.
![The Wall Song ร้องข้ามกำแพง | EP.202 | ตั้ม วราวุธ / เบสท์ คำสิงห์ | 18 ก.ค. 67 [1/5]](http://i.ytimg.com/vi/cwIoA7XHqnE/mqdefault.jpg)
I cannot tell you how many tutorials I have started and abandoned! This one was absolutely amazing, though, and I got successfully to the end. I really appreciate you making this. May you live to be 1,000 years old!!!
hi, im trying to recreate this too, were you using the same version of asp.net core or are you using ver 6?
@@philandreitan704 hey I want to know that too 🥺
He's a robot, so I think he can potentially live for 1000's of years if kept well oiled.
Huge thanks! This guide really helped me a lot in starting out.
In case it might help others, As of May 2023, I did the following changes:
* Used NET 5.0 to follow along with the backend
* Used instead of , so the updated routes would look like ""
* I couldn't get Modals to work at all, so I used React's instead (might need to npm install react-bootstrap bootstrap). BTW I'm using React 18.2.0
Hello can you please tell me where to make changes for the modal thing
hey thanks for the info
Master! Amazing like always.
Thanks for the richest content you provide to the community.
if around 18:30 something goes wrong then ...
try stackoverflow soluton:
"Check if your connection string has "Trusted_Connection=true" added."
Am a beginners after watching your videos I got some ideas. Thanks for your detail explaination.
Thank You for the tutorial still worth it in 2022.
This is really amazing tutorial! Thank you so much for your guiding, it helps me a lot to understand workflow between front-back-data.
What an amazing tutorial! You are a savior!!! Thank You
Very nice. Very Good. Short ,quick explaining basic ideas.
I always come back to this one for the lesson, I need a query, a table, a connection and a reader. thanks.
Thanks! That's great lecture.
If anybody has problems with requirin Switch from react-router-dom, it is because of in the next React update Switch was changed to Routes, change it. And also, in Route you should rewrite from
to
Is this using hooks or redx?
Thanks
import {BrowserRouter, Route, Routes, NavLink} from 'react-router-dom';
...
...
Make these Changes
@@BigwantPrezentacje Thanks!! this worked !
DUDE...THANK YOU!
You are amazing!
May God bless you bro ♥
Thank you for such great content! Could you do a tutorial on version control and hosting for this kind of project?
Hello - How do you deploy when I see there are two VS and Visual Code IDE's? Solution to this would be great help.
great Vid! thanks!
Awesome🎉
Thank you so much.
The best one
hi. how to fix such problem? project seems working properly. i have database connection and all functionality but it looks like css and html doesn't work. i have only plain text and links + images. no errors and warnings in console
edit: sorry, i didnt copied changes from index html with bootstrap. lmao.
thank you dude u saved my life
Can you please help me with what the connectionstring will be if i am using developer server
Excellent tutorial AND you provided the code for free. I subscribe for that :)
Really good tutorial. Can you please make a tutorial on web api identity framework and how can we use it with Reactjs.
can you make this project with authentication? or tell me the implementation of authentication with с# and react
So, Unauthorized user can also access the API Data? If They will have api.
Wonderful ! Thank you for teaching us !
It is showing error to AddcontrollerWithViews() in startup use for json serialisation
when I type AddServicesWithModels it doesnt like it. I get error: 'IServiceCollection' does not contain a definition for 'AddControllersWithViews' please help
i am getting a error 404 on running the GET method on API
Thank you
i am getting error bcos i dont have Startup.cs in my project as im using .NET 6 (how to configure services in Program.cs?)
Parabéns....Agora precisamos saber onde HOSPEDAR a API e o REACT JS ou seja por pra RODAR A APP....Obrigado
this must be old because it's just not working especially "navlink", also to directly fetch a record for update of delete you I had to provide for the int value in the Attribute, when he dose not. It's still one of the best demos I've ever encountered. Just wish mine would have worked like his :)
In 36:06 when my web page loads, it just shows the buttons Home, Department, Employee however when I click on them it doesn't happen anything? Any idea of what could be the trouble?
same
have you found the solution?
I've found the solution, you must use
ELEMENT instead of component
@@BigwantPrezentacje Thanks dude u saved me some trouble
good learning
Hello friend, congratulations for the channel. I created a few more screens, I'm having difficulty performing a procedure, I created a "Customer Registration" screen and a "Customer Query" screen with a grid and filter by name, now I need a button in which, when clicking, the parameters are directed to "Customer Registration" screen as well as the "Modal" of the "Employee" screen.
Thanks for the tutorial.
thanks tutorial
in visual studio new update startup.cs file is no more available with the installation what can i do please ?
yes, you can make change in the Program.cs file. Startup.cs is officially removed.
I don't have starup.cs file ... Then what i do
Why class instead of function...
Am unable to see the startup.cs file in my solution. can you help me on it if anything I missed ?
Does anybody know why I can't view the images I upload in the frontend? but they are saved in the backend.
can you view now?
I am facing issues in uploading pic can you please help me out?
Problem with the PUT method on the department. It is giving me a 400 bad request. I tried to copy the exact same code but it is still not working
In my build no startup.cs was created. What do I do in such a case?
If you are in visual studio 2022, then you should start looking at m.th-cam.com/video/vdhFw1VSowg/w-d-xo.html. I promise it’s not a rickroll. But essential to understanding the changes, in my opinion. Sorry I’m late.
I LOVE YOU
How would I deploy this to IIS?
is this using hooks?
I am struggling to access photos from my local server using my local host url + filename
Did you manage to fix it ?
Also struggling
Which react version should I use for this tutorial?
any is fine., it just now the react-router-dom has changed... the is no longer function, it changes into
could you please also create a tutorial to upload and watch videos
I didn't get controllers folder
I'm trying to repeat. Everything seems to be fine, but modals do not open. Does anyone have the same problem?
yes, i maked misstake in word toggle, i write toogle and editor didnt show me this. check correctnes
An unhandled exception occurred while processing the request.
NotSupportedException: Serialization and deserialization of 'System.Type' instances are not supported.
System.Text.Json.Serialization.Converters.UnsupportedTypeConverter.Write(Utf8JsonWriter writer, T value, JsonSerializerOptions options)
NotSupportedException: Serialization and deserialization of 'System.Type' instances are not supported. Path: $.Columns.DataType.
System.Text.Json.ThrowHelper.ThrowNotSupportedException(ref WriteStack state, NotSupportedException ex)
Please Help Me......!!!!!!!!!!!!!!!!!
Add this in the program file if u dont have the start up, also add the nuget package:
builder.Services.AddControllers()
.AddNewtonsoftJson();
builder.Services.AddCors(policyBuilder =>
policyBuilder.AddDefaultPolicy(policy =>
policy.WithOrigins("*").AllowAnyHeader().AllowAnyHeader())
);
@briandijcks
Thanks, you saved me some time. Small note: There is AllowAnyHeader() twice, it should be ...AllowAnyHeader().AllowAnyMethod()
Also, dont forget to add:
app.UseCors();
If you dont do it, you will not fetch data from server in React app
Can we use both react and web api project under one solution
Yes it can be done. The solution file is very minimal and only used for structure rather than functionality
Speed running a full site build
at 39:48 my table doesn't get filled, the buttons work, no errors whatsoever. Let me know if anyone has the solution, thanks.
I have the same problem. Did you find a solution?
I did although I don't remember how exactly, it had something to do with how the code gets sent from the backend which can't be read and shown by the frontend, it knows it exists but can't show it that's why you get the rows but no info.
I see. I'll see what I can figure out. Thank you for responding.@@briandijcks
Can we use both react project and web api project under the same solution as different projects.
Yes. I would say this is the preferred way to have the overall folder structure
I don't have startup.cs in my template. anyone else?
same , what did you end up doing ?
@@karabomasilela5465 i dont remember. I probably just gave up on the project lol
Why don't we use Linq here?
You definitely should but I think he is using basic SQL query strings to keep it simple and not have to explain Linq or EF to people that don't know it. He's staying on scope.
.NET Core Web API + Microsoft SQ
Your modal not working
Sorry but due to recent updates in react this tutorial is obsolete from now on. Thanks babel too for not updating its packages. Also for people who still wants to go on with it , Switch's are updated as Routes now. So instead of importing Switch from DOM import Routes. When I came into just the good part, too many uncaught errors that video maker did not encounter came to my path. I stumbled upon it and stopped fixing anymore. If you read until here don't watch it. I'm not saying its a bad tutorial (not too good either) but its obsolete, not usable as it is today. Needs a whole update. So go out there and watch newer videos because React is a b*.
fucking audio
what is zoomer doing here talking on the video
I can't install the specified NuGet Package (Microsoft.AspNetCore.Mvc.NewtonsoftJson) - error message: "Package Microsoft.AspNetCore.Mvc.NewtonsoftJson 5.0.9 is not compatible with netcoreapp3.1 (.NETCoreApp, Version=v3.1), Package Microsoft.AspNetCore.Mvc.NewtonsoftJson 5.0.0 supports net50 (.NETFramework,Version=v5.0). But the tutorial specifically states that we are using .NET CORE and also stipulates that we install this NuGet package (which is the only one that appears when I search for the package under the "Browse" tab).
Install -Version 3.1.16
@@arttutuominen4214 hmm this still doesn't seem to to work. Did you mean the NewtonsoftJson Nuget package version or the .Net Core App framework?
Ohh nvm, the JSON text is there. Just needs to be highligted
@@theRINspace NewtonsoftJson Nuget package version
I've an error at command (min 31) npx create-react-app my-app. npm ERR! code ENOENT..