Asp.Net Core Web API and Angular 7 CRUD
HTML-код
- Опубликовано: 8 фев 2025
- 🍒 Related Videos
Same Topic, But Updated: • Asp.Net Core Web API C...
Login, User Registration, Authorization, etc (Angular & .Net Core API): • Angular & .Net Core AP...
(Angular & .Net Core API) More Videos: • Angular & Asp.Net Core...
React & .Net Core API Videos: • React & Asp.Net Core API
📂 GitHub Repository
► goo.gl/3SvTLK
💖 Channel Support
➤ Paypal: bit.ly/3L36ut4
➤ UPI App: geni.us/ScanQR...
➤ Amazon: geni.us/Amazon...
💌 For Business Inquiries
➤ codaffection@gmail.com
🚶♂️ Follow us
Facebook : / codaffection
Discord : / discord
Twitter : / codaffection
---
Angular 7 CRUD with Asp.Net Core Web API
CRUD Operations: Insert, update, delete, and retrieve are implemented in Asp.Net Core Web API with Angular 7. First of all, we'll build a Web API project in Asp.Net Core with required methods at the server-side using Entity Framework Core and SQL Server DB. Then the Angular 7 Project consumes those methods from the client-side.
Points discussed :
How to create Web API in Asp.Net Core with CRUD web methods.
Enable CORS in Asp.Net Core.
Angular Form Design with Validation.
Tools Used: VS Code, Visual Studio, SSMS, Postman.
#Angular #AspNetCore #CodAffection
goo.gl/bPcyXW : Buy me a Coffee
bit.ly/3zktP96 : Login, User Registration, Authorization, etc (Angular & .Net Core API)
bit.ly/47yygKq : (Angular & .Net Core API) More Videos
bit.ly/4fSmgXP : React & .Net Core API Videos
Could you please explain why you, along with so many other developers, do not use VS for Angular code and instead use VSC? I love VSC, but I would rather just use just one IDE. For example, would there be any issues if I were to create a blank solution named MyApp, then created a Project named WebAPI and then another project named WebApp and made that my Angular project within VS? What issues do you face when using VS for Angular? Thanks for the great tutorials!
I suggest a Stellar Lumens address, as they have the lowest transfer fees and times.
help !, in part 31:33 how did you generate the code?
@@fabianbarragan4892 if you are talking about application structure, it was manually typed.
I will try that next time.
15:27 - Missing UseSqlsServer issue, solution: Nuget > Add Microsoft.EntityFrameworkCore.SqlServer package
15:50 - Add-Migration error, solution: Nuget > Add Microsoft.EntityFrameworkCore.Tools package
26:23 - if you are using .net core 3.0 and above, solution: Add
options.JsonSerializerOptions.PropertyNameCaseInsensitive = true;
options.JsonSerializerOptions.PropertyNamingPolicy = null;
01:00:22 - ERROR TypeError: Cannot read property 'CardOwnerName' of undefined, solution: stackoverflow.com/a/55155310/6940144
01:21:20 - Ngx-Toastr not compatible every ng version, check: www.npmjs.com/package/ngx-toastr#dependencies
Thanks you
thanks man, it worked, really appreciated it
Thanks a lot, Man!
thanks a lot
Thanks !
Clear and concise. Clearly English isn't your first language, so props to you for communicating effectively. You gained a subscriber today. :-)
I am working on my English, thanks for the comment.
wow this short helpful and nice tutorial knocks me out! cant even be better, i knew angular and i wanted to start knowing how to code on backend using .net core! and yeah you nailed it! im so thankful, love the way you teach, please publish more videos and save more lives!
thanks for your wonderful feedback.
keep learning and sharing.
Awesome Video tutorial, little bit changed in .net3 and Ng 10, but I solved all the changes and found in this video every thing is genuine and very very good. Thanks. I was zero in .net and ng a week ago and today I am very much confident and same is working in my laptop also.
Omg, You'r my hero thanks for the video, full 100% completed with minimal details, Thanks!
For those having trouble on migration part:
>Install-Package Microsoft.EntityFrameworkCore.Tools
>Update-Package Microsoft.EntityFrameworkCore.Tools
Thanks you so much!
Very nice tutorial. From zero to 100% typed, character per character, built and executed. Its work and very fine!!!
Tip: To work at first, you have to use the same versions of each technology that the author used, as there are restrictions, with the exception of fontawesome.
This is really helpful. Could you please make some more videos? 1) comparing each Angular Version in terms of CRUD, 2) CRUD with Web API from multiple tables, 3) log in/out with JWT and access to certain module with authorize
Just ask him to move in with you and feed you too
Dude, i love you. From bottom of my heart.
Clear, simple, fast, logic.
thanks for your wonderful feedback. you must be a good human being. good to see such a nice feedback.
Thank u so much...I found the best video after a long time... quite helpful.... Keep doing the good work...❤️
One of the best tutorial I ever seen on RUclips. Thanks to posting such a great video tutorial.
Thanks for your wonderful feedback!.
Many thanks to @CodAffection for this great vid. (I came for the Angular.)
For the benefit of other viewers who may encounter runtime errors,
I'd like to point out in the PaymentDetailContext class in PaymentDetailContext.cs,
public DbSet PaymentDetails { get; set; }
should be:
public DbSet PaymentDetail { get; set; }
PaymentDetail as singular, without the s.
Accordingly, adjust controller code to use type instead of ,
as there's no such class as PaymentDetails, only PaymentDetail defined in PaymentDetail.cs.
Otherwise, the data provider will choke (at runtime), as the controller erroneously asks for
a result set. (I'd long suspected the typo but went with it anyhow. So the minute PaymentDetailDB acted up, I knew right away where to look.)
awesome ..simple and best tutorial ever..way effective than plural sight
Thanks for your wonderful feedback.
I'm only 15 mins in & I've learned stuff much more relevant than I have on recent pluralsight tuts
@@sameltringham2308 thanks for your wonderful feedback.
Great video. I love its conciseness. Never a wasted word or a fatuous aside. ... Potential correction. In the video at 1:00:44. minLength and maxLength are camel-cased. But they are not camel-cased in the code on GitHub. For me, camel-casing did not work. Only lowercasing worked, as in minlength and maxlength.
thanks for your wonderful feedback.
Thanks Man. Very informative. Keep up the good work. Thanks again.
Thank you bro, for this great video easy to understand and you explain magnific, a real life approach to angular and asp core.😇🙏👍
By far the best tutorial on working with a backend and the front-end. Great Job. I just subscribed, I really appreciate you taking the time to explain everything great Job.
thanks for your wonderful feedback!.
Extremely helpful please keep up the good work, visual studio 2019 - ASP.NET core web API backend and Angular 8 front end.
Glad you found this video helpful.
This is a great Tutorial I have seen, All the points are clear and necessary up to date. But the small issue on the toast massages part.
Thank you for your amazing tutorials, sir. I have been following your channel for 1 year. I am quite a big fan of your videos. I have a request to make, that is if you could make a video that will help us with entity framework core model relationships. One to one, One to many and Many to many.
God bless you Dude. I've learned so much with this video. Thank You
Glad you found the video helpful.
Amazing.... It is very easy to understand..
Great tutorial, straight forward, clean. Well done :)
Great tutorial. @42:37 you mention that service should be injected to the root module in the providers array. You really don't have to do that in Angular 7. The new property "providedIn" is sufficient.
Thanks for sharing your knowledge. I will try that in future videos.
See Clearly @17.30 his Server name is (local)\sqlexpress we need to give our system name or sqlserver instance name so that we will not get update-database error.
Thank you so much for explaining, couldn't find the problem at first!
thanks lot bro
Why after an hour of watching this video, I read this comment with an Indian accent in my head? O_O
We have to purchase SQL server Data base ?
PM> Install-Package Microsoft.EntityFrameworkCore.Tools
PM> add-migration InitialCreate
Beautifully explained and concrete example, also you have a good diction and a mild accent. Regularly I found my self in trouble trying to understand Indian accents. Greetings from México.
Thanks for the wonderful feedback!, I'm trying to improve myself. hope I can make more helpful tutorials like this in future.
PM>Update-Database
error and solution which I did today in 4 hours.
I am very much new in .net coding, but yes in PHP I have 10+ years experience.
It took me 4 hours to solve this.
1.My first Mistake: I was not having Microsoft SQL Server 2019 in my laptop locally I was having this through AZURE which is not works for localhost, so I installed this locally after download, it took around 2 Hours.
2.Second changed mistake=
"DevConnection": "Server=localhost;Database=PaymentDetailDB;Trusted_Connection=True;MultipleActiveResultSets=True;"
then it works for me
Thanks a lot, sir. I have no words to express my gratitude to you. I spent my day and night watching, studying and doing and the result was awesome. Felling myself ready to dive into new challenges. Already subscribed and starting to support your work from now on. :)
Glad you found the video helpful and thanks for your wonderful feedback.
Really good tutorial and well explained
Wow, thank you sooooo much. Simple, practical and very straight to the point. Best tutorial ever...
glad you found the video helpful.
Very useful video, thanks.
I am very very Thankuful you Sir this video help in difficult time
Amazing tutorial! you are a genius! keep up the good work!
You should have (at least) 100k subs ASAP 🙂 cos your tutorials are remarkable✨🏆with a lot of useful info and great exemplary projects
Thanks for your wonderful feedback.
This was amazing. So easy to follow along and replicate what you created. I liked that you dived into some of the WebAPI methods in detail, but as someone completely new to but keen to learn angular, it would've been nice if you explained some angular attributes in a little more detail, such as the *ngFor, (click) and [value] etc. Why are some angular attributes wrapped in parentheses and some in square brackets kinda thing... :)
But other than that, mate, this was incredible. A massive thumbs up from me. Love your videos, keep up the excellent work! :D
i really enjoy your work thanks a lot :)
good tutorial, thanks for sharing it, I will upload it to the github to share it...
It was very helpful. Thanks
I like this tutorial very much.. helps me a lot to build a project..
Thanks a lot for the step by step and detail video... learned a lot..
thanks for watching and commenting the video.
You are really awesome....but i need to learn more i guess... Got confused with some things...Anyway thanks a lot brother🙏🙏.. U gained a subscriber now🤩
Excellent! Clear and simple
CodAffection all video are helpful for us. Please make a CRUD video with implement OOP concept.
Can you teach how to pass data from one route to another?
Just as selecting the record in the table and loading the values in the form, only from another route. I'm not doing it at all.
Thank you very much. Great content.
Really good video. Clear and simple explanation. Cheers !!
For those having an issue with 'UseSqlServer', dont forget to add package down below,
PM > Install-Package Microsoft.EntityFrameworkCore.SqlServer
Details;
stackoverflow.com/questions/43098065/entity-framework-core-dbcontextoptionsbuilder-does-not-contain-a-definition-for/43098152#43098152
For those having an issue with 'Add-Migration', dont forget to add package 'tools', as shown in the link;www.codaffection.com/asp-net-core-article/angular-crud-with-asp-net-core-web-api/
I previously watched this video two/three times but used to close the video after max. of 50 mins as i couldn't understand. But thanks to #edureka channel to clear my basics and confusions.
And to #CodAffection, you're doing great job. Making videos in simple & organized way that are necessary in real-world scenario is really appreciable. Keep it up :)
thanks for your wonderful feedback. glad you found my asp.net core tutorial.
Thank's it good video; Please which package are you install to have this intellisence for angular in visual studio code
Very nice and clearly explained the topic bro
Glad you liked it
Your Tutorial is Good you Actually helped me at Work!
they demanded i code with "CODE FIRST ENTITY FRAMEWORK APPROACH",
i had difficulty with connecting with Angular Project now am at ease, all thanks to you.
my pleasure.
Bro what is the use of adding the fields on the Payment detail class . Can we add an Entity Data Base First approach and create the entity model on our own ? Pls correct me
Very nice video. Thank you so much
Everyone who is getting a error in the connection, should use this is connection string
"DevConnection": "Server=(localdb)\\mssqllocaldb;Database=PaymentDetailDB;Trusted_Connection=True;MultipleActiveResultSets=true;"
thanks for the comment.
But I don't know how to connect with sqlserver, allowed remote connections, changed tcpip settings and created firewall rules. I will try to format my machine and try again with your options
CREATE DATABASE permission denied in database 'master'. ???
Thanks a lot sir, best training
The videos helped me a lot in studying angular 7.
With the latest version of angular
visual studio code in 2019
I have followed
By the way,
I get an error in formData.PMId of 'putPaymentDetail'.
please
If you upload the same content in the latest version of angular, it will be very helpful.
Thank you.
wow nice u made it so clear ....thanks mindblowing the code worked perfecr only the thing is getting two recors in db will check why that hapeing
You are most welcome
--spec=false is not working. New option is "--skipTests" in angular 8
Thanks for the update.
Wonderful & Complete tutorial !!
I've just watching you vid, but already liking it.
Please keep up the good work.
Thanks for your wonderful feedback!.
Very good effort. Best part is boom!.
For anyone having DB errors when doing "Update-Database", try changing your connection string to
"DevConnection": "Server=(localdb)\\mssqllocaldb;Database=PaymentDetailDB;Trusted_Connection=True;MultipleActiveResultSets=True;"
Go to your SQL Server Manager. In the Object manager, there will be Connect dropdown menu select Database engine and then the Connect to server menu will pop up from there copy the server name. After that in appSetting.json change your DevConnection string to Server=COPIED VALUE... That's it
Thank you!
@@vasupatel6932 It's saying it cannot find the server..? What should I be putting for the server name?
Alec Justice if it is the same error as Tuck then the solution I provided should work other wise just check your SQL Server is working or not via other tools!
See Clearly @17.30 his Server name is (local)\sqlexpress we need to give our system name or sqlserver instance name so that we will not get update-database error.
Hi Sir, it was a very nice video, i only got an issue with toastr. it shows in the bottom left without any background i tried the same way as you did. i also used the toastr with the same version.
Super! good job. Your demo makes me more comfortable with angular and API. Thanks :)
glad you found this asp.net core tutorial helpful.
Thank you mate. You’re the saviour brother.
Good job! Thanks a lot!
Super video, you are awesome!!!
Exactly what I was looking for! Thank you!
Nice work man...
good tutorial, only a thing, why you did not implement the delete confirm with toastr?
nice...god bless you...
thanks for the wonderful info.
you mean toast dialogue for confirmation ?
CodAffection Yes
I'll really appreciate it if you enlarge the editor's font. I regularly watch video tutorials on my phone and it's a pain in the ass being able to read those codes even in landscape mode. Thanks for your effort and great content.
Hi. How can i build web UI for asp.net core web (using Angular)? And how can publish all of them to hosting? Thanks.
omg you just saved my semester ! God bless you man thank you so much !!!
Wonderful. You have a coffee comin' at ya buddy. Nice work.
Thanks for the visit
Thanks for the guide. I enjoy watching the video
Awesome! Glad to hear it helped.
I think your videos are fantastic. Please create asp.net core + react videos.Would even buy if its on udemy.
thanks for the comment. I will try your suggestion.
Thanks for the video. I had to make the "service" property public, not sure why it worked for you as private, my html component could not access it, I got this error "Property 'service' is private and only accessible within class 'PaymentDetailComponent'."
Thanks for sharing!
Getting error @Package manager->Your target project 'xyz' doesn't reference EntityFramework. This package is required for the Entity Framework Core Tools to work. Ensure your target project is correct, install the package, and try again.
Very Awesome
Thank you very much
I'm having problems when coding the form, it gives me an error about 'export as', like it doesn't recognize ngForm and ngModel
another issue the request to the backend seems to not work, i search in internet and found a way to work around app.UseCors(builder => builder.AllowAnyHeader().AllowAnyMethod().AllowAnyOrigin().AllowCredentials());
in the startup file
Thank you very much! it's very usefull
Good videos. It is a great channel. Have you noticed that you never use popups for the CRUD with Asp.net Core?
Really good tutorial and easy to under stand. Thank you so much!
Glad you found the video helpful.
@@CodAffection Could you please add a tutorial that how to deploy this angular project to production server? It would be best if you can add secure connection between web api and angular client like jwt. Thanks a lot again. I am following all your recent tutorials. Better than Pluralsight.
Your Tutorial is good but next time please divide this tutorial into different videos file-wise it would be more reliable for us. Explain every component and service in different video. Thanks.
Hello Sir i am creating a project using asp.net core with SQL server and Angular... plz suggest me the open source reporting tool.
Very useful, thank tou so much.
Hi CodeAffection,
Can you please help me in api side. Post method is working well but not the get method. It does not display the details. But i can see the record added to sql
i am getting an error on UseSqlServer because in your video you can't install Microsoft.EntityFrameworkCore.SqlServer
thank u bro
Thanks for the such a great video. Question : where did you referenced styles.css for payment-detail.component.html form.
I am not getting the validations at 57:42. Also don't see NG-pristine class in inspection of the element. Could you please suggest, if I am missing anything.
in angular applications, styles.css is a global stylesheet not specific to a component. which is mentioned in angular.json file here : github.com/CodAffection/Asp.Net-Core-Web-API-and-Angular-7-CRUD/blob/1eca256041368b1c9aefed2d1b6b47f133d1763c/Angular7/angular.json#L26
Same problem for me too. Did you solved this?
@@jassimashraf1008 For future, who have this problem. In my case i need to initialize formData property. Like, formData:CardDetails = new CardDetails();
Solution is here stackoverflow.com/questions/55155222/bootstrap-validation-is-not-working-in-angular-framework/55155310#55155310
If you are using .net core 3.0 and above, change your code here 26:10
public void ConfigureServices(IServiceCollection services)
{
services.AddControllers();
services.AddDbContext(options => options.UseSqlServer(Configuration.GetConnectionString("DevConnection")));
services.AddMvc().AddJsonOptions(options => options.JsonSerializerOptions.PropertyNameCaseInsensitive = true);
services.AddMvc().AddJsonOptions(options => options.JsonSerializerOptions.PropertyNamingPolicy = null);
}
Thank You. That's what I was looking for. You are amazing
Glad you found the video helpful.
@CodAffection I'm getting this error.
ERROR in src/app/payment-details/payment-detail/payment-detail.component.html:3:75 - error TS2341: Property 'service' is private and only accessible within class 'PaymentDetailComponent'.
change the service parameter to public.
Hello bro
If I have 100 tables
Do i need to go for code first approach?
And also updating the table from the code I am little confused.
What If I have temp properties which I dont want to update to database?
but what if you have foreign keys in your model (ICollection for example) would that just be an array in the angular model class corresponding to the EF model in the API program very confused about it
Thanks a lot sir , i learn a lot from this tutorial can you make a tutorial for Admin Website and User Website Using Angular + DotnetCore Web Api + mongoDB with some crud operations and user access and admin access
thanks for your wonderful feedback.
Iet me check what I can do.
Sir, you are the best! Thank you, thank you, thank you
congratulation! very basic and helpfull video
glad you found it helpful.
Thanks a lot for sharing a knowledge
You are welcome.
wich version of visual studio you are using
thank you for your work, but i have a problem, my ngFor dosnt show data in my table...