YTread Logo
YTread Logo

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

Jun 07, 2021
Hello, welcome to an intensive asp.net

course

. In this video, in about an

hour

, we will create a complete website that has a database application written in the c-sharp language, so this is what the application will look like. I'm going to create a joke app and this will allow you to enter jokes and their responses so you can keep track of your best mood. This application is a basic and raw application, so raw refers to creating, reading, updating and deleting from a database. We will create all the forms, the website and the database that makes it all happen.
asp net core crash course   c app in one hour
In the database we can search for the jokes we created and we will see the tables and all the forms that accompany them. My name is Chad Sluter, I am a professor of computer science and software development at Grand Canyon University in Phoenix. I'm very happy to be here at free code camp and provide you with another resource. I support the free code camp in which I have used it. my classroom I have used it personally it is a great way to become smarter at many things so my career goal is to become a software developer and the free code camp is a great resource so let's start here with Next lesson, let's talk. about this

course

and see what's in it for you, we'll talk about what asp.net

core

is, we'll talk about what the model view controller design pattern means, we'll set up a database, we'll do registration, we'll do login, and security the page and then do some queries on the database, so all of these things are what's coming up, so let's talk about whether this course is right for you.
asp net core crash course   c app in one hour

More Interesting Facts About,

asp net core crash course c app in one hour...

It'll take you about an

hour

of video, but it's actually an intermediate level course, there's a few things. which you should know in advance when I teach this course, it is generally the third in a series on the c-sharp language. Previous experience with object-oriented programming is probably something you should already have. We are working with an asp.net framework. a framework that uses c sharp, so you should understand the language before trying to create a framework. The frameworks are somewhat complex. Must have experience configuring databases. You must know what a table is. You should look at some SQL queries and know what they are.
asp net core crash course   c app in one hour
To be able to design them, finally, we are going to work with html, css and javascript, so you should already know something about creating web pages. If this sounds good to you, let's continue. What is asp.net

core

and why would you want to use it, Microsoft developed C-Sharp and this framework well for creating web applications, so if you want to create a website with a database then this is a good one tool to use. There are competitors, of course, you can create framework applications in Java. using spring php laravel python the python language with flask you could work with javascript with nodejs and express so these are all similar solutions and this one is popular. asp.net will give you a real job in corporations creating enterprise level applications, many students. which I have taught before have high paying jobs in large companies that use exactly this technology dot net is Microsoft's solution for developing software of all kinds since about 2001.
asp net core crash course   c app in one hour
It is very similar to what you would know if you work with Java in the Java virtual environment . machine is a runtime environment that you can build applications on multiple platforms asp means active server pages it's kind of a leftover term from older technologies from the early 2000s but they still keep asp in the name the word core is something new in microsoft core is the open source version of their web development kit, it is cross platform, you can run your applications now on any server, be it linux, you can write your applications on linux, mac or windows, so core is the Microsoft's open source cross-platform solution to develop. dot net software is your unified platform for building almost anything in software desktop applications web applications cloud hosting app creation in mobile games internet of things artificial intelligence microsoft is a very powerful player in software development and net is its solution, so in this course we will focus on asp.net, which is used to create web applications.
How does C-Sharp fit into this? Well, net is not the language we are talking about. C sharp is a language used on this platform, so net framework consists of a runtime engine and libraries to run programs in a supported language, so c sharp is a language, it is by far the most popular language, but you can also write it in other things, but we will use c-sharp. because that is Microsoft's main tool and their preferred language for this type of work, so why do we need asp.net and why did Microsoft invent it well? Around 97 there was this shift 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 came along, so we went from creating form based applications to web based applications and asp was their solution, so net is very similar to java in many ways.
We know that Java was written as a language that could be written on one platform and run on any platform, so they had a Java virtual machine. Well, Microsoft created.net, more or less an answer to that, so ASP was something similar to what you would see today. php is a language that runs a dynamic website, the net part is similar to java, it is compiled on one platform and can run on many platforms, so you combine the two and have active server pages and net as a compiled environment etc. . asp.net is your answer to creating web pages on a web server, so this is what an asp page looks like.
You can see that there is some code here that is a mix of html and something that looks like sharp c and that's why we would call it razor. this is their markup language that is capable of creating something dynamic so that every time you click on an element on a web page you get a customized version just for that user, so you're probably connecting to a database and display information in a dynamic option. this platform is an end to end solution that runs the back end and the front end so we will 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 can also be combined with popular front-end services, so if you like javascript programming, like react angular or vue, or mobile apps, that could be your frontend and you could learn asp.net tools to manage the base data on the back. final, so it is your choice, you can choose front-end and back-end, you can use them all together or separately, so it is a very flexible programming environment, let's go ahead and start building an application in asp. net core. Alright, let's get started. In the next section of our course outline we will focus on this line called model views and controllers or mvc, so we will create 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 I click on the link called jokes and you can see all the jokes that I put in my database appear. Let's try the first one, why was the chicken crossed? Along the way, let's click on 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 will be asked to log in, so I enter my username and password. log in, so instead of crossing the street, let's try the word playground, have you heard this?
Why did the chicken cross the playground? Well the answer is to get to the other slide instead of the side, let's save that and now you can see the results should be displayed. up on the list so now you can see the question is why did the chicken cross the playground? So if you want to see the response you can click on details or if you want to delete or edit it you can do that. Let's try the search function. So if I wanted to make a joke here about the jump, let's see if we can find something.
Something appears in the search, so now you can see a joke in the search results. Can a kangaroo jump higher than the Empire State Building? and wait. The answer is. Of course, the Empire State Building can't jump, let's go ahead and go back to the list and that one is so bad that I'm going to delete it right now and yeah, it's gone, so that's the app we're going to create. Let's start a new project and I'll show you how to create these forms automatically, so you need to have your computer set up to work properly to run these things.
I'm now using Visual Studio on a Windows 10 computer. There are other ways to set this up, but this is by far the easiest. I'm going to go ahead and create a new project and choose from the list, so there are a lot of things you can develop with Visual Studio. I'm going to select some things like c Sharp for all platforms, like Windows, and I'm going to choose web as my choice, which narrows down some of the things I can create. The element I'm looking for is called asp.net core. web application, as you can see, there are dozens of different types of projects you can create, so what you're learning here is just a

crash

course in what Visual Studio can do, but let's start with this version right here and choose the next one .
I'm going to name mine as joke web app. You can see that the location is set to a directory on my hard drive. You can change this if you want or leave it as default and click Create once you choose the web app. You can see There are a lot of different options for how you're going to build it, so I'm going to select the traditional one here, it's called the web application model view controller and that's the full stack solution. You can see there are other options like if you want to use angular or react for your frontend and if you want to choose something empty that you can build from scratch you can choose I choose this one here because a lot of code is generated automatically for me it is the most fast. way to start now here I'm going to change the authentication option right now there is no authentication which means no databases or user accounts.
I'm going to change that because I want the computer to generate as much as it can. for me and to be able to get started quickly now I will also select individual user accounts to create the database and set up tables for me now. If you work with an enterprise authentication system, you may want to select one. Of these others, but individual accounts are very, very common, let's go ahead and choose OK, now you should see this option is checked, we have set up like this on the other side and let's go ahead and choose create now, now what we're creating.
It's a predefined system that will generate a lot of code for us, so let's take a look and see what asp.net generated for us in the first place. If you are familiar with Visual Studio, this will be similar to the projects we have done before, we have a solution explorer that shows us all the code that has been generated for us and don't worry, we will look in each of these folders as we We advance in the tutorial and you will 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 working SQL Server, so everything is integrated into Visual Studio when you start now, if you don't see any of this stuff, you can. go to the View menu and you can find all of these things in the options here so you can show or hide them in the View menu in the center.
You can see there's a welcome page and the main Dotnet documentation is something we're going to be looking at, so this will take you to the official Microsoft website. If you are done with your application, you can connect it and host this application on Azure, which is Microsoft's cloud platform. We won't get to that, but if I wanted to. For you, you could extend your application to run online. Ours will be a local solution, so we will serve it on a local host or a local web server that will only be used by you, the programmer, for now.
I'm going to close. this and then I'm going to start by clicking on the green button that says iis express which means Internet Information Server, it's Microsoft's web server and it will automatically start and compile everything that we see in the solution explorer so you can see that my The application has already started, a web browser appears. I am using Chrome as my default browser and that is why you see Chrome here and you can see that the web service is now starting on localhost so there is a web server installed on this Windows machine and it says I am running this port number and then I have the joke web app open, so there are two pages that are automatically laid out for you: the home page and the privacy page.
There is a registration and login page that is already set up for you. Let's close the application because it doesn't really do much more than display two pages, let's look ataround us and see where those things come from, so let's look in the folders here in the jokes web app solution so that we have important parts here. called controllers and views now, if you look inside the home view, you'll see an index page, let's open it up 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 for a new programmer to understand.
These are html pages, however they are tagged cs html, so it is c Sharp html. It is the combination of two languages ​​combined on one page. Let's start modifying. the privacy page says use this page to detail the privacy of your site, 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 banner, 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 to run and you should see new ones appear pages so you can see that the new page shows the jokes app and I click on Privacy and the following message appears that I just created, so that's what a view is a website and it's the html code that you can modify, so now let's get into this concept of views and mvc model controllers.
We just saw what a view is, a view is a web page that uses html. or in this syntax we will call it razer, next we will see what a model is and what a controller is and how they are executed, so mvc is really a design pattern, it is not a language, the point here is to create. applications that have separations of concerns, meaning their file sizes are smaller, their code is modular and can be run and managed by multiple people, so there are three parts to an mvc, firstly, there is a model which is a class, so we will be creating a model for our joke a joke will have a question, an answer and an identification number.
We are also going to create views. We just saw what a view is. It's a web page and then the most important part is perhaps the central controller. the control, the controller handles the logic of the computer code, it tells the pages when to appear, it gives them data that they can display and that's what a model view controller is. Let's talk about what a website looks like using this system. The user first of all has a request that says give me all the commands for today's date and the system that you see here this asp.net would interpret that through a router so that a router would look at the URL and say hello, here we go today. to look at our date and we are looking for the orders I would send this information then to the controller of your program the controller says hey I'm going to see that you are 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, so you would have sharp c language saying "let's create a list and go to the store and get the orders for today." Well, that would have to make it into the database. and then we're going to see SQL statements that say "hey, let's get all the orders where the date is equal to 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 is the The controller is going to do with that data, then it will send it to a view and say: "Show me the showorders.html page and here is a list of data that goes with it, then it will generate a list that will be an html format and send it to the browser and when it returns to the user they will have a fully formed web page, so all of these things in the background will be called every time they click on something on a website, generating a dynamic I produced a page that would show you the orders. today, so let's go back to our program and see where those things are.
We've already seen the views. Next, let's look at the controller. If I go into Controllers, there's a page called Startup Controller. controller that say things like index, so the index says "return me a view" and there's nothing here to tell us what view it is, so the index page is supposed to be found here, scrolling down a little further below we come to another event called privacy, so if the controller says that the person clicked on the privacy link, send him the link called view, which is also privacy. Here is another event called error and if the error occurs, that means that the user clicked on some link that does not exist, so let's go.
Let's go ahead and start creating some views and we'll see how this controller can work. Hello, in this section of the tutorial we are going to create some views, so remember that a view is a piece of html code or something similar. gets its information from a list of data from the controller, we are going to dynamically create this page using c-sharp and the html language, we will call that language razer, the other part of the page will be a model and then we are going to create a model for our joke, a model is always data related, it consists of classes or objects with properties, the model will usually be provided by the controller and sent to the view with a list of objects, so let's see how that looks like in code, so we go back again to our project here, let's open the project called models.
Now there's 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 have. So let's right click on this folder and choose Add and I go to the option called class, so inside the model folder, add class, now I'm going to stay selected with the element called class and then the name. I'll call it a joke, so a joke is the class and will be the core part of our application. Go ahead and click add to make this the object oriented part of the code so a class or an object will have properties now in c-sharp you can create a property with this shortcut press the tab key twice and you will get a code snippet which is generated automatically, so the class will be this property, it will have public accessibility and integer is the data type, I am going to press tab one more time and I am going to use id as property number in c held for a getter and setter, you just put in parentheses here and the word get and set, so that's the default type of project property for our joke, let's create two more elements.
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, save it and now we're going to create some things that go along with it, the last property I'm going to create is actually a method, it will be a constructor, so there is a shortcut in c sharp where you can type ctor type tab tab and it will automatically generate the function called the constructor now for now I'm just going to leave the constructor empty because it will be used by other parts of the code and it needs to be empty so the next thing we will do is create some pages dynamically the system will generate them for us, but we need to know that there is a file here that was already in the system and it is called application database context, so You don't have to worry about what's in it right now, but I need to know it's there because you'll ask us for it in a moment.
The next step will generate a lot of code for us. Let's right click on the controllers area. Choose Add & Controller. Now the controller will be the heart. of this thing, but it will also create a lot of other parts, so we need to select the right type of controller, so I'll choose the third one, I think it's the one with all the options, like us. We're going to create all the things to do, create, add, delete and edit, then we'll select the model. The model we chose is this class of jokes, so it will create these pages based on the properties of our joke. the other part I warned you about will ask you for the database context of this application.
We'll get to what it is in a minute, but we just have to provide it here, make sure your check marks at the bottom match mine. that will generate the html code as a partial page so that it fits nicely on the website. Finally, click on the Create button. This will take a while. You'll see things that will install automatically and if all goes well, we'll do it. I will see several new pages that will be displayed on our website automatically. Well, finally this is done. It took me several minutes to generate, but now we have this joke handler here and we should also see that in the views folder we have a new folder.
They are called jokes and so you can see that five new web pages have been created, create, delete details, edit and index, so hours of programming have been done for you with a single mouse click. Now we are interested in seeing if this works, so let's go ahead and run the application well. It looks like the app is working. We still have Home and Privacy as our two links, but what about the joke controller we just created? Well, you can see that the URL is about Home. Well, that's the home controller in action, so let's remove the home privacy part and just write the word jokes.
What do we get? We should see a new page showing all the jokes in our database. Well we have a problem because I don't have a database yet, so it says "The database operation failed", 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 The joke pages will come to life in this section of the tutorial, we're going to take our model that we've built and actually create the database that backs up, 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 there's another folder called migrations here, let's see what this is all about, so if you click here , you will see some code that is about databases, you can see that we are generating a table called asp.net roles, you can see that there will be another table called users, there is also a class in our project called joke and I don't see anything about tables kidding, so let's fix that right now, at the bottom of the screen, here's an area called 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 will use it for database management, so in this console I will try to type enable scripted migrations and you can see there is a message that says, hey, you're watching an old version of this, so old guys have to learn new tricks.
Now we are going to write the word add migration, so add script migration and then we have to give it a name and so the first migration. is the initial setup of our database, that's what I'll call it. You can name it whatever you want, but it has to be something descriptive. Okay, something happens after I write this. Let's see what the computer generated in the migrations folder. You'll see a new file called initial configuration named exactly like what I just created let's see what's inside here so there's a command called create table jest and let's see what else is there it looks to me like that's the only item so Yes you'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 just started is something called an object relationship 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 the properties, and the orm is creating a table for us that it will match exactly that class. An orm is then an object relationship mapper. There are now two options for creating databases with a system like this: The object relational map or orm is a popular tool, but it is not the only way to do it. The most traditional way is called dao, where you create your tables manually and then you are.
More traditionally when managing access to your database you write your own SQL statements with this and here is the problem that most people who manage databases like dbas in their company usually prefer the old method, The reason is because they can get more visibility into what is happening. what happens in the database is not as automated; However, programmers, on the other hand, sometimes prefer orms that try to save some time by allowing computers to generate tables of data without you having to write any SQL statements, which is why an orm has been called way for people to write sql statements without writing sql statements is a shortcut that you can use your database tools to update themselves using what are called migrations, which is correct, it iswhere we are in the encoding process right now, so the entity is the name of the orm.
What we are using now is the Microsoft orm. Orms are great for simple apps like our jokes app; However, another version of this tutorial should include how to create daos or data access objects because many companies would prefer that you use that type. from a system when you build your application, so now let's go back to Visual Studio and maybe we can understand what this is doing now, so this folder called migrations is the language for creating tables. Now all we have to do to make this happen is type the Word updates the database with scripts and I'll press enter and let the orm do the magic of creating all the tables for us, so it will create two tables, one is for the user accounts and the second is for our jokes.
I probably have more tables than that, but that's the basic idea. Well, I see a message that says Done. We're going to look in our folders to see what happened, so I go to the left side that says SQL Object Explorer if you can't see it. that you can go to the view menu and get it now I'm going to open 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 search for databases and it seems to me that we have several of them, so I'm going to choose the jokes web app, that's what I'm interested in, let's open that and finally the tables, so in the tables area, you can see that there are several tables that are all about users and then one is about jokes.
Well, I think we could understand the one about jokes better, so let's double click on the joke and see how it looks when I open the definition, you can see that the table was created according to the properties of my joke, so it has a joke question id and a joke answer, integer string and string, and all of that was created for me without me knowing anything about SQL, so the app apparently got it. a database, let's see if it works now, so I'm going to press the green arrow again to run the application, so we have the application up and running and if I click on one of these things, you can see it.
I'm still working on these pages, now we don't have any links that automatically take us to the joke handler, so I'll have to type jokes as my URL and press enter. Now before we had a message saying that your database was not configured. however, now we have an index page, so this shows me all 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 what I think. as I already put some before, so let's try why the chicken crosses the road and the answer is to get to the other side, so they are written, let's click on the create button and now we have an index page, right?
If you want to remove joke editing or show details, we can do all of those things, so each of these pages has already been automatically created for us, the database is in the background, so you can say "Hey , we're done with our jokes app." Real quick, we're going to add a bunch more features, but you've reached the point where you have a working app that you created with just a few mouse clicks. Now some of the features I would like to add, like Details I would like to show who the owner was. Let's log in, register and link them.
We're also not going to reveal the answers, so now we have the joke question here and the joke answer on the same page which is kind of a freebie, so we'll fix that we're also going to limit access, so if I click the Create button and I'm not logged in, it won't let me click the Create button, so those are some of the things we're going to improve on in the next few videos. Well, now let's look towards the end of the course. What I have on the screen is a finished product of all the features that we are going to improve. add so you can see I've created a couple of menu items here, first of all the jokes option, so now we see a list of all the jokes that are in the database and we also have a search function, so if we want to find them. something like the word jump and search we would find an answer, it seems I don't have that question about jokes anymore.
Also, if I try the create new button, you can see that we are now required to log in, so anonymous jokes are not allowed. Here, if I choose to log in, I can add a new joke and you can see that it's associated with a user ID when I create it. Well, back to our current progress. Here I have rewinded my app to where we left it a moment ago. A minute ago, the first thing I want to do is add the link to the top of our menu, so we want to display the list of jokes as a clickable item.
To do that, we need to go into this folder here inside the views called shared and then we have an element called layout. Let's check it out and see what's there. When you review the layout code, you'll see that it looks like a bunch of HTML. Now this element here is the navigation bar, that's what I'm going to add an element to now. If you knew Bootstrap, then you would be all set because Bootstrap classes are what you see up to here, so this is CSS programming if you haven't done a tutorial on it. This will probably look strange, but anyway let's take a look at the code here in this section, so this is one of the elements in the navigation bar.
You can see it's the privacy link and there's another link above called home. link so we don't have to understand all the classes and all the elements here, but we can 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, like this Let's see if we can modify this so that it works correctly. First of all, a link has an a tag and the middle element is the text, so let's make jokes. Now the other element here is some of these asp tags. it says asp controller, so the name of the controller, the startup controller, are the first two links.
We created a jokes handler earlier, so let's type the word jokes and then it says what the action is. Action of this type is index. Now how did he do it? I know how to do those things. We're going to look at the controller and see where that information is coming from, so I scroll to the top of the screen and find the joke controller, so we'll look at this and then we'll go back to our navigation bar. in a second the joke controller the joke controller will have some methods first of all the index method here is the element that will display all the jokes and you can see it already has some code here so this is the code for the database that was created using the entity framework, so let's go back to our code here in the layout, so what did I put here?
I put in the word jokes, why didn't I put in the whole word, joke controller? It's supposed to be a Word handler, so if you write the joke handler it would probably make more sense at least in my opinion, but that's not the way Microsoft designed it, so all we need to put is joke, so the index is the action, so let's save. this, run it and test it. It looks like the app is working and you can see that in the menu we now have a jokes item, so if I click here we should open the jokes list and sure enough, there it is.
This is the index page for the joke controller and if we want we can go to the other elements from here, so now instead of having to learn to type the URL up there with the jokes, we have a link in our bar navigation. So there is a nice feature made. Now let's add the search function and then we will add the new list on our page. Okay, here's the next item. I'm going to copy and paste another link, so let's change the text here. to word search and then I'll change the action to something else, so we're still in the jokes controller, but now the action I'm going to call displays the search form and that doesn't exist in the controller yet, so we have than fix it just to show you how it works, run it and let's see what happens so the app is working, we can go ahead and look at the list of jokes and we should see the only item in our search. now let's click on the search element and you can see that we have a not found error, so the jokes method called show search form does not exist yet, the jokes handler does exist, so we need to create this method and then make him look for our jokes, so where?
Are we going to put that method? It needs to be in the joke controller, so let's double click on the joke 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 do this, let's show the search form, so just in the comments it says that if someone types this URL, this is the command that will happen. Now the key difference here is that instead of the index method, 'Let's type show search form now all this will do is show a form and then we'll have to enter some information in there, so now we're ready for the next part which says return a view now' I'm not going to send any information to this view, so it's just an empty view.
Now you have two options here, now inside these parentheses. We could put this string called Show Search Form, which would mean fetching the form with that name, but from the method name. Up here there's already that title, we just can't have anything in the view element, so it's an optional parameter. Okay, that solves our problem. I doubt it, but let's run the app and see what happens, so we'll get a different error. this time when I click search we are going to have an issue that says no longer found but we have a different issue it says here display search form not found so we get to the controller and it says Hey, you wanted to show this form.
There isn't a form with that name yet, so it says I tried looking in all these folders and couldn't find it anywhere, so obviously we haven't created it yet, which is 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 part. Okay, so how are we 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'll let the computer do some of the coding for me so I'll right click on show search form and the first item that appears is add view, well that sounds useful, let's try that and then the next screen asks what type of view do you want, do you want an empty one or do you want to grab one that is pre-programmed.
I like preprogrammed idea because it will generate a lot of code for us, so what is the name of the form? Well, they already provided a suggestion. Show search form that sounds like this. Now there is a template that says what type of template you want so we can have it. a template that says: do you want to create something? delete an item show details edit empty or show a list well, we just want a data entry form somewhere where we can enter a search term and then click the button to find the closest one to that is create, like this that although we are not creating an element, we are creating a data entry form, so I choose create now, what are we going to create?
Well, I want to show the joke model here as my basis for creating an element. I'm going to check the partial view because I want it to be part of the main template and then click add now. It's not that good? We just generated a complete data entry form and it's based on the joke answer and the joke question, so we could probably run the app now and we get something okay, so we've got the app up and running, let's try the button search and hopefully we get something there. We have the creation form here, so we have the joke answer to id joe's question as an input form which is not exactly how I want it, but at least we have a form that is working now let's go back and modify several things here, so I just want one box for my data entry so I can delete the first two elements that are form groups where it says we have an entry, a label and a range, so let's take those and delete them, so now we just have something called joke response and then we have a submit button, the submit button says create, so I'm just going to change that right now to word search and I'm going to change some of these elements, so I don't really care about jokes not at all, I'm just using this as a template, so I'm going to remove this element.Number one is called a template because we're not creating a new joke, we just have a data entry form for it to come out and then for the title, I'm going to say find a joke at the bottom, here's more code for data. validation to see if you wrote the joke in the correct format, well, that's not necessary either, so that goes away, as soon as we pull out the model line, you can see that we start getting errors in the center of our form that says hey. you wanted to associate this entry with a joke response.
I have no idea what a joke response is anymore because that line at the top of the form told me that the model on this page was a joke and there are no more jokes. Now I go. to modify the two lines which are input and label, so we won't worry about the joke model anymore, so we're just going to say that this input has a name, so the name of this input is called search phrase, look how. We are modifying an existing form and modifying it to a normal HTML form, the tag must also match, so the tag 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, it looks like there's a line about validation here too, so we'll remove it. Well, our form is getting really simple. Now there is an element here that makes something completely wrong. Says the action of the form. The action of the form at this time is. To display the search form properly, we don't want the search form to display itself, we want it to go to another element, so now I will refer to another method that doesn't exist yet and we will call it. show the search results so showing the form takes us to this form, when we enter an element in the form we need to show the results as the next step, that's why I called that asp action, okay it's time to try it , run it and see how it looks good, the app is working, let's click on the search button and we have a simple form now it says search for a joke so let's search for a joke and search for chicken and choose search now we have another problem 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 to the controller and create that method so we look for the jokes controller and then the method called show search results that's the pattern which we are following here so let's create it next for this method to happen we have to go find the controller so we go up here to the top and I'm going to open the jokes controller again so we show the search form as our last type, let's copy and paste this and we'll use it as a model.
Now we're going to use a post submission method and then this is called show search results so it's just comments to let me know what I'm supposed to do so show search results is my method. Now the data entry form we put together just a second ago has some values ​​we want. to receive a string here, I think it was called search term and it should come directly from the form. Now I'm going to check that I typed it correctly, so I'm going to go back to the form here and I'm going to revise it to be called search phrase, I think I typed it wrong, so let's copy this and go back to the joke controller and instead of the search term we get we make sure it matches the search phrase, okay, so that's a common mistake that I make because I don't match. the input values ​​that come from our forms and that just causes all kinds of problems when you run the application, so at this point it should grab the search phrase and then we'll have to create another view.
Now I want to try this. and I'm going to change a few things here so that it just prints a message to the screen without trying to create a full form, so what I'd like to try next is instead of returning a full view as if it were a full view. web page, I'm just going to return a string, so let's delete this part and say you entered and then the search phrase is what we're going to put in there, so it's going to return it to the user now as soon as I do that, you'll see that you have a red line that says you're trying to convert a string, which is what I just wrote into something called i action result.
Up until this point, we've been skipping over this section here, so this method returns an element called task and action result, so there are a bunch of things that can be returned when creating these views. So far, we have just created HTML pages to display on the screen in more advanced versions of this application. create a rest API, a service that would create json data and that would also be one of these results of the i action, but for now I'm just trying to return a string for testing purposes, so I'll remove all of this stuff. here and just type the string of words so that's the type of data that should be returned and that's what I returned right below here so this is just for testing purposes as you'll see it's just a very message simple, well, let's see how it looks. let's run the app, we'll do a search and I'm going to type something here, let's try chicken again and search, and now the message comes up, just a string saying you entered chicken, so obviously the strings can be returned and displayed. in a browser, but that's not really very pretty, but it tells me one thing: the form data was entered and received by the controller and then sent to the next element on the page, so I must have written everything correctly in my form.
Okay, so I stopped the program and came back here, so I'm going to press Ctrl Z to undo this first item. Control Z to return to where you were before. Let's see, I don't want that one. I want to search for a phrase. so I want to go back to the stage I was at before so now instead of making a view just for a string I want to return a list of filtered results now if I wanted to return the entire list I have a code pattern that could use for that, that was the original index method, so I'm going to copy the entire list and put it in my search results, so these are not really good search results, it shows all the jokes in my database , but we can modify this in just a jiffy here, so the wait command says we're going to do some asynchronous programming and then the view says we're going to show something called search results which won't work, we need to indicate it as a different view to that you can put in an optional parameter at the beginning and tell it that we are looking for the index view and the following data to go with it, so let's see if that does anything, run it well, here we are once again, let's run the application, do a search and let's search for a joke, so if I type chicken and search, I should get only chicken, so many things that contain chicken let's see if it works so it looks like I get search results.
I got an answer that says chicken, let's go back and look for something else, is there a joke with the word frog? Let's try that search and I got exactly the same results, which means that all the items in my database are displayed fine. I only have one item but the frog isn't here anyway so I have a list that is returned but I need to filter that list so I can show only chicken or frog as a keyword so to turn this into a search function , we'll go to this element where it has the context dot joke and the place where we get our data, so we insert the word where, this is like a SQL filter.
You know, where you can specify a condition on how you want to select elements, so where there will be a parenthesis now inside. in parentheses we're going to use anonymous functions or an arrow function, so that's a topic in itself of how they work, so I don't have time here in a

crash

course to look at it, but if you want to look at arrow functions or anonymous functions this will give you an idea but you can see what's happening it says here for every j that has a joke question that contains the search phrase like frog we'll put it in the list so obviously we don't do frog to be our search all time so I'm going to change that to word search phrase and this will filter the list and limit it to only the items that contain the search term so let's try that and run the app and search so I'm going to search chicken and I'll see what comes up and hopefully we'll get results so we find a chicken let's search again and this time I'll search for frogs and not frogs so if you want to create more jokes and try. the search app I think will work, so that brings us to the end of the search, which was a more advanced topic.
Now we're going to work with allowing login and registration and then assign each joke and owner. Make another feature for this app so you can see I have some more jokes in my database. What I would like to do now is hide this column here so that the answer to the joke is given in column two and that delights the element. then we need the user to click on the details to see the joke, so this part of the tutorial will teach you a little bit about Razer syntax and building these views, so that the view I'm looking for is the one that shows . all the jokes, so I go to the jokes folder and the index page is what I want.
Now let's diagnose how this page is built and learn about the details so that in the first line of a view you get something called a model. normally that is what you see and what is this model that says here we have the class called joke so we know that this page deals with jokes however there is one more thing that has an element on the outside that says i innumerable or in other words it is a list, so we have a list of jokes, so this here tells me what the page is about. Now when we go down to the code, you're going to see elements that say things like model and it's going to have another property there called joke response, so what we're trying to do is just get rid of the joke response so you can see that the html code has the format a table, so the table header includes the joke answer, well, I'll take that title. outside then th represents the header of the table and then the internal content is now removed so also down each section so this is what outputs each row in the table and says here we are going to have a joke response , let's eliminate that. and it's gone and then the last part shows the editing and deleting details so let's see if that affects any changes on our screen okay let's take a look here at the jokes page and you can see pretty quickly here that we just have the joke question So now if I want to know the answer to any of these things, I have to click on the details and then I have the full answer to the joke on this page, so it's a design decision.
If you want your app to work that way, here's how to modify it, so it's a good way to learn how this code is supposed to work. Look at the computer generated models and you can see all the different code and classes and all the HTML that is already done for you. pretty quick feature we just added, we hide one of the columns in our table, hey let's add another feature to this app. You can see I have the list of all the jokes here when I click create new, now I have an option that says you have to log in it's actually a requirement, not really an option, so how do we do it?
Well, let's see in just a second. This is going to be incredibly easy. You will see that this is just one line. of code really, so I'm looking for the joke controller and I'm going for the action called create, so let's go down and look for create. It seems to me that line 61 is where it is, so create says just show me the create view. I don't even want to show that part until they're logged in, so let's put a decorator or one of these flags in square brackets and the word we're looking for is authorize, now there's no type.
The forward command here doesn't recognize authorization, so I'm going to click out of it and now I have a red line error saying that the authorization attribute is not recognized. We have possible solutions available and it says I will recommend you import this. library called asp.net central authorization, let's try that to get the line back. Now it is clear what happened, what we changed. At the top of the screen, we just imported this line on line 10. So it says "we." Let's use this library, all there is to it, I think so, let's run it, okay, we have the application up and running, let's go ahead and choose our jokes and we should get the list of everyone.
I'll try to create a new one. one now and there it is, so now the login screen says it's pointing to me because as you can see up here, the registration and login links are there. I'm not logged in yet so I already registered an account here under email so I'll put shad injokes on app.com, that's what I registered before and the password I think I entered was probably 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 at the top you can say hello.
I see your name is here and now you can create a new joke question if you want and then go back to the list, so if I choose to create a new one, go straight to 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 that no one can create a joke unless they're already logged in, so it's a security measure so that unauthorized users can't see the page. This line here, line 62, was just a notation that says we're not going to create any forms unless you're logged in.
Now the form itself obviously has security, but the publishing process follows it, so we also need to put authorization. here because this will actually put the data into the database, this is actually more important for security than the input form, so this create method will be called every time there is a new joke to be entered, what else is there ? Let's go to the editing form. I think we don't want to allow anyone to edit a joke unless it's been authorized. There is more? So here's another one which is the render function for an edit method.
Let's add authorization. there it seems to me that delete is a good candidate for authorization, so we'll take that one and then there's a confirmed delete, I think it probably sounds like one and then the rest, the rest, nothing more, okay, so that seems like authorization to me It is already implemented. Hey, let's add another feature to our app. Let's talk about CSS and how you can style your page. So looking in solution explorer, I look for this folder called www root and I expand it and you can see there's html stuff. here we have a css folder which 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 there are already things built in here so bootstrap by default is the styling system that we are using and it also requires jquery, so let's look at the CSS of the site and see what it looks like so you can see that there are some CSS styling commands.
Let's pick one of them just to illustrate. that actually works, I'm going to scroll down until I get to the body, let's change it to a different color, so let's try the background color as an option and then I'm going to choose something that's just light gray, how about that? a triple e and I'll save it and run it fine so I got it running and it looks like I have a light gray background which I didn't have before, if you don't see that change it's because your browser has a cached style in there so if press the shift key and then load again, it will force the web browser or web server to regenerate the page, you will get the copy from the server without using the cache and so if you didn't see the change that should affect you, it's okay , then you can see that we have a CSS style change.
Now CSS is a topic in itself, so this is just a crash course on the core of asp.net, but if you were to modify things, don't go in to modify the bootstrap CSS that is predefined for you, which They want you to do is simply work with the site's CSS file which will override any of the default bootstrap settings. The same goes for JavaScript. You can program any page you want using the js file here and write your custom code so those are the areas of web development you're going to work on, so do that if you already know all that, so there's another feature I'd like to show you, but I'm afraid we won't have time to implement it.
You can see that I added the user column to the joke question so you can see who the author is. It was for these great jokes, however, I think it will be better left for a more advanced video. This is pretty much a crash course on how to create a very simple app and we've certainly done that, so we've created a custom navigation bar. We have created a table. We have created classes. We have created a search function. We have integrated security. We've done some CSS work. There are many things we have created here. Custom controllers, views and models, so all this.
That's what jobs are all about these days, you'll see interviews where this type of technology is a popular topic. Just go to Indeed.com and check how many people are working with aspnet or dot core net. Those are the key. terms, you are looking for great jobs now, many of my students who graduated with me have already done some jobs with this type of development experience, so it is a great study and congratulations on reaching the end of this intensive course. my name. It's Shad Slooter and I hope to see you again in the future.

If you have any copyright issue, please Contact