C# Web Application Create your first web app in C# with ASP.NET MVC

hi in this video I'm going to show you how to set up and configure your first asp.net project [Music] my name is shad Schlueter and I teach programming at Grand Canyon University in this video I'm going to show you how to use Visual Studio and start your first project and look at some of the details on what the options are so you can see that I have a Windows installation here and I have installed Visual Studio so I'm using Visual Studio 2019 so let's get a project started and see what the options are so I'm going to choose the button that says create a new project and when I start it I'm going to search for something called asp.net and look at all of the options what am I going to pick and what's going to work best so let me just go through some of the things that are here and maybe what you want to choose and maybe what you don't so I'm not going to choose this first one called the core web application asp.net core is for multi-platform in interactions so you can run this on a different operating system than Windows what I am choosing though is the second one called web application dotnet framework however this also is a problem because if you notice the language it says this is for Visual Basic no there's nothing wrong with Visual Basic but the class that I'm going to be teaching here is in c-sharp so I'm looking for this one called asp.net web application and it has c-sharp listed here so let's go ahead and click Next now what's the name of my application so I'm going to call this thing my first app now you notice the location of where the project will be saved so by default it puts it in the users and your user names source and repos folder so if we wanted to find that we could go and browse so I'm going to look at my hard drive here and I'm looking at the C Drive and you can see the users folder and then we have my name and then we have something called source and then finally repos so let's see what's in there you can see all of the different things that I've already created and they're in this folder so if you want to find your application and where it was compiled this is where you go alright so that's the source that's the place where it's going to be placed I'm going to check this to say put it in the same two and then you can choose the dotnet framework and the version you want so it's probably wise just to pick the most modern one that's available and so at this time it's four seven two let's go ahead and create it now you're not done with your options what can you do that will make this application run so I recommend that if you're starting a project you can choose the MVC format this will give you some sample pages to look at you'll see what a controller is what the views are and it'll help you in learning just by examining what's already there now also the authentication here so no authentication is set which means is there's gonna be no database in the background so let's choose what I have here I have MVC and no authentication let's go ahead and click the Create button okay so the project is up and running let's examine some of the things that you'll find in an asp.net application so you get this introduction that says welcome to asp.net but let's look in the folders here this is probably where you're going to be spending most of your time as a programmer so if you don't see solution Explorer you can probably show that under the View menu I believe so view and solution Explorer should be in here somewhere it's the first item so it's probably open already so let's go ahead and take a look and see what's in here so the folders that you're going to be most interested in are things like the views so what is a view well a view is a page so if you were to think about what a HTML page looks like this is what this is so if I were to open up about you can see some HTML code you can also see some other things with an @ symbol let's go look at the contact page you can see that there's some HTML code there as well as the index which is the default page to start with so since we have those three already on the app we can go see what it looks like I'm going to choose the button that says eye is Express so when I click this it'll launch a web browser now there's a web server built into Windows and so it's you don't have to install some kind of an Apache server or anything you're working with Visual Studio on Windows it will automatically launch this iis which is Microsoft's web server you can see the page that's coming up is localhost and it has a port number slash home slash index which is one of these views that I just showed you a minute ago now my program just launched and you can see we have a page let's go expand this and at the top we have home which is what we're looking at about which is exactly what we saw in a minute ago and contact and so those three are the views that we just looked at in the project Explorer let's close those and make some changes so when I close the web browser the program stops so let's go into the about page let's see this is to provide more details all right so I'm going to add some details it looks like it would be pretty safe if I just change some of the HTML code and added a new line let's go ahead and run the program and see what comes up now so you can see when I launched the program it automatically shows the view that I was currently editing so I'm on the about page this is called a route home slash about and you can see I've added some new text and it shows up here on the website the other pages are still available now there are two other parts to the web site that you should probably be aware of right now let's go into app start and see what's in there there's a important file called route config and so the route config is the program that will capture the URL and direct it to the proper page so you can see that the URL is set in this format it's going to look for something called the controller and then an action so for instance home slash about so it's pointing to something called the controller named home let's go look in the folder called controllers and there is a folder called home controller and you can see that there are different things called action sults and we are going to get into these in the next few tutorials I'd like to show you one more thing and it's the debugger so for instance we have this thing called a variable called a viewbag let's go ahead and put a stopping point right here so I'm going to click in the margin and when I run the program this will stop and it allow me to explore the values of these variables so we are on the debug mode and I'm going to choose go again so the website launches and we are at the index page so I click on home and nothing changes I click on contact the contact page comes up but now when I click the about button the program stops and we are at the code area where we can explore this is what a debugger will do and you can see that it is highlighting the place that I'm at so let's go down and check out what some of these things are we have something called a view bag I'm going to step over this with a step over button and now when I go look for view bag in the list of variables or hover here I can see that there is a bunch of properties so all of these variables that you work with are going to be explorable so in this case a view bag obviously is showing something with a property called message and its value is listed here no surprise since it was defined right on this line but if you're having trouble figuring out where the variables are going wrong when your programs running the debugger is the way to go so I'm going to stop the code and then I'm going to remove this debugger stop sign so in the next video I'm going to show you how to work with a controller and create new views that are your own custom work

Channel: shad sluiter

Views: 92,065

Rating: 4.9113221 out of 5

Keywords: .net, C#, Visual Studio, code, programming, tutorial, course, training, how to, C# course, C# training, C# tutorial, asp.net, .net core, asp.net mvc, razor pages, mvc, c# web app, razor, asp.net mvc 5 tutorial - step by step, asp.net mvc tutorial, c# web application, c# web application tutorial, asp.net web application tutorial, visual studio, web application

Id: 5vdPYahb6Cc

Length: 8min 50sec (530 seconds)

Published: Thu Jan 09 2020