Learn Visual Studio Code Editor for ASP.NET MVC Application - Complete Tutorial

hi guys welcome to digital Tech join I hope everybody is doing good and in this video tutorial we are going to learn about Visual Studio code editor so we are not going to only learn about Visual Studio editor but we are also create a small database driven application using asp.net or using visual studio code now what is visual studio code so basically Visual Studio code is a very popular and free open source editor developed by Microsoft and it is freely available you can just type in vs code like I'll just show it to you in your Google you can just type in vs code on your browser and the link that comes up as Visual Studio code is your editor now here you can download the editor for Windows or you can download for Mac or Linux it's freely available and it is a very Advanced editor and it is not only used for c-sharp it is used across other languages as well so basically uh there are a lot of developers who prefer writing I know uh they like to use a very lightweight core editors and I to my experience it is one of the most uh you know very lightweight agile and with loaded with lots of features which I showed to you it is basically a cross platform a browse editor it is very Innovative in design we'll see that I've already downloaded it and I have downloaded from Windows and then it is provides a very intellescence code completion similar to our Visual Studio editor then it has various extensions then I'll show you how to download the extensions and you yes debugging capabilities you can also do version controlling obviously you can link it with GitHub so that you can you know upload your source code and GitHub and also use branching and you can merge and view all the history of the code and everything so uh in in a nutshell it's a very fantastic uh no editor and we'll see how we can go ahead and create a asp.net application using a visual studio code so I'll go ahead and just start my visual studio centers in the run I'm typing vs code since I've installed it you can see it is appearing in my windows taskbar so I am open so yeah this is a dashboard this is a starting screen of vs code now I have used the theme which is dark and if you would like to change the theme just click on the extreme left bottom here you can see manage icon you can see whatever you click on that and then you will be able to see profile uh and uh and these are the settings which you can use so I'll go ahead and you know show you how to change the profile so basically here you can see just what just one moment here settings yeah so this is yeah so this is just click over here themes color themes and uh when you click on so I'll just show it to you again so when you click on this icon manage there's an option called themes and in themes there is uh option color you click click on that and this is a command palette where you can see the options so if you want a light so you can see the it changes similarly there are other options you click on themes color there is something called a dark model which I had used so here you can go ahead and select the tips and go back to the one which I had so I selected Douglas so this is the option so this is how you can change the themes and uh I'll just close this window now on your so this is this is the option the first option on your left top uh just underneath the file option there is this is a project file right now uh there is no projects open and I have not created any project and this is a search option then this is Source control like if you want if you have a git GitHub account you can download that and you can log into the GitHub and all your code will be synced in the GitHub then there is something called run and debug which you can use it later will show to you these are the extensions that we will require to download it right now I have not installed any uh extension these are the popular extension that that needs to be installed and this is based on your choice and your programming language I'll show you since we are going to develop uh asp.net application and we see we will be using most of the C sharp functionality I showed to you so this is how you click on this option and you download those extension and there is two things one is the terminal so this is a new terminal if you click on new terminal here you get the terminal window where we'll be writing the command to create a speed.net application will be writing command for migrations and uh building the application and everything so this is what we will uh we will use this command prompt so this is a terminal and second is this View and in view we can see this command palette so this is required where we can download the new good packages and there are a lot of other commands that we can use from here so these were the important components and also show you uh how do you set it up so now you need to click on the files and select open folder now this is my working directory so I am going to create a folder over here saying uh Book World Amazon books so this is a folder name and I have selected so here you can see this is under Amazon mixed under this so whatever project we will be creating will be created under Amazon projects so this was a high level settings of this editor and we will see now we go ahead and we will also see how to create a project using command prompt and then we will create a database and we'll create a crude application which will fetch the record and create a new records so all using are editor so let's start by installing the extensions so we click on this extension button and now we are going to search so our first search music package so you get so this one you get package manager you need to install this JM Rock I'm going to install that nougat package registration is required because we need to install Microsoft Entity framework core and database and other tools and design package managers so this tool will do that so once that is installed then we installed C sharp and make sure that so there are two things one is C Sharp dev kit so this is a preview version uh it's a bundle so we have to install this then we'll also install micro C sharp from my place so this is installing once we install this also get automatically installed uh then we haven't installed uh dotnet install tool so dotnet install tool for external so this is one this is already installed in my visual editor but this is also need to be installed so these are the important things that uh in order to make sure that your project folders I'll show you the demo so let me first install this libraries let me just refresh it so now when you refresh it you see in you get packager Intel Intel code and C sharp dev kit dot net tools for everything is installed so since I installed C sharp dev kit it installed the other components as well so this is the first step now let's go ahead and click on the terminal view so I just deleted that so let's go ahead and pull that terminal View so here you can see I'll just close all the metals to so that it is clear and uh here you can see the terminal windows open and this is my project folder it's time to create now our project so the command for using that is dotnet so dot net when you type.net you can see that it is uh giving some option and we can use.net H so it will give you the L now if you record look at the commands there are a lot of commands over here so here there is a command to build and is the command to add a package uh you can add a package directly by this command prompt then there is something called new which will be using new as create a new dotnet projector file so all these commands are there I recommend that everybody to go through it once right now whatever I'm doing is basically we are creating a project from scratch and we'll be using migration command and other commands also so this will be helpful but I just want to show so this was something or that you can want the help from command Pro we can do that then there is dotnet info iPhone iPhone Info so this will give you the information like what are the versions what are the dotnet type installed and what is the SDK installed uh what is the version of SDK uh dot net so we have.net 8 preview version so we can we come to know uh you can also type in dotnet and you can see version so this will also give you the version information only and dotnet help.net info gives you uh not only a version information but it gives you the SDK details as well so that is what that's the difference okay guys so now let's time that we go ahead and create a project so in order to clear the screen I see clear so guys we will first fire a command to create a new project uh but just before that make sure make sure that you have selected the right folder now in my case I have shown you I have gone to the folder file folder and this is my working directory directory vs code and here I created a folder called Amazon books in settings is nothing so when I create a command now this will be the project my project file uh yes Amazon books but you can also specify another project solution name for now I'll just simply use a command to create a new project.net asp.net ABC project the command is dot net new MVC [Music] you can see on your left hand side instantly those required files are created folders and files are created we have controller model object properties views and we have WWE root folder like similar to the one which you create in in Visual Studio IDE now if you go back to the folder you'll be able to see that these files under the vs code which is a working directory Amazon books here you can see it's created a solution called Amazon books because I was inside this directory and I just created a command called.net new MVC but the.net new MVC also takes it parameters as name and language you can use that and create your own names so this is the project that is successfully created and we can see the same over here in our editor so now let's go ahead and run the project and see the output a default page so let's click.net and the command is run so first it is building here is output you can see the output over here never got put so you can see all the outputs over here simulator which we have internal yes so dot net run it is successfully a building and now it is it is listening in Port 5245 and here if you click on the link so I just follow that link and here you can see our page is loaded so we successfully created one project called Amazon books and we can see the appearance is Reloaded now in order to cancel this command prompt you can just say Ctrl C and it will come back to your [Music] clear the screen so now let's go ahead as I promised I will show you how to create a database driven like in a crude ways operation but I am just going to create a database and finish record and show it to you uh and we will see will be just we'll take an uh just be comfortable with these things okay there is one more thing I just wanted to show you now if you look at this project left hand side directory this does not look like a folder so in order to make sure that it exactly looks like an IDE normal asp.nide there is an extension called material design so just click on extension and just type in material and here you'll be able to see material icon themes okay by Philip just install this and as once it's installed okay so I have selected this theme and once you just refresh it go back to your projects file it and now you can see it creates folders so it looks similar to our Visual Studio IDE so now everything is set now it's time that we add the required code so that we can work in database so let's first go ahead and create a model so right click on the model and say new file let's call this as book books entity dot CS so this is a book entity.cs so we can take the names frames from here we have an error we model default created just copy that namespace so that we don't need to any type of mistake so this is our namespace and we will be creating a class over here so we say public class so you can see intelligence is working fine and we are able to get the addresses because we installed the required libraries so here I'm going to Define some properties crop ID and this will be an ID and [Music] so this is one and then we are going to create a string title I just copy this author ISDN so this will be our author and this will be our ISBN okay this is a model class which we created now let's go back to our create a folder called data which will have the application DB contest class so we click on the Amazon Project there is a just like next to it we have something for new folder and this is created under models not under models but click on that and okay so we create a folder called Data now this folder will have a class called application DB contest dot CS now we'll copy the namespace uh so that we don't do any type of mistake so we just copy this name go back to application domain and this will be data now we'll create a class so we have public class and this will be application DB contest and this is a class now before we proceed and writing the code for connecting to database two things we need to do first we need to define the connection string so I save all and I'll just try to build it once.net build [Music] here you can see there is three warnings but there are no errors you have to build successful but there is no errors so let's do that now let's add a connection string to a database uh into the application so I'm going to open app settings.js and here I'm going to enter connection string I'm going to need default connection and I'm going to specify the connection string over here so I'll just open my visual studio management and just take the server name so I've installed a SQL Server management which is freely downloadable and it is an Express Edition it's a free edition so click on connect and this is the server name so I'll just copy this okay I'll come back to editor and say server and I paste that server name Okay so [Music] okay this will be double two slashes and then database you can name it as this will be created new so we can name it as Amazon books DB then we have integrated space security which is true because we are using Windows login and then trust server certificate is true this is important so this is a connection string ready so this was a connection string so that you can have a good look on that so this is a server name then database this will be created new using our migration command and integrate security because we are not passing username password on a database we could do that that simple and then finally very important tag trust server certificate is equal to true so this is the connections thing we have created I am just settings now let's go back to our application difficult contest and here now we need to install the packages so click on run we had installed this package called the newer package extension sorry so we're going to use that extension and I'm going to download it so click on The View command palette and here we are going to say nuget package so new get package you just see there's an option called add package you click on that so once you click on that you will get this option and here you need to type the entice I'm just typing entity will come so it will show you show me all the options for liter entity here you can see Microsoft Entity framework so the first one which I want to install is so core so Microsoft Entity framework core is something that will install so click on that and relax for the version select the 8 8.00 preview version select that and here you can see the option successfully done I'll just clear the screen so that five so this is installed now let's go ahead and install the another one so we say nigget package so something that you have to type and again like entity and I'm select SQL Server now in livestock from version I select that it's installed when I select packaged again entity [Music] I select tools this time so tools is something that I needed because I'm going to use migration so we have installed the required packages now let's click on explore option over here go to application DB contest and here this application DB contest will Implement DB contest class now this reference we need to add in order to add that we have to DB contest and this will use using Microsoft entity [Music] what we need to refer so now this will work so here we have to add an additional code which we will do it will add a Constructor foreign by default so I just select that I select this and this will be colon based options this is all happening because I have used the required Library so this is the and second is that we are going to define a DB set so this is the name of the table so public DB set books so this is DB set and this is not books it's books entity this is a model class and I will have to refer that also over here so I'm going to say using Amazon books Dot models [Music] so now this is correct over here and this is the name of the table so now if you go to application app settings this is the name of the database that I want to create and this is the name of it in your application DB contest this is the name of the table that will be created so we have used a couple of codes over here and before we proceed let's let's try to make sure that our build is successful so what I'm going to do is that dotnet build [Music] so there is one error let us fix that so type or namespace name application could not be found so this is a happening where in the so let's we can just click on this oh application and then programs okay so let's go to our class and make sure this is right using books data using books media entity framework code so this all looks good I'll just rebuild it once so so let me clear it and not net build [Music] now the same error so guys I figured out the issue the issue was here in the Constructor so we have a class called application DB contest and we had created a Constructor but then the DB contest parameter that I am passing I am passing wrong it should be application DB contest so that was a mistake so since I used intelligence I did not notice that so this is a code and now let's build it and hopefully there should be no issue dot net build [Music] yes so yes we have warnings for properties but the build is successful so now there's one more thing we need to do before we run the migration command is that we need to add some code in our program.cs here we need to call the connection string and the application DB contest class so for that let us actually use the namespace like a new user references so first reference we need to use all this over references will copy it go to programs and we'll copy it over here because we require all these references now just before where app builder just right above it then we need to write a code so we will write Builder dot Services dot add BB Dot add DB contest and this will be application DB contest this term will write the current class name and then Open Bracket and options and then we see options dot use SQL server and inside that I'm going to say Builder Dot configuration dot get connection string default connection and let me close the packet so this is a that Constructor code that we need to write we are going to inject basically we are injecting the connection string in the application DB contest class so let's make sure that a build is successful so I'll just save it and just run the command again and let's see okay so there's 32 errors my God let me just check what went wrong so I don't need this namespace so I'm using Amazon models because that's required and then I should be using Amazon foreign books dot data and then the core entity so let me correct those reference I have done that let me just run it again so there's now one error web application Builder does not contain definition called Services okay so yeah this is a typo error It's s Capital Services similarly let me just check Builder Okay so this is right now I'll save it and I'll run it again okay success so this is successful so now if you go to our database we see there is no database called Amazon books so we are going to fire now the migration command create a table and the database and the table and I'll proceed with the further execution of the project so let's go ahead and execute the and in in migration command sorry so let's go to our editor terminal say clear and say dotnet EF Entity framework migrations and say add this is a initial setup DB setup and let's run the command so Bill started and succeeded so that's fine that's the warning message any as you can see the migration folder is added and now the final command to create those database and table ef.net EF database and update and now it will execute the scripts created in the migration folder and everything looks good yes and we have successfully created the database and the table let's go to our database now and try to refresh it so we'll just refresh it and here you can see Amazon book DB is created and will be also having the tables called books with the fields that we created so here you can see ID title author all the fields that we wanted is created we'll just go to the design view it's a primary key and we'll make sure that it is identif column yes it is identity column since the primary so now our database and table is ready it's time that we write the code so it's time that we call the controller and create views and display the record so we click on controller and right click on the controller say new file and say book controller dot CS okay now go to click on the home and you can copy the namespace over here just go to books and copy the namespace over here which is correct and now you can also copy this and class headings and just test and add a closing tag and this will be I'll just re remove home and enter book so this is it our controller class is already I always whenever I'm working with vs code editor I make sure that I just do the sorry this is not the command Ctrl C in this case it's a dotnet build I just want to make sure that the build is perfect yes it is there is no error now let's add code to our controller so the first thing we are going to do is declare a DB contest variable so I'm going to say private application DB contest and this will be our DB so I'll just refer this over here using Amazon books dot data fine so this is required because we are using this class I'm going to create a Constructor so we are going to see prop The Constructor is created and I'm going to use the application DB contestdb and inject that over here you so this will be DB and this is I'm going to initiate this variable underscore DB that I created in my Constructor so my DB connection is ready now let's go ahead and create a first index so let's go ahead and see it public I action result and this will be index okay and this will return a view now we need to write a code over here and we will also create the required view so first we'll write the code and then we'll create the view I am going to save it I just build it once and so we are done we are in a good shape so now I'm going to write a code over here so index will return all the books from a table so I say where books and it will be underscore DB dot books and this will be the table name and this will be to list and then we are going to return this to our view so this is the first code let's save it build it once and now we are going to create View so click on views right click create new folder first and say books because our controller name is book so you said book and then you are going to right click on book say new file I'm going to say index dot CS HTML this is a view you can see it is same view now go to home copy that index CA system will copy this go to your book and inside book the index and paste it so this is not so this is list so this is books and here you have to write our code to display the record [Music] to save it and just for now I am going to just say books and let's call this and I'm going to save it so let's call this now so this is our Index this should be able to open this page over here so let's build it and run the application once so dot net run I'm going to run the application so this is open over here I'm going to click it this is opened over here now I have not added the link but I can call the page so I say slash book which is a controller name and enter so okay so let me just fix this up foreign go back to my code and so since we don't have any records in the table I think so that's the issue let me just check [Music] I'll just check the references are correct or not yes everything looks good I'll just run it once again.net build and dot net run [Music] and if the error comes so check the application DB contest class let me just try it once and this is book and enter and we still get the same error so it says okay so let's go and check the application DB contest I'm sure there's a let's take over here so click on application DB contest class and this is our Constructor and this is a DB set entity books okay so here we have only get we have not used the set property so this was a issue the book entity should also get as well as set values so this is representing our table and it cannot be only get it has to also set value so so here the problem I have identified it I've saved this now and I am very hopeful that now the issue should not come I'll just cancel this dot net build once again we will dot net run [Music] so okay so we'll click on this link if the link is here active just refresh it and once let's click book slash so our index place is now loaded so what you are going to do is that we will pre-populate the information now right now our database table does not have any value so we'll insert that let's open the table and add some records in the backend so ID is title I am going to say number is we'll have one more entry C sharp by Microsoft and this is another added two records so this both records should be visible in our front end now in order to be visible let's edit the index page and let's add the HTML code so in the HTML code I've already added model list and entity this is required then this is the title this is the books uh then we say BR and we add div class and this will be our row and here we are going to add one button so call and B12 [Music] and this will be a asp.net action attack helper so this will be a method action method in the controller class book and this will be a controller a controller name is book and this will be a button vtn vtl iframes success and this will be create so create book this will be any other button now so we have added one div and now we'll have add one more div and we're going to say div row sorry div row sorry div plus row [Music] pull this property window down and so that you can see the code and here I'm going to add a table so we are going to say div class call that MD iPhone 12. and this will have a table class table [Music] and this will have adder we have row TD [Music] this will be book title [Music] I just copy this and this would be author and ISP so this would be author name [Music] and this will be ISBN [Music] so now after error we add a body so it's D body [Music] okay and here I'm going to Loop in so I'm going to say at the rate for each where item in model [Music] and here I'm going to say TR d at the rate item dot title and then I'm going to just copy this and change it to author and ISBN fine so this is a code so I'll just save this and I'll say Ctrl C and then I see a DOT net build [Music] .net then [Music] so click on the link and now I'm going to just see books and enter and here you can see we are able to create display the record directly so this is a button this is a create button I'll just show you how to create that in the in the controller and then you can I'll just quickly copy the HTML code and show how to add also so we were able to successfully fetch the record using our vs code basically using an IDE vs code now let's go ahead and quickly do the create code and complete this tutorial so for that let's go to our controller and add the code to new add new records so let's create first The View public eye action result because we have given a name as create and this will return view as this phone so this is [Music] okay fine so this is just when we return a view now let's right click on the views folder and on the book folder and right click and say New View and this will create HTML [Music] let's copy this basic code so here we don't uh we will copy this but we will have a different HTML so we just copy that code over here and just to remove this list because we don't require a list now we require just the entity class this will be not books per tuning adding new book and we are going to remove this HTML and add another HTML so I'm going to just copy paste that estimate just to save our time so guys I'll just paste that HTML code over here so that we can quickly so this is a code it's a very simple code there are a lot of videos that I have created you can see those quotes So basically this is uh form tag which is taking action as create book which is a method that we will be creating in our controller this is a controller class so this is not books this book the method is post and then we are taking title input and author and ISBN input and then we have a summary of exception if there is any then there is a button okay to submit it and there's one more button index that will move back to our index or listing so this is an HTML view let's try to build it once Ctrl C so dot net build [Music] so this work now let's go to our controller book controller and here I'm going to add a method so this is a view which is created over here now when you click on submit this view calls a method called create book so just copy this go back to my book controller and create a method so this will be my HTTP post method so I'll just added a tag over there and there's a public eye action uh I action result which will be create book and I'm going to pass books entity as book okay and then I'm going to enter so here I'm going to write my code a single few lines of code which it says underscore DB dot books books dot add book then underscore DB dot save changes okay and then I'm going to redirect return redirect to action index that's it let's save this all and just build it once okay so we got an error let me just check what is the error so let me just check the code here I see everything okay so here it's books dot it's a capital P so books dot add so this is the name of the entity so I'll just save now and try to build it once again so let me just check and bring that Bill I'm sure this time it should be built yeah so we have successfully done with it now let's go ahead and before we start the program again we just go to views shared layout and here I'm going to change the layers later up to type in so here the first install this is books so okay this will be booked now the controller index is and here this will be books [Music] so let's save this save all and build it once and then run the project .net run okay so click on that now click on books so you're able to see the books now I'm going to click on create this is called it index I'm going to write one book name so I say digital Bank by Skinner this is the ISBN number and click on create yes you can see digital bank is created our code worked successfully so with this we complete our tutorial guys using visual studio code I showed you very basic steps of creating a project I actually shown you how to introduce you with the vs code editor I showed you how to download the required and install the required extension and packages and also created a database driven application so that there's a lot of the confidence that you gained from this video on creating basically a project using vs code so guys I hope you like this video and please do subscribe my channel share my channel link with your family friends and colleague and help us to grow our digital Tech joint Channel thank you thanks a lot for your time

Channel: Digital TechJoint

Views: 3,754

Keywords: VSCode, VisualStudioCode, CodeEditor, DevTools, IDE, WebDevelopment, Programming, SoftwareDevelopment, LearnToCode, DeveloperTools, asp.net, asp.net mvc, entity framework, database, cross platform code editor, visual studio 2022, visual studio preview, ASPNETMVC, MVCFramework, ASPNETCore, DotNetCore, CSharp, RazorPages, ModelViewController, VSCodeMVC, CodeFirst, AspNetCoreMVC, DotNetDevelopment, WebDevTips, EntityFramework, working with VS Code Editor, VS Code Editor, Visual Studio Code IDE

Id: ChhupWwNCgo

Length: 48min 12sec (2892 seconds)

Published: Sat Aug 19 2023