Angular 8 Inline Table Editing with Asp.Net Core Web API
Embed
- Published on Sep 15, 2019
- Angular Inline Table Editing with Asp.Net Core Web API
We'll discuss how to implement angular inline table editing with Asp.Net Core Web API using angular dynamic form arrays.
All of the CRUD Operations - insert, update, delete, and retrieve are implemented inside the project. In-order to design the angular grid-like structure we have used bootstrap not angular material.
Content Discussed :
- Design Angular inline table with Dynamic Form Array
- Implemented inline edit/ CRUD operations with Asp.Net Core Web API
- Included Drop Down List inside the angular grid-like structure.
- Validation for all of the controls
- Notification message for inline-table insert, update, and delete operation.
Asp.Net Core 2.2 Issue Fix: github.com/aspnet/AspNetCore/...
💖 Show Your Support ( Donation )
➤ bit.ly/3L36ut4 (PayPal)
➤ bit.ly/36lvWdV (Cards, Gpay, Apple Pay, UPIs)
✨ Recommended Courses
â–º Angular : bit.ly/35oTA5e
â–º .Net Core API : bit.ly/37y6pwH
â–º Angular + .Net Core API : bit.ly/34q7jtr
â–º Entity Framework: bit.ly/2TiHFAk
📂 GitHub Repository
â–º bit.ly/2lEKyxW
🌀 Related Videos
goo.gl/3DefLb : JWT Login Angular + Asp.Net Core API
goo.gl/ijPZQk : .Net Core Web API CRUD with Angular 7
goo.gl/AL18CP : Asp.Net Core MVC CRUD
goo.gl/ZHDEhP : Master Detail CRUD Web API + Angular
goo.gl/fJSrpX : Angular Login with Web API
Subscribe to this channel Link to this video
â–º goo.gl/RFY5C2 â–º bit.ly/2lRCxWo
📚 Must-Read Books for All Programmers
Code Complete(2nd Edition) : geni.us/s6AK9t
The Art of Computer Programming : geni.us/Ko4H8m
Clean Code : geni.us/Jf9EBTB
Design Patterns : geni.us/OMPP
The Pragmatic Programmer : geni.us/8UM9F
💰 Purchase for Developers
💻 Laptops
MacBook Pro with M1 Chip : geni.us/7KGvnCU
Dell XPS 9570 : geni.us/rYB6
Microsoft Surface: geni.us/BJgeM
MacBook Air with M1 Chip : geni.us/fHZzRiB
ASUS ZenBook 13 : geni.us/LDKE
Lenovo Ideapad : geni.us/Mwvg2
âŒ¨ï¸ Keyboard : Das 4 Professional : geni.us/hkAdzi
🎬 All Playlist
bit.ly/2KQN9xF : Angular
bit.ly/30fPDMg : Asp.Net Core
bit.ly/325temF : React
bit.ly/2ws4utg : Python
goo.gl/viJcFs : Node.js
goo.gl/gvjUJ7 : Asp.Net MVC
bit.ly/3ggmmJz : Flutter
goo.gl/itVayJ : Web API
goo.gl/YJPPAH : MEAN Stack
goo.gl/s1zJxo : C# Tutorial
goo.gl/GXC2aJ : Asp.Net WebForm
goo.gl/vHS9Hd : C# WinForm
goo.gl/MLYS9e : MS SQL
goo.gl/5Vou7t : Crystal Report
goo.gl/qEWJCs : CG Exercises in C Program
🌟 About this Channel
CodAffection - [ 1 hour content weekly ].
This channel is all about teaching and motivating software developers to build applications/
websites in various technologies/ programming languages like Angular, React, NodeJS, Python, Asp.Net, C#, JavaScript, SQL, etc.
â–º For Sponsorship Contact here: bit.ly/2TjOt0q
🔗 Social Media Links
Blog : www.codaffection.com
Facebook : codaffection
Twitter : codaffection
TheXvid : thexvid.com/user/codaffection
GitHub : github.com/codaffection
goo.gl/RFY5C2 : Subscribe to CodAffection
goo.gl/bPcyXW : Buy me a Coffee
goo.gl/3DefLb : JWT Login Angular + Asp.Net Core API
goo.gl/ijPZQk : .Net Core Web API CRUD with Angular 7
goo.gl/AL18CP : Asp.Net Core MVC CRUD
goo.gl/ZHDEhP : Master Detail CRUD Web API + Angular
goo.gl/fJSrpX : Angular Login with Web API
i guess Im kinda off topic but do anybody know a good place to stream new series online ?
Videos like this are phenomenal! I love your work CodAffection and I hope you continue to create use case projects like so. If it is possible for future videos, can you explain a little more on Controllers and Models a bit more. Was having a hard time understanding your explanation but nevertheless, the video as a whole is great! Thanks again!
Cara, seus teus tutoriais são muito bons!! Man, the tutorials of yours are pretty good!
Hello.. thank you for such a detailed video..
Can you please upload a video where one to many database relationship is implemented between two tables using code first method and .net core web api??
thanks for the comment. Let me check what I can do.
Hi, Could please make a tutorial about Globalization/Localization in (Asp Core and Angular) Project, what is the best approach in this subject and also style switching (RTL/LTR).
Your channel helped me alot. Thank you.
Nice videos!
For those UseSqlServer is not getting resolved, use following commands from PS command:
dotnet add package Microsoft.EntityFrameworkCore.Design
dotnet add package Microsoft.EntityFrameworkCore.SqlServer
Import Entity Framework Core:
using Microsoft.EntityFrameworkCore;
Hello, incredible explanation, thank you very much for sharing your knowledge, I am trying to publish the web on my website, but Cors only works for the GET and POST methods but it does NOT work for the other methods such as being PUT or DELETE, you will have an idea what the problem may be ?
When I try to update it throws the message:
localhost/:1 Access to XMLHttpRequest at 'localhost/WebApi/api/BankAccount/2' from origin 'localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
thanks
@CodAffection In my configure () method I have added this Cors configuration:
app.UseCors (x =>
{
x
.WithOrigins ("http: // localhost: 4200")
.AllowAnyOrigin ()
.AllowAnyMethod ()
.AllowAnyHeader ()
.AllowCredentials ();
});
But the problem is when you publish the web_api in an IIS, when from Angular you want to consume the web_api only the GET and POST methods work, but in debug mode it works perfect.
did you configure .net core project for cors for all web methods ?
Another great tutorial for Angular 8 CRUD using dynamic form array with web api using asp.net core. This video help a lot to those beginner developers like me. great job!!
Thanks for your wonderful feedback.
Hi, thanks for teaching us, but I had to use this syntax in angular 10
can you please tell me why should I need to used [ngValue]??
else I get the following error:
The JSON value could not be converted to System.Int32
Sir Please update the web api from 2.2 to 3.1 and write the code in your blog.
thanks a lot for your really really helpful videos. this video was the one which I really searching for that. I just have a suggestion for the next video. could you please include Fluent ApI in it ?
thanks for the comment and suggestion, can't promise , but I'll think about it later.
Thanks for wonderful videos. I would like to see a video for searching multiple criteria using asp.net core and angularJS .
Excellent job man .. Keep up the great work .. thx a million .. If possible a multistep form submission angular and web api please
Asalaamwalekum Mr. wakil..by multistep form do you mean tabbed form is it same Sir
Thanks for the idea!
Thanks for wonderful videos. I request you to kindly to make a small project with Angular 8, Angular Material & Asp.Net Core Web API Where Master Detail Crud operation is covered.
Plus one. Eagerly waiting
Yup, me too waiting for that video.
hi that was a very good explanation , i am actually making a shopping cart kind of project , can you please make a tutorial on shopping cart on ASP.NET CORE and ANGULAR it will be a great help,
thankyou
How about a video on using Chart.js or D3.js and building a dashboard with some charts and graphs and then using a pdf program to generate pdf reports.
Interestingly this is something I worked on, Usually, this is a real project task. I think you might already built something like this?
Nice sir, it's helpfull, can you mak us a library management in asp.net core from start to finish please?
Awesome video bro. I’d like to connect on LinkedIn. If you don’t mind could you please do this in angular material data table?
Nice work sir, looking forward to see your react tutorial!
Nice Video good explanation. how we can store all rows in single submit button instead of each submit
You is master
It bring for me a lot of value
Thanks you 😙😙
Thank you so muchos Code, I know that I'll learn a lot from this vÃdeo!
@CodAffection Hi, I was looking for firebase auth applications and didn't find for Angular 8 so I'd very thankful :D
thanks for the comment, let me know if there is any video suggestion related to asp.net core or angular 8.
I have done everything successfully. I am wondering where/how I can get the styles.css file that was used in this video. Can anyone help please.
it's there in github repository, link is given video description.
Cool video bro! Can you show us how to use some pipes inside inputs pls?
Thank you for very good content.Are you provide online coaching???
not yet.
Sir, please make a tutorial about authorization and authentication in MEAN Stack. Its a humbly reqest.
CodAffection sir, I’m asking about user roles and permissions. Like admin, moderator, user etc.
sorry for the late reply. MEAN Stack user registration and authorization are already discussed.
here is the first video : thexvid.com/video/m34FCkBd7UU/video.html
second : thexvid.com/video/V9zDNfVs7Z4/video.html
third : thexvid.com/video/T8qepiTbJi4/video.html
fourth : thexvid.com/video/r0QYP61bCCM/video.html
For role authorization you can watch this video in angular : thexvid.com/video/MGCC2zTb0t4/video.html
Anne Smith, I just want to know about user roles and permission. That's it.
Sir? LOL no wonder you cannot google.
Anne Smith Sir, I didn't get it.
Thanks for sharing, your videos are very useful !!! Keep them coming Angular and .Net
thanks for the support.
Thanks for sharing. And why do you delete 's '? You always delete it. i don't understand because i have seen a lot of example with plural names. Could you explain that?
@CodAffection thank you
@Muhammed Karalar it's has nothing to do with the convention. I used to name controller with singular naming.
please check this StackOverflow post : stackoverflow.com/a/12462750/4133590
@CodAffection sorry for my bad english :( You changed controller's name at 16:44 . ( BanksController ==> BankController )
I mean , you always change but there are a lot of examples with plural names. ( BanksController, ProductsController ... ) I am confused about this. What is the advantage of the singular naming ?
thanks for the comment.
'delete's' I didn't get you ? could please elaborate by mentioning the exact video time where I do this.
Great video but I have a problem. How is it possible that I can either update or insert, when one is working the other is not working. I doubt is because of the if condition between 2 buttons. Any idea?
hey bro, can you tutorial a completed project about angular + asp.net core? thanks you very much
Can you explain me with pagination also?
may be in another video.
Can I try using this tutorial for the latest version of Angular and Asp.net core, is there any possible problem that I will be facing?
3:25 why didnt you choose angular icon option? Isnt it the same?
thanks you very much. I am using this code and it worked very well ...
glad you found it helpful.
Great tutorial!
i wish if you can show how to do the application by making database manually
Thanks great vid. You wouldnt happen to have the css available would you?
you can see the entire project source code in GitHub repository, the link is given below in video description.
i need some help please. i have some errors with my code.
The JSON value could not be converted to System.Nullable`1[System.Int32]. Path: $.Zoneid | LineNumber: 0 | BytePositionInLine: 53."
i'm trying to add zoneid from zone table to pays table. please i need help
I'm noticing the ValuesController in your GitHub repository but in your video you do not explain. I've also been getting a 400 bad request error when trying to do a PUT request to the BankAccount table. Can you help me out with this?
i am also getting a put error
Hello master .. Im begging you to make a tutorial how to configure cors in .netcore 3.1 consume by angular... I've seen a lot of tutorial but it doesnt work.. Pls
@CodAffection thanks sir
to enable cors in .net core, try this - bit.ly/2GiAdT0
Hi Shamseer, can you create an angular and firebase authentication system using oauth and openid connect along with login providers like facebook, google, microsoft, twitter, etc.
may be I'll think about it later.
Hi, the project can't build at angular 12 , how can i fix it , thank you
I am a newer angular , i study with video , and some error i can't fix it
Type 'AbstractControl' is missing the following properties from type 'FormGroup': controls, registerControl, addControl, removeControl, and 3 more. [formGroup]="fg" (submit)="recordSubmit(fg)" , [disable]="fg.invalid"
same here
sir will you explain how to integrate payment gateway to pay fee amount just a simple example in asp.net mvc core 3.1 . pl sir pl pl pl.
Hi could you please share the code
Hi. n1 video. I would like see app Shop (user, product, cart, auth) or Social Networking app(clone Facebook or other). Angular 8 with Asp.Net Core Web API. Thanks
I hope it is app Shop
up
In angular 11 I have errors with the [formGroup] :(
When I clicked delete, it is showing message "Are you sure to delete this record ". Then if I clicked cancelled, it is showing "updated!" which wrong. It should not show any message because I cancelled.
Is there any fix for this?
hello can you please make video with asp.net mvc with angular 8 in crud operation
It was not necessary to install the AspNetCore.Cors package. It is already preinstalled in the Net.Core 2 and higher.
Thank you for the video.
I am using Asp.net core 3.1 and installed cors 2.2.But I am getting the below error.
"Access to XMLHttpRequest at 'localhost:54548/api/Bank/Bank' from origin 'localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."
thank u very much for this explaining
thanks for tutorial, man
Do a tutorial on .Net core MVC using blazor and Identity.
I am looking for that css file, can someone kindly share it?
it's there in GitHub link given in video description.
if i have 50 thousand record then what? please add some drop down filter or search items please explain it how does it works
if i have 50 thousand record then what? please add some drop down filter or search items please explain it how does it works
if i have 50 thousand record then what? please add some drop down filter or search items please explain it how does it works
I came for the Dropdown select button its giving me a hard time to submit to database
Hello sir without scaffolding crud operation banao asp.net MVC EntityFramework please sir
Thank you sir, but i followed tutorial step by step and validation not working .
What's the problem Hassan?
we can safely watch this at 2x speed
it's work with angular 6 ??
i can't know the problem, can you help me Sir ?
Sir create a complete application website in Angular?
@CodAffection educational system like school management e-commerce there are many tutorial for it and many thanks sir
@CodAffection don't put all the functionality there, I think you must need to make the left section in which we select different options like money between 1000 to 5000 or different product. I hope you understand
No need to create all the function product cart system with payment gateway integration would be enough I hope
yup, let me check what I can do. it will take more time than we expect.
God bless you Dude.
nice, sir
ag-grid please..
when I added the Search all option from select will reflects How to Fix, Thanks
Can i request angular 8 with firestore ?
thanks for the suggestion,
angular + firestore crud : thexvid.com/video/5I6k77uqtLY/video.html
cannot call post api error message " Access to XMLHttpRequest at 'localhost:44324/api/Orders' from origin 'localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."
Can anyone me that from were the Css file was copied and pasted in style.css file.
services.AddDbContext(options => options.UseSqlServer(Configuration.GetConnectionString("DevConnection")));
Error on :
UseSqlServer
give me solution
I tried to follow you but the project can't run i don't know why
what happened ? any error message ?
does NOT work, tried laucnhing the source code only the api portion shows up
This video just BOOOM )
thanks
You're welcome!
welcome back sir
thank you :)
Please
video is nice but you voice accent unbearable it's irritating.i found your video content is good and came here ,but you start speaking i just skipped. Please speak natural.