ASP.NET Core Crash Course - C# App in One Hour

hey welcome to an asp.net crash course in this video in about an hour we're going to build a complete website that has a database application written in the c-sharp language so here's what the application is going to look like we're going to build a jokes app and this will allow you to enter in jokes and their answers so that you can keep a record of all your best humor this application is a basic crud application so crud refers to create read update and delete from a database so we'll create all the forms the website and the database that makes it all happen in the database we'll be able to search for the jokes that we create and we'll see the tables and all of the forms that go with them my name is chad sluter i'm a professor of computer science and software development at grand canyon university in phoenix i'm really glad to be here at free code camp and provide another resource for you i endorse free code camp i've used it in my classroom i've used it personally it's a great way to become smarter in many things so the goal of my career is to make you a software developer and free code camp is a great resource so let's get started here with the next lesson let's talk about this course and see what's in it for you we'll talk about what is asp.net core we're going to talk about what means the model view controller design pattern we'll set up a database we'll do registration login and page security and then do some database querying so all of these things are what's ahead so let's talk about whether this course is right for you it's going to take you about an hour of video time but it is really an intermediate level course there are some things that you should know beforehand when i teach this course it's usually the third one in a series on the c-sharp language previous experience with object-oriented programming is probably something that you should already have we're working with a framework asp.net is a framework using c sharp so you should understand the language before you try to build a framework frameworks are somewhat complex you should have experience in setting up databases you should know what a table is you should look at some sql queries and know what they are and be able to design them lastly we're going to work with html and css and javascript so you should know something about building web pages already so if this looks good for you let's continue on so what is asp.net core and why would you want to use it well microsoft developed c-sharp and this framework to build web applications and so if you want to build a website with a database then this is a good tool to use there are competitors out there of course you can build framework applications in java using spring php laravel python the language python with flask you could work with javascript with nodejs and express so all of these are similar solutions and this is a popular one asp.net will get you a real job at corporations that create enterprise level applications many students that i've taught before have well-paying jobs in large companies using this exact technology dot net is microsoft's solution to develop software of all kinds since about 2001. it's very similar to what you would know if you work with java in the java virtual machine it's a runtime environment that you can create applications for on multiple platforms asp stands for active server pages it's kind of a leftover term from earlier technologies in the early 2000s but they still keep asp in the name the word core is somewhat new to microsoft core is the open source version of their web development kit it's cross-platform you can run your applications now on any server whether it's linux you can write your applications in linux or mac or or windows so core is microsoft's open source cross-platform solution to developing software dot net is their unified platform to build almost anything in software land desktop applications web applications hosting on the cloud creating apps in mobile gaming internet of things artificial intelligence microsoft is a very powerful player in software development and net is their solution so in this course we're going to focus on asp.net which is used for building web applications how does c-sharp fit into this well net is not the language that we're talking about c sharp is one language that is used in this platform so the dot net framework consists of a runtime engine and libraries for executing programs in a compliant language so c sharp is one language it is by far the most popular language but you could write it in other things as well but we're going to use c-sharp because that is microsoft's premier tool and their language of preference for this kind of work so why do we need asp.net and why did microsoft invent it well about 97 there was this change from desktop centric computing to web centric computing so microsoft was firmly in control with their win forms and clients on their pcs and then the internet happened and so we went from building form-based applications to web-based applications and asp was their solution so net is very similar to java in many ways as you might know java was written as a language that could be written on one platform and executed on any platform and so they had a java virtual machine well microsoft created.net pretty much an answer to that so asp was somewhat similar to what you would see today in php it's an it's a language that runs a dynamic website the net part is similar to java that it's compiled on one platform and can run on many platforms so you combine the two and you have an active server pages and net as the compiled environment and so asp.net is their answer to making web pages on a web server so here's what an asp page looks like you can see that there's some code here that is a mixture of html and something that looks like c sharp and so we would call this razor this is their markup language that is able to create something that is dynamic so every time you click on an item in a web page you get a custom version just for that user so probably hooking up to a database and showing information in a dynamic option so this platform is a end-to-end solution it runs the back end and the front end and so we'll call it a full stack environment so you have a database management system you have business logic in the middle and the front end with html it also can be combined with popular front-end services so if you're into javascript programming such as react angular or vue or mobile applications that could be your front end and you could learn your asp.net tools to manage the database in the back end so it's your choice you can choose the front end and the back end you can use them all together or separately so it's a very flexible programming environment let's go ahead and start building an application in asp.net core all right well let's get started on the next section in our course outline we're going to focus on this line here called model views and controllers or mvc and so we'll actually build an application that you can test what you see in front of you is the finished application it's called the jokes app let's go ahead and look at some of the features so first of all i click the link called jokes and you can see that all the jokes that i've put into my database appear let's try the first one why did the chicken cross the road let's click the details link and of course the answer is to get to the other side if we want to change this we can click the edit button and then we're asked to log in so i put in my username and password i can log in so instead of crosstheroad let's try the word playground have you heard this one why did the chicken cross the playground well the answer is to get to the other slide instead of side let's save that and now you can see the results should show up in the list so now you can see the question is now why did the chicken cross the playground so if you wanted to see the answer you could click details or if you wanted to delete or edit it you could do that let's try the search function and so if i wanted to put in a joke here about jump let's see if we get anything search comes up so now you can see one joke in the search results can a kangaroo jump higher than the empire state building and wait for it the answer is of course the empire state building can't jump let's go ahead and back to the list and that one's so bad i'm going to just delete it right now and yes it is gone all right so that's the application we're going to build let's get started with a new project and i'll show you how to create these forms in an automatic fashion so you have to have your computer set up to work properly to run this stuff i'm using visual studio on a windows 10 computer now there are other ways that you can set this up but this is by far the simplest i'm going to go ahead and create a new project and and choose from the list so there are lots of things that you can develop with visual studio i'm going to select some things like c sharp all platforms such as windows and i'm going to choose web as my choice that narrows down some of the things that i can build the item that i'm searching for is called asp.net core web application as you can see there are dozens of different types of projects that you can build and so what you're learning here is just a crash course of what visual studio can do but let's get started with this version right here and choose next so i'm going to name mine as jokes web app you can see the location is set to a directory on my hard drive you can change this if you want or leave it as the default and click create once you choose the web application you can see there are many different choices on how you're going to build it so i'm going to select the traditional right here it's called web application model view controller and that is the full stack solution you can see there are other options such as if you want to use angular or react for your front end and if you want to choose an empty thing that you can just build from scratch you can choose that i'm choosing this one here because a lot of code is automatically generated for me it's the fastest way to get started now over here i'm going to change the authentication option right now there is no authentication which means there are no databases no user accounts i'm going to switch that because i want the computer to generate as much as it can for me and so that i can get started quickly now i'm going to also select individual user accounts so that will create the database and it will set up tables for me now if you work with an enterprise authentication system you might want to select one of these other ones but the individual accounts is very very common let's go ahead and choose ok now you should see that this option is checked we have configured like this on the other side and let's go ahead and choose create now now what we're creating is a predefined system that's going to have a lot of code generated for us so let's take a look around and see what asp.net generated for us first of all if you're familiar with visual studio this will be similar to projects that you've done before we have a solution explorer it shows us all of the code that's been generated for us and don't worry we're going to look in each of these folders as we go through the tutorial and you'll learn what they do you can see on the other side here we have a sql server object explorer and it says we have a sql server up and running so that's all built into visual studio when you get started now if you don't see any of these things you can go to the view menu and you can find all of these things on the choices here so you can show them or hide them under the view menu at the center you can see that there's a welcome page and the dotnet core documentation is something we're going to be looking at so this will bring you to microsoft's official website if you're done with your application you can connect it and host this application on azure which is microsoft's cloud platform we're not going to get to that but if you wanted to you could extend your application to run online ours is going to be a local solution so we will be serving it on a local host or a local web server which will only be used by you the programmer for right now i'm going to close this and then i'm just going to start by clicking the green button that says iis express that stands for information internet server it's microsoft's web server and it will automatically launch and compile everything that we see in the solution explorer so you can see that my application already launched a web browser pops up i'm using chrome as my default browser and so that's why you see chrome here and you can see the web service is now starting at localhost so there's a web server installed on this windows machine and it tells me i'm running on this port number and then i have joke's web app open so there are two pages that are automatically designed for you the home page and the privacy page there's a registration and login page that is already set up for you now we're going to close the app because it really doesn't do much more than show two pages let's look around and see where those things are coming from so let's look in the folders here on the jokes web app solution so we have important parts here called controllers and views now if you look inside of the home view you're going to see an index page let's open that and you can see that we have the welcome message that appears on our website let's look at privacy and you can see that there is another web page so the views area is probably the easiest to understand for a new programmer these are html pages however they are labeled as cs html so that is c sharp html it's the combination of two languages blended into one page let's start off by modifying the privacy page so it says use this page to detail your site's privacy let's also modify the index page here which is the welcome screen so i'm going to modify the h1 tag which is the big welcome sign and then inside the paragraph tag i'm going to change the sentence to something that makes sense for my application so let's see if those two changes will occur on our website so i click the green arrow for run and you should see new pages appear so you can see the new page shows up the jokes application and i click privacy and i get the next message that i just created so that's what a view is it's a website and it's the html code that you can modify so now we're going to get into this concept of mvc models views and controllers we've just looked at what a view is a view is a web page using html or in this syntax we're going to call it razer we're going to next look at what a model is and what a controller is and how they run so mvc is really a design pattern it's not a language the point here is to create applications that have separations of concerns that means your file sizes are smaller your code is modular and it can be run and managed by multiple people so there are three parts to an mvc first of all there's a model that's a class and so we'll be creating a model for our joke a joke will have a question an answer and an id number we're also going to create views we just looked at what a view is it's a web page and then the most important part perhaps is the central controller so the control the controller handles the logic of a of the computer code it tells the pages when to appear it gives them data that they can show and so that's what a model view controller is let's talk about what a website looks like using this system so the user first of all has a request it says give me all the orders of today's date and the system that you see here this asp.net would interpret that through a router so a router would look at the url and say hey today we're going to look at our date and we are looking for the orders it would send this information then to the controller of your program the controller says hey i'm going to see that you're looking at the route called orders and it has a specific url well then it says i'm going to create a list of all the orders and so it would have a c sharp language that says let's create a list and let's go to the store and get the orders for today well that would have to hit the database and so we're going to see sql statements then that says hey let's get all of the orders where the date equals today it will return that to the model the model will send it to the controller the controller now has a list of data what's the controller going to do with that data well it's going to then send it off to a view and to say hey show me the show orders.html page and here is a list of data that goes with it well then it's going to generate a list that is going to be an html format and send it to the browser and so when it gets back to the user you have a fully formed web page so all of these things in the background are called every time you click something on a website generating a dynamically produced page that would show you today's orders so let's return into our program and see where those things are so we've already looked at views let's look at the controller next so if i go into controllers there's a page called home controller you can see that there are functions in this controller that says things like index so index says return me a view and there's nothing in here to tell us which view it is and so the index page is assumed here scrolling down a little bit further we come to another event called privacy so if the controller says the person clicked on the privacy link send them the link called view which is also privacy here is another event called error and if the error occurs that means the user clicked on some link that doesn't exist so let's go ahead and start creating some views and we'll see how this controller then is able to work hi in this section of the tutorial we're going to create some views so remember that a view is a piece of html code or something similar it usually gets its information from a list of data from the controller we're going to dynamically create this page in using c-sharp and the html language that language we're going to call razer the other part of the page is going to be a model and so we're going to be creating a model for our joke a model is always data related it consists of classes or objects with properties the model will usually be supplied by the controller and sent to the view with a list of objects and so let's see what that looks like in code so returning again to our project here let's open the project called models now there is something called an error view model but we're not going to look at that because i just want to start with the simplest model we can so let's do a right click on this folder and let's choose add and i'm going down to the option called class so inside the model folder add class now i'm going to remain selected with the item called class and then for the name i'm going to call it joke so a joke is the class and it's going to be the central part of our application go ahead and click add so this is the object oriented part of the code so a class or an object is going to have properties now in c-sharp you can create a property with this shortcut prop press the tab key twice and you will get a piece of code that's automatically generated so the class is going to be this property is going to have a public accessibility and the integer is the data type i'm going to press tab one more and i'm going to use id as the property number in c sharp for a getter and setter you just put in the parentheses here and the word get and set so that is the default type of project property for our joke let's create two more items i'm going to have a joke question and a joke answer so this is a very simple version of a class or an object let's save it and now we're going to create some things to go with it the last property that i'm going to create is actually a method it's going to be a constructor so there's a shortcut in c sharp where you can type in ctor type tab tab and it will automatically generate the function called the constructor now for right now i'm just going to leave the constructor empty because it's going to be used by other pieces of the code and it needs to be empty like this the next thing we're going to do is create some pages dynamically the system is going to generate them for us but we need to know that there is a file here that was already in the system it's called the application db context so you don't have to worry about what is in it for right now but you do need to know it's there because it's going to ask for this in just a moment the next step is going to generate a lot of code for us let's right click on the controllers area choose add and controller now the controller is going to be the heart of this thing but it's going to create a lot of other pieces as well so we need to select the right kind of controller so i'm going to choose the third one down i think it is that has all of the options such as we're going to create all of the things to do create add delete and edit then we're going to select the model the model that we're choosing is this jokes class and so it'll create these pages based on the properties of our joke the other part that i've warned you about it's going to ask you for this application db context we'll get to what that is in a minute but we just need to supply it here make sure that your check marks at the bottom match mine that will generate the html code as a partial page so that it'll fit into the website very nicely finally click the create button now this is going to take a while you'll see things that will install automatically and if all goes well we will see several new pages that will be shown on our website automatically okay finally this is done it took me several minutes for the generation to occur but we now have this jokes controller here and we should also see that in the views folder we have a new folder called jokes and so you can see that there are five new web pages that were created there is create delete details edit and index so hours of programming have just been done for you with a single click of the mouse now we're interested to see if this works so let's go ahead and run the application well it looks like the application's up and running we still have home and privacy as our two links but what about the jokes controller we just created it well you can see that the url is about home right now well that's the home controller that's in action so let's delete the home privacy part and just type in the word jokes what do we get we should see a new page that shows all of the jokes in our database well we have a problem because we don't have a database yet so it says uh the database operation failed and so we have some work to do with the database but the pages should be there so in the next section of the tutorial we're going to create the database so that those jokes pages will come to life in this section of the tutorial we're going to take our model that we've built and we're actually going to create the database that goes behind it and so we'll use something called migrations to create our tables let's look at our project to see a new section that we haven't done anything with yet there's a folder called data and you can see that there is another folder called migrations in here let's go see what this is all about so if i click on here you're going to see some code that is about databases you can see that we're generating a table called asp.net roles you can see that there's going to be another table called users there's also a class in our project called joke and i don't see anything about jokes tables so we're going to fix that right now now down at the bottom of the screen here there's an area that is called the output and i'm going to switch to the package manager console now the goal of the package manager console is usually to install new dependencies however we're going to use it for some database management so in this console i'm going to attempt to type enable hyphen migrations and you can see that there's a message that says hey you're looking at an older version of this so old guys have to learn new tricks we're going to now type in the word add migration so add hyphen migration and then we have to give it a name and so the first migration is the initial setup of our database so that's what i'll call it you can name it any string you want but it has to be something descriptive okay so something happens after i type this in let's see what the computer generated back into the migrations folder you'll see a new file called initial setup exactly named as what i just created let's see what's inside here so there is a command called create table joke and let's see what else there is it looks to me like that's the only item so we're going to create a new table you can see that the joke is supposed to have a joke question and a joke answer so what we've just started is something called an object relation mapper you can see that the mapping here is between a class and a table so in this example the class on the right is a person it has an id name phone and age for properties and the orm is creating a table for us which is going to match exactly to that class an orm then is an object relation mapper now there are two options for creating databases with a system like this the object relational map or orm is a popular tool but it's not the only way to do it the more traditional way is called a dao where you create your tables manually and then you are more traditionally managing your database access you write your own sql statements with this and here's the catch that most people that manage databases like the dbas in your company they usually prefer the old-fashioned method the reason why is because they can get more visibility on what's happening in the database not so automated however the orms on the other hand are sometimes preferred by programmers that are trying to save some time it allows the computers to generate data tables without you having to actually write any sql statements so an orm has been called a way for people to write sql statements without writing sql statements it's a shortcut you can use your database tools to be updated using what's called migrations which is right is where we're in the process right now of coding so entity is the name of the orm that we're using right now it's microsoft's orm orms are very good for simple applications such as our jokes app however another version of this tutorial should include how to make daos or data access objects because a lot of companies would prefer you to use that kind of a system when you build your app so now let's return to visual studio and maybe we can understand what this is doing now so this folder called migrations is the language of creating tables now all we have to do to make this happen is type in the word update hyphen database and i'll press enter and i'll let the orm do the magic of creating all the tables for us so it's going to create two tables one is for the user accounts the second is for our jokes it'll probably have more tables than that but that's the basic idea okay i see a message that says done let's go look in our folders to see what happened so i'm going over to the left side that says the sql object explorer if you can't see that you can go to the view menu and get it now i'm going to open up the sql server and it has two different projects here two different databases let's see what they are i'm going to open the first one and i search for databases and it looks to me like we have several of them so i'm going to choose the jokes web app is what i'm interested in let's open that up and then finally tables so inside the tables area you can see that there are several tables that are all about users and then one about jokes well i think we could understand the one about jokes the best so let's double click joke and see what it looks like so as i open up the definition you can see that the table has been created according to the properties of my joke so it has id joke question and joke answer integer string and string and all of that was created for me without me knowing anything about sql so the application is apparently got a database let's see if it'll work now so i'm going to push the green arrow again to run the application all right so we got the app up and running and if i click on one of these things you can see it'll still work on these pages now we don't have any links that are automatically taking us to the jokes controller so i'll have to type in jokes as my url and press enter now earlier we had a message that says your database was not configured however now we have an index page so this shows me all of the jokes that are in my database obviously i don't have any yet so let's click the create new button and it says make me a new joke well let's see it looks to me like i've put some in before so let's try why the chicken cross the road and the answer is to get to the other side so those are typed in let's click the create button and now we've got ourselves an index page so do we want to delete the joke edit or show the details we can do all of those things so each one of these pages has already been created for us automatically the database is in the background so you could say hey we're done with our jokes app not so fast there's a bunch of more features that we're going to add but you have reached the point where you have a functioning application that you created with just a few mouse clicks now some of the features that i'd like to add such as details i would like to show who the owner was we're going to log in and register and link those together we're also going to not give away the answers so right now we've got the joke question here and the joke answer on the same page that's kind of a giveaway so we'll fix that we're also going to limit the access so if i click the create button and i'm not logged in it will not allow me to click a create button so those are some of the things that we're going to improve in the next few videos hey so now let's take a look toward the end of the course here what i have on the screen is a finished product of all the features that we're going to add so you can see that i've created a couple of menu items up here first of all the jokes choice so now we see a list of all the jokes that are in the database also we have a search function so if we want to find something such as the word jump and search we would find an answer it looks like i don't have that jokes question anymore also if i try the create new button you can see that now we are forced to log in so no anonymous jokes are allowed here if i choose log in then i can add a new joke and you can see it's associated with a user id when i create it okay back to our current progress here i've kind of rewound now my application to where we left off just a minute ago the first thing i want to do is add the link at the top of our menu so we want to show the jokes list as a item that we can click on to do that we need to go into this folder here inside of views called shared and then we have a item called layout let's go check that out and see what's in there so as you look through the layout code you'll see that it looks like a bunch of html now this item here is the nav bar that's what we're going to add a item to now if you were to know bootstrap then you're all set to go because bootstrap classes are what you see all the way through here so this is css programming if you haven't done a tutorial on that probably this is going to look strange but anyway let's take a look at the code right here in this section so this is one of the items in the nav bar you can see that it is the privacy link and there's another link above it called the home link so we don't have to understand all of the classes and all of the items in here but we can just modify one so i'm going to copy this and then press enter and paste so now i have three links and the link called privacy is duplicated so let's see if we can modify this to work correctly so first of all a link has an a tag and the item in between is the text so let's just put in jokes now the other item here are some of these asp tags so it says asp controller so the controller name well the home controller is what the first two links are we created a jokes controller either earlier so let's type in the word jokes and then it says what's the action the action on this guy is index now how did i know how to do those things let's go look at the controller and see where that information comes from so i scroll to the top of the screen and i find the jokes controller so we'll look at this and then come back to our nav bar in a second so the jokes controller the joke's controller is going to have a few methods in it first of all the index method here is the item that is going to show all jokes and you can see that it is already got some code inside here so this is database code that was created using the entity framework so let's go back to our uh our code here in the layout so what did i put in here i put in the word jokes why didn't i put the whole word jokes controller well the word controller is assumed so if you type in joke's controller that would probably make more sense at least in my mind but that's not the way that microsoft designed it so jokes is the only thing we need to put then the index is the action so let's save this and run it and test it out okay looks like the app is up and running and you can see that in the menu we have now a jokes item so if i click here we should bring up the jokes list and sure enough there it is so this is the index page for the jokes controller and if we want we can go to the other items from here so now instead of having to learn how to type in the url up there with the jokes we have a link to it in our nav bar so there's one nice feature done let's now add the search function and then we'll add the new list in our in our page all right so here's the next item so i'm going to copy and paste another link so let's change the text here to the word search and i'm going to then change the action to something else so we're still in the jokes controller but now the action i'm going to call it show search form how about and that doesn't exist yet in the controller so we need to go fix that just to show you how this works let's run it and see what happens so the app is up and running we can go ahead and look at the jokes list and we should see the one item in our search now let's click the search item and you can see that we have a not found error so the jokes method called show search form does not yet exist the jokes controller does so we need to create this method and then make it search for our jokes so where are we going to put that method well it has to be in the jokes controller so let's double click on jokes controller and take a look at our index this is our model that we're going to copy and paste so i'm going to copy our index page and paste it and let's uh do this let's do show search form so that's just in the comments that says if somebody types in this url this is the command that's going to happen now the key difference here that instead of the index method we're going to type in show search form now all this is going to do is show a form and then we'll have to put in some information there so now we're ready for the next part it says return a view now i'm not going to send this view any information so it's just an empty view now you have two options here now inside these parentheses we could put in this string called show search form that would mean go find the form with that name but since the method name up here is already that title we can just have nothing in the view item so that is an optional parameter all right so does that solve our problem i doubt it but let's run the application and see what happens so we're going to get a different error this time when i click search we're going to have a problem now that says no longer is it not found but we have a different problem it says here the view show search form was not found so we did get to the controller and it says hey you wanted to show this form there is no form yet by that name so it says i tried to look in all of these folders and didn't find it anywhere so obviously we haven't created it yet so that's why we have this error so i ran it here just to show you that this is a common thing if you're building an app and you forget to put in a piece okay so how we're going to create this new form well we could go down to the views folder and create a folder or create an item called show search form that would work so since i'm lazy i'm going to let the computer do some of the coding for me so i'm going to right click on show search form and the first item that comes up is add view well that sounds handy let's try that then the next screen asks a question what kind of view do you want do you want an empty one or do you want to take one that's pre-programmed i like the pre-programmed idea because it will make a lot of code for us so what's the form name well they already provided is a suggestion show search form that sounds like it now there's a template it says what kind of template do you want so we could have a template that says do you want to create something delete an item show the details edit empty or show a list well we just want a data input form somewhere where we can put in a search term and then click the button so the closest one to that is create so even though we're not creating an item we are creating a data entry form so i'm choosing create now what are we going to create well i want to show the joke model here as my basis for creating an item i'm going to check partial view because i want it to be part of the main template and then click add now isn't that nice we just generated an entire data input form and it's based on the joke answer and joke question so we could probably run the app now and get something all right so we got the app up and running let's try the search button and hopefully get something there it is we have the create form here so we have id joe question joke answer as the input form that's not exactly the way i want it but at least we have a form that is up and running now we're going to go back and modify several things here so i only want one box for my data entry so i can knock out the first two items that are form groups where it says we have an input and a label and a span so let's just take those and delete them so now we just have something called joke answer and then we have a submit button the submit button says create so i'm just going to change that right now to the word search and i'm going to change a few of these items so actually i don't care about jokes at all i just use this as a template so i'm going to knock out this item on number one called model because we are not creating a new joke we are just having a data entry form so that goes out and then for the title i'm going to say search for a joke at the bottom here's some more code that is for data validation to see if you typed in the joke in the correct format well that's no longer needed either so that goes away so as soon as we take out the line for model you can see we start getting errors in the center of our form that says hey you wanted to associate this input with a joke answer i have no idea what a joke answer is anymore because that line on the top of the form told me that the model on this page was a joke and there's no jokes anymore now i'm going to modify the two lines that are input and label so no longer are we going to worry about the the the joke model so we're just going to say that this input has a name so the name of this input is called search phrase see how we're modifying an existing form and modifying it to a regular html form the label then has to match it as well so the label is for the search phrase now there's also a line here that says validation which we don't have to worry about so that goes away looks like here's a line about validation as well so we're knocking that out okay our form is getting really simple now now there is one item here that makes something completely wrong it says the form action the form action right now is to show the search form well we don't want the search form to show itself we want it to go to another item so now i'm going to refer to another method that doesn't exist yet and we're going to call it show search results so show the form brings us to this form when we enter a item into the form we should show the results as the next step so that's why i called that thing the asp action all right it's time to test it out let's run it and see what it looks like alright the app is up and running let's click the search button and we have a simple form now it says search for a joke so let's search for a joke and let's look for chicken and choose search now we have another issue that says show search results doesn't exist so guess what we're going to have to do next we're going to have to go into the controller and create that method so we're looking for the jokes controller and then the method called show search results that's the pattern that we're following here so let's create that next so to make this method occur we have to go find the controller so we come up here to the top and i'm going to open up the jokes controller again so we did show search form as our last guy let's take a copy and paste on this and we're going to use him as a model now this is going to be using a post submit method and then this is called show search results so this is just comments to let me know what i'm supposed to be making so show search results is my method now the data input form that we put together just a second ago has some values that we want to receive here so string i think it was called search term and that should come directly from the form now i'm going to verify that i spelled that right so i'm going to go back to the form here and check it out so it's called search phrase i think i spelled that wrong so let's copy this and come back into the jokes controller and instead of search term we make sure that it matches with search phrase okay so that's a common mistake that i make as i don't match up the input values that come from our forms and that just causes all kinds of problems when you run the app so at this point it should capture the search phrase and then we're going to have to create another view now i want to test this out and i'm going to change a few things around here so that it'll just print a message to the screen without trying to create an entire form so what i'd like to try next is instead of returning an entire view like an entire web page i'm just going to return a string so let's erase this part and say you entered and then the search phrase is what we're going to put in there so it's just going to echo it back to the user now as soon as i do that you see you have a red line that says you're trying to convert a string which is what i just typed into something called an i action result now up until this time we've just been glossing over this section here so this method returns an item called task and i action result so there's a whole bunch of things that can be returned when you create these views up until now we've just created html pages to show to the screen in more advanced versions of this application we could create a rest api a service that would create json data and that would be also one of these i action results but for right now i'm just trying to return a string for testing purposes so i'm going to knock out all of this stuff here and just type in the word string so that's the data type that should be returned and that's what i returned just below here so this is just for testing purposes as you'll see it's just a very simple message okay let's see what it looks like let's run the app we'll do a search and i'm going to type in something here let's try chicken again and search and now i get the message a string only that says you entered chicken so obviously strings are returnable and they can be displayed in a browser but that's not really very pretty but it does tell me this one thing that the form data was entered and received by the controller and then sent to the next item on the page so i must have spelled all the things correctly in my form okay so i stopped the program and i returned back to here so i'm going to press ctrl z to undo this first item control z to enter back to where i was before let's see i don't want that one i want search phrase okay so i want to get back to the stage where i was before so now instead of doing a view for just a string i want to return a list of filtered results now if i wanted to return the entire list i have a pattern of code that i could use for that that was the original index method so i'm going up to copy the entire list and put it into my search results so this is not really good search results it shows every joke in my database but we can modify this in just a jiffy here so the await command says that we're going to do some asynchronous programming and then the view says we're going to show something called search results that won't work we need to tell it as different view so you can put in an optional parameter at the beginning and tell it we're looking for the index view and the following data to go with it so let's see if that does anything let's run it okay here we are yet again let's run the app let's do search and let's search for a joke so if i typed in chicken and search i should get just chicken right so many anything with chicken in it let's see if it works so it appears that i get search results i got an answer that says chicken let's go back and search for something else is there any joke with the word frog in it let's try that search and i got the same exact results that means that every item in my database is being shown well i only have one item but anyway frog is not here so i have a list that is returned but i need to filter that list so that i could only show chicken or frog as a keyword so to turn this into a search function we're going to go to this item where it has the context dot joke and the place where we're getting our data so we're inserting the word where so this is like a sql filter you know where you can specify a condition about how you want to select items so the where is going to be a parenthesis now inside the parentheses we are going to use an anonymous functions or an arrow function so that's a whole subject in itself of how these work so don't have time here in a crash course to look at it but if you want to look for arrow functions or anonymous functions this will give you the idea but you can see what's happening it says here for every j that has a joke question that contains the search phrase such as frog we will put it in the list so obviously we don't frog to be our search all the time so i'm going to change that to the word search phrase and so this will filter the list and limit it to only the items that contain the search term so let's test it out let's run the app and search so i'm going to search for chicken and see what comes up and hopefully we get results so we did find a chicken let's search again and this time i'm going to search for frogs and no frogs so if you want to create more jokes and test out the search app i think it'll work so that brings us to the end of searching which was a kind of a more advanced topic now we're going to work with let login and registration and then we will assign each joke and owner hey let's do another feature for this application so you can see that i have a few more jokes in my database what i'd like to do now is to hide this column here so joke answer is given in column two and to me that gives the item away so we need to have the user click on the details to see the joke punch line so this part of the tutorial will teach you a bit about the razer syntax and building these views so the view that i'm looking for is the one that shows all of the jokes so i'm going into the jokes folder and the index page is the one i want now let's diagnose how this page is built and learn about the details so at the very first line of a view you get something called a model normally that's what you see and what is this model it says here we have the class called joke so we know that this page deals with jokes however there's one more thing it has a item on the outside that says i innumerable or in other words it's a list so we have a list of jokes so this here tells me what the page is all about now when we come down into the code you're going to see items that say things like model and you're going to have another property there called joke answer so what we're trying to do is just get rid of the joke answer so you can see that the html code is in the format of a table so the table header includes the joke answer well i'm going to take that headline out so th stands for table head and then the content inside is now deleted so also down in the for each section so this is what generates each row in the table and it says here we're going to have a joke answer let's take that out and he's gone and then the last part shows the edit details and delete so let's see if that affects any changes to our screen okay so let's take a look here at the jokes page and you can see pretty quick here that we have just the joke question so now if i want to know the answer to any one of these things i have to click on the details and then i have the full joke answer on this page so it's a design decision if you like your app to work that way that's how you modify it so a good way then to learn how this code is supposed to work you look at the models that are generated by the computer and you can see all of the different codes and classes and all the html that's all done already for you so that's a pretty quick feature that we've just added we hid one of the columns in our table hey let's add another feature to this application you can see that i have the list of all the jokes on here when i click create new i have now a option that says you have to log in actually it's a requirement not really an option so how do we do that well let's see in just a second well this is going to be incredibly easy you'll you'll see that this is just one line of code really so i'm looking for the jokes controller and i'm going for the action called create so let's go down and find create looks to me like about line 61 is where it's at so create says simply show me the view create we don't even want to show that part until they've been logged in so we're going to put in a decorator or one of these indicators in square brackets and the word that we're looking for is authorize now there is no type ahead command here it doesn't recognize authorize so i'm just going to click away from it and now i have a red line error it says authorize attribute is not recognized we have potential fixes available and it says i will recommend that you import this library called asp.net core authorization let's try that so the line should go back it's clear now now what happened what did we change well up at the top of the screen we've just imported this line on line 10. so it says we're going to use this library is that all there is to it i think there is let's run it okay we got the app up and running let's go ahead and choose our jokes and we should get the list of everybody i'll try creating a new one now and there it is so now the login screen says it's it's pointed to me because as you can see up here the registration and login links are there i have not logged in yet so i've already registered an account here under email so i'll put in shad at jokes at app.com that's what i registered earlier and the password i think i put in probably was just password1 something like that and let's go ahead and log in so now the login is there and we have a registration or create page so up at the top you can say hello i see your name is here and you can now create a new joke question if you want and then go back to the list so if i choose create new go straight to the create let's go back to the list let's log out and now let's go back and try to create another one and it says nobody gets to create a joke unless you've already logged in so that is a security so the page can't be seen by unauthorized users so this line here line 62 was a just a notation that says we're not going to do any creating form unless you've been logged in now the form itself has obviously security but the process post is following it so we need to also put authorization here because this is going to actually put the data in the database this is actually more important for the security than the entry form so this this method here create is going to be called whenever there's a new joke to be entered all right what else is there let's go down to the edit form i think we don't want to let anyone edit a joke unless they've been authorized is there any more so here is another one that is the processing function for an edit edit method let's go and add authorize there it looks to me like delete is a good candidate for authorization so we will take that one and then there is a delete confirmed i think that probably sounds like one and then the rest the rest one uh nothing else okay so that looks to me like authorization is now in place hey let's add another feature to our app let's talk about css and how you can style your page so looking in the solution explorer i go find this folder called www root and expand it and you can see that there are html things here so we have a css folder that has the word site we have a javascript folder which is also site these two files are where you can customize your website now in the library folder you can see that there are already things that are built in here so bootstrap by default is the styling system that we're using that requires jquery as well and so let's go look at site css and see what it looks like so you can see that there's a few css styling commands let's pick one of them just to illustrate that it actually works i'm going to scroll down until i come to body let's just change that to a different color so let's try background color as an option and then i'm going to pick something that is just a light gray so how about a triple e and i'll save that and run it okay so i got it up and running and it looks like i have a light gray background i didn't have before now if you don't see that change it's because your browser has a style cached in there so if you press your shift key and then load again it will force the web browser or the web server to regenerate the page it'll get the copy from the server without using the cache and so if you didn't see the change that should affect it okay so you can see that we have a css styling change now css is a whole subject of its own so this is just a crash course on asp.net core but if you were to go and modify things you do not go in to modify the bootstrap css that is all predefined for you what they want you to do is to just work with the site css file which will override any of the default bootstrap settings the same thing goes with the javascript you can program any page you want using the js file here and write your custom code so those are your web development front end areas that you're going to work on so go for it if you know all that stuff already so there's another feature that i would like to show you but i'm afraid we won't have time to implement you can see that i have added the user column to the joke question so you can see who the author was for these great jokes however i think that's going to be best left for a more advanced video this is pretty much a crash course on how to build a very simple application and we've certainly done that so we've created a custom nav bar we've created a table we've created classes we've created a search function we've integrated security we've done some css work there's a lot of things that we've built here custom controllers views and models so all of these things are what jobs are about these days you're going to see interviews where this kind of technology is a popular subject just go in on indeed.com and check to see how many people are working with aspnet or dot core net those are the key terms that you're looking for great jobs now many of my students that have graduated with me have already gone on and done some jobs with this kind of development experience so it's a great study and congratulations for reaching the end of this crash course my name is shad slooter and i hope to see you again in the future you

Channel: freeCodeCamp.org

Views: 348,548

Rating: 4.9587779 out of 5

Keywords:

Id: BfEjDD8mWYg

Length: 60min 44sec (3644 seconds)

Published: Mon Nov 16 2020