Ajax tutorial in ASP.NET C# web programming partial page updates

Go to StudyCoding.org to subscribe to the full list of courses and get source code for projects.
Updated version of this course is studycoding.org
How to use AJAX in an ASP.NET web page. This will show you how to define a partial page element, modify a form submit request to an AJAX request, import the unobtrusive jquery library using nuget, handle an ajax request in the appropriate controller method and respond to click events in page controls. This video is a compilation of five parts to form one example project.
This video is an introduction to a free asp.net programming course that covers mvc programming, controllers, views, routes, models, razor tags, ajax, database access and game programming.
I am a professor of software development and computer science at Grand Canyon University. Students graduate with experience in C#, Java, JavaScript and PHP frameworks including Microsoft .NET MVC, Spring, Enterprise, Laravel, Node, Express, React, Angular, Android, Xamarin and jQuery.
Included in the programming experience, students also practice software development practices with agile teams using burndown charts, scrums, user story backlogs and sprints.

[@muttBunch]

Love this guy, “Let’s go fix that”. Love the teaching style. Makes it fun

[@mig1552]

Just wanted to thank You Sir. I'm a C# desktop developer professionally, but i'm looking for a new job as a ASP.NET developer, and beside reading some books (like "Pro ASP.NET Core 3: Develop Cloud‑Ready Web Applications" which i highly recommend) i am using Your videos, to get more familiar with some topis, while i am making my own projects just for learning purposes.
As You obviuosly know, making desktop applications with C# is totally different than making web applications (tbh the only thing, that is the same, is the language).
So, once more - thank You :)

[@josephh8117]

Doing this on ASP.NET in .NET 6 and I had to use "@Html.Partial("_Header")" instead of "@RenderPage("_Header")". Seems like something to do with the new framework. Not *100% sure that I translated everything you did over correctly in the new version but I was able to replicate most of your results. TYVM for this!!

[@shishirdonde]

Extraordinary. Now I know what partial refresh is. Thanks a ton.

[@kasiakordys266]

That is exactly what I was looking for. Great video.

[@a.f.r.nunofficial9585]

AJAX starts at 23:47

[@martink4975]

Nice and easy Ajax example. I respect the onclick tip you added inn!
Quick question would you do this in ASP.NET Core?( or is it .NET5 now :P).
I am new to ASP development and get confused sometimes about what works where and best practices.

[@juanalbertoboada]

Hi Shad,
Amazing tutorial.
This was one of my doubts if it could be done, you solved this doubt for me.
I have been reading a little bit and I have found that many sites recommend the use of ViewComponent instead of Partial View, I am still reading to know what a ViewComponent is, knowing the difference between Partial View and ComponentView, and how to work with them.
Do you have a video or videos explaining ViewComponent?
Sincerely,
Juan Boada

[@bravedeveloper]

Thank you bro, your explanation is quite smooth. Regards, bravedeveloper.

[@jenyaz1303]

Thank you, excellent teaching style

[@amarpanray]

Excellent. Thanks for the tutorial.

[@castor.fiber79]

great tutorial!

[@rexworthington881]

2:26 You were getting ready to say "bullshit" and caught yourself LOL

[@thebambinofan]

i like that sh.... stuff

[@rebornmanga]

This made me snot laugh!

[@MrMattberry1]

Great video thanks

[@shadsluiter]

Glad you enjoyed it

[@jono261970]

Hi, Great Tutorial. After adding the AJAX functionality the customer details are now appearing on a new page? I have checked the UpdateTargetId and it is the same as the Div Id. I'm stumped. Any ideas what I have done wrong?

[@frankstar366]

This could be because your links to the libraries on the _layout page are in the wrong order, jQuery min must be before unobtrusive. i.e.

[@stevemcqueen2887]

Unfortunately he builds bugs into his code to "troubleshoot". This means when you make a mistake yourself, you end up looking through the video and typing in his bugs.

[@MrJohn2475]

I am getting an error when I create the first view, specifically in the second line "Layout = null;". The error reads as CS0103: The name "Layout" does not exist in the current context. Any ideas on how to fix this, I have searched for fixes and none have worked. Anyone has the same issue? Solutions?

[@fralitex2760]

thanks sr.

[@xxapoloxx]

This makes ajax so much more complicated than plain html...

[@paulobarros2993]

Excellent job. Thank you.

[@shadsluiter]

Thank you too!

[@AlThePal78]

I just have one question for now why didn't you do this with vs code because I dotnet add ef etc.. and all this stuff happens and all I have to do is change the layout. It seems like more work this way

[@AlThePal78]

This is not an MVC i am guessing

[@mshuffle7024]

Thank you, sir.

[@AlThePal78]

I really wish I could have you look at my code and help me this shit is driving me bonkers and no I am not using razor pages. My school sucks for not teaching me how to do that

[@haonrolyat]

come on bro - say that you're using ajax form and not ajax in the title. form submittals are not that same as straight up ajax

[@anayatabuelgasim6043]

Sorry too long for me