Learn ASP. Net MVC and Entity Framework (Database First)

1. Introduction: Hey guys, welcome to my new course. Learn is speed dotnet, MVC and Entity Framework database. First, in this course, you're going to learn the fundamentals of ASP.net, MVC and Entity Framework by building a small boat practical School of Management System. Now this course was designed with beginners in mind if you are brand new to development, brand new to the whole concept of ASP.net, MVC, HTML, jQuery, and all of those jargons, buzzwords and those names off technologies, you hear them but you're not entirely sure how to use them. This course is a perfect starter course for you. Here. By the end of it, you're going to be able to build a fully data-driven web application using a speed on it MVC. You would understand the MVC design pattern and folder structure. You'd be able to query databases using Entity Framework and LINQ queries. And you'll just understand the entire dotnet ecosystem as it stands. By the end of this course, you'll also know how to use source control in the form of GitHub, how to integrate JavaScript and jQuery controls on code into your application and develop a full and rich user interface for your users. By the time you would have finished this course, you would have moved their own in Visual Studio so much looked at errors because I don't hide errors from my students. I showed them to solutions. So by the time you're finished, you'd have seen the arrows and you'd be able to debug and know how to solve your own errors in the future. This will put you ahead in terms of your skill sets, allow you to improve your marketability and your income and impress everyone around, you know, with all that said, I'll see you in the course. 2. Install Visual Studio Community Edition: in this video will be looking at installing Visual Studio 2019 Community Edition To get to the speech, you can follow the link that is included in the resources for this video. Or you can just Google Visual Studio, which is free for developers and individual waas. But if you go enterprises, their application than you are required to buy a license. After clicking this button, we will be led to this pitch, which will thank before downloading, and you should see your file available. After clicking this file, you would be required to clear the scare to warnings and run. This will then launch over installer so we can go ahead and continue on a low that bottle. When that is finished, they will present us with a few options for models for download. Because we're doing a Web based application, we will want to ensure that we have the speed at MIT, and what developments set off, too. So we'll just click the check box, which will then include all of these options. You Nader's go ahead and click in star. When this that is finished, you can go ahead and eat and sleep off this complication and a low visual studio to start at the end, it will proceed the launch visual studio and close the installer. Go ahead and sign in if you have a Microsoft account before. If not, then you understood, not know. And maybe later on I will sell it Clark for my FEMA's alike. But our teams can also change and optimize. Your developer sittings out shoes with development on we can the Sleep Starts Musical studio. This will launch resisted 2019 where they will ask us if we want to get started by cloning existing core opening on project or solution. Opening a local folder are pretty and projects we can stop here as we would have successfully completed the requirements. With this small, you stay tuned for more. 3. Create ASP.Net MVC Project: Biggers to do would be starting our wonderful journey. Exciting journey off What programming with SPD met NBC and into different work. At the end of this exercise, you should be able to build a fully data term application using entity framework on day speed on it. NBC Like, previously discussed NBC is according pattern, meaning it is a standard way toe. Former Andi put your record in a structure and minor the M stands for model, which really means the representation off your database. In your Web application, the V represents the views or the visual side of things. Be for view V for visual. Your user interface, etcetera on the controller really is just the orchestrate in the background that says, OK, the user requested this watch today respond with it has in some amount of logic. All right, so you begin this journey by opening up a visual studio, and we're using Visual Studio 2017 Community Edition for this exercise. A. We will be building a school management system, so bring up your visual studio. Andi. I already created one of those removed from the list, and we will be creating a brand new Web programming project so you can go to file clean, you click project or you just use your interferes here. New project. Inkley Corn Unity. Then, on the left hand side, I wanted to go to visual C Sharp and go to the Web, subcategory, under which you'll see two options a speed. That net Web application is the one you have to select, and then we're going to name it. School managements ensure that you have an adequate directory on that. You have boned it. Teoh, get repository you need Then click OK for this screen. Ensure that you have NBC selected on. We want to change our authentication method to individual user Collins. If all is well on, everything looks at least very similarity torches on my screen. Then you may click. OK, The creation process may have taken a while, so I just skipped ahead toe when it's finished, so you may posit video. If you are still not at this point over. Once you've gotten to this point, you'll be given this nice landing page, which allows you to. It started with the airspeed Annette Ambrose to Turow's Connected Zero and a bunch of other things. Well, let's take a look at the interferes and what they gave us to work. If you're usedto win forms, then you notice that you don't have a toolbox, which would have been a mainstay for both win forms and were performs in NBC. It's a new programming paradigms, so you no longer have that event stripping programming style anymore. So there's no toolbox. There are no controls. The drag and drop you'll have toe hold. Everything using standard is Jamil techniques on. Then we have the solution Explorer, which is usually where we go and find all of the father we will be working with. And in this situation, it's no difference. We see a few more folders and will be used if we're usedto once again wind and Web forms. But don't be daunted. The three key folders in this set of files would be your model. Have you and Controller Fullers all right, and then the other fires we will get into as we go along. So please get this far and hit me up. If you have any questions, feel free to leave a comment or any observation in the anomaly that unique experience and let me know how you're feeling 4. Setup Database: so to pick up where we left off having created or school management project. First thing that we want to do is set up over database so that we can get our models started. Don't so to set up the database we need to go over toe are view menu on. Then we look for a skill, a server object explorer. So for this exercise will be using over local DB. If you have SQL Express or SQL Developer installed, then you may use that incense. But to keep it simple, I just use the one that comes built in with visual studio. I'll drop down into my local DB instance. Look at all my databases are quite a few data. This is from past projects, but we want to create, and you need to basically right click databases and click Add new database and we can give it a name. We'll call it school management Syrup attacked my friends Dante underscored TV, or it's eliminated the Seimas mine, at least for consistency. You may change it, but so that we have ah, more seamless full. Let's just keep the same naming convention and then click OK. This then creates or new database so I can drill down into this database. Since he on my tables, there would be none except the octogenarians assistant tables, which for this exercise aren't really necessary. So we'll just right click on tables and click Add new Table. I have included the script files, so you may go ahead and copy the script file from the I have already included the script as that would generate our database. Someone to use one off the script passed for the very 1st 1 But then I'll create dildos Manu ality I copied the script file from or learning platform. And then you can pace it in this section. That's his t SQL. And you notice that what every quit down here gets replicated here. And if you make a change at the top, you replicate in the script, so they work quite well in tender. Once you're satisfied with the table and your table looks just like mine, then you may go ahead and click update to update the database, then click off date eateries. Once that has been successful, you may repeat that procedure with every other table that this prescribe. So we created a student table. Now we create a course still and I'll do this one using the designer you. So we have course idea Off course. The name here is really inconsequential. But you want to introduce You have a carts name. You know what it is? Leave her on Title credits on credits would be an integer whereas title would be on end fire Char I just put that to 50 and other loans for both off there. Onda I will make my primary key and identity column on their number of ways to do that for me. The easiest way just around identity Carmel All right, so if you had no spelling errors than you would have no errors like I just had. So that is our script and it will just rename or table of course, disagree keeps look on course, right. And then once all is well, we just like updates once ago and hopefully the key to these was that the successful We should see our courses table listed there And then we have one more table for which I will use the script to go. This is a really big table, so I just did the script, peace there and then that would give us our enrollment table with our enrollment I d which is our primary key or great course I d. So this table is what you call a linker table, which is facilitating many, many, many to many relationship between all the courses and all of the students that are doing these forces. This distracting all of those associations on. Also, they agreed that they would get so once you are satisfied with that, you make like, a bit Having successfully created all three tables, you're not ready for the next step. But off course, he can just verify by going to our sequel Object Explorer and just making sure that all three tables air there. You can view the data by right clicking on the specific table and then clicking the data off course. We have not entered any data into anything as yet, So everything is empty. Thank you for tuning in and see you next picture 5. Add Entity Framework Data Model: Hey guys. So we'll be continuing from sitting off the database with setting up or data model in our projects so that our Web application plausible eateries are just as a reminder. Have controllers we have models and we use. So the models are the database that say, the mimic files that looks like the database structure on. They help us to communicate with the database through entity framework. So if we look into this folder who see that there are a few models because we actually created or project using the individual a cones authentication option If you didn't do that , that's fine. But what we're about to do is add an entity framework diagram to our project. So we just right click this water models, we add, You go toe new item, then we look for the subcategory. That's his data There. We select our radio dot net entity data model. We can give it a name that is suggestive off what we're doing so we can say school manage friends. I like to call my DB after doing that week. When we get this wizard, we want to leave it on the designer from database because we're doing our database first approach. So we leave that one selected next, then we'll be prompted to connect toe. Instance that our database was created on you, remember? He created it on our m s s school local BB, which means I need to go toe then put in the server. Knew in this case, fine is local e d and S s q l he now you could put this drop known. If you have more than one instances, that would probably increase the little time, depending on home, any senses you have And if you're on the network is to search everything, so that will actually take a while. So if you know it by heart, it's easier to this. Type it in on then once you do that, select authentication in this case are authentication is in this authentication on. Then we select our data. These from this strapped on this andare later This is school management's TV. Then we click OK and it will see that the connection string I just a little bit on, def. We look at the context history. You see that it's really just English when you get all of these characters and symbols of the way is really just English. It's a chronic Stan's string equals and the data source is over server that we just start in. All right. Our initial catalog is the database that we selected and then you have some other things interview the security. True, multiple active results. It's true on then the engine behind it is our entity framework. So once we're satisfied with this screen, you can district next. Then it will ask us what objects from our data. This would be like to include in our project now So far? Well, they created three tables thinking this click that box are if you have all the objects they probably don't want to include. You probably want to drill down and slept there. One by one it was finished. Then this will seek a while. The Lord art. So once that is completed, you be led to the screen that looks similar to the secrecy course enrolment and students, or any table that you have created in that needle is that you specified you'll get this data into the diagram. So if we drilled on into the files that are associated with our e G banks or data model diagram. We'll see here that we actually have some CS file some C sharp court files with the same needs that correspond here. All right. And if you were to open those and take a look, you don't is that they really just class files with the boys off attributes Andi random looking cord that was generated. But then, if you pay attention to the properties, you notice that these properties are during the representing the fields for me from the date of its aren't say a poor society like we created you have title like we created and then credits, and we made credits knowledgeable in the database. So we have a knowledgeable integer property type right here. All right. And then you see that there is also on include the list off the related in Rome. It's certainly Weber foreign key from enrollments to course. So entity framework is generating the fact that okay, in a foreign key relationship that I'm with the include a list off the enrollments that this force, any particular course would be involved in. All right, so entity framework is making it much easier prey to manager relationships on your associations at the database level. But more importantly, this CD, a mix diagram, creates that bridge between or Internet application or Web application on our date of these , so that so you go about adding the data model two year projects. 6. Tour of Folder Structure and How to Add Views: if you know where we left off in the last video we created or data models and in institute where we'll be looking at adding controllers views on taking a general tour off the files that help us through our web programming. No, Microsoft Gate was quite a few generated files and folders. They give us a nice full of structure. It is something like a skeleton or guidance system, if you will. It is not hard and fast that your project most look, let this because as you go along, you add things were moving. So you're for the structure me very from this bullet at the end of the baby. Once you create on in D C projects, this is the general full. The structure that you get now I'm going to go through the folders. You can take a little tour on fully appreciate exactly what we have. So an upstart, you have a few court files. Those are essential to the actual start off our application there. Some pre processors, you know, set a protein configurations of identity stuff, some bundles for our stars and scripts. I'm not going to get into the details of those but we can just have an appreciation of what is an upstart. If we look at content, we see that we have a few CSS files out of the box, and V C five comes with bootstrap, kindof integrated and built in. So your your Web application has the bootstrap look and feel by default. You can actually remove it if you wish. You can appreciate it if you wish. You can do whatever once it's there. They also give you another standard CSS file, which is yours to edit at will. This practice would have you create another CSS file and override stars and bootstrap as opposed to editing chef file. So that's why they would have given you another one where you would add your own custom styles and additional thes the me bootstrap, more customized and more personalized in the controllers supporter we have three controllers on we can use from the naming convention that the controller name would be some word in this case, opponent on the word control. Oh, and if you've got all three fast, you noticed that they'll have that seen for months. Some word in this case home on the word control manage controller savior would create a new controller. You should have whatever you're following it on ending with the word controller. Internal fees All right, funds. Those are generated. Those are coming with bootstrap with us. Throw the Internet. Not every computer is with the help of funds that you would like to display. So it's always good, at least in modern the Web development to include the funds file with your projects so that the the server lords the funds as oppose the plane machine. So that's that's why that is there. I would advise you not to eat it, though. Honestly. Ever give that we went through models on, we saw where we have or different class files and we added or gate of these entities model . So we have a bridge store days of this. We have a Scripts folder, which please post toe a bunch off scripts, mostly J query scripts that are needed to complement or bootstrap scripts. We also have modernizer respond, which helped with the responsiveness and backwards compatibility for more. Hmm. If I stuff for older browsers, so other this stuff homes prepackaged with the word project, you don't have to add these things manually. All right, so here we have or views folder, which please host toe over reserve you files with the extension that C s h. Do you know? I guess it seems. See, sharpen HTM of combined. That's exactly what reserves? No. I wanted to appreciate the correlation between the folder names here in the views on the names off the funds strollers. So we're going to look at the home controller Onda, appreciate that. Correlation. So we have a home controller, which is a CS file. Onda, a CS file is just a class file. As you see, it's really just a class in hurting from a base class called Controller. On in it, it has functions, methods, procedures, whatever keyword you used identify them. It has those. They all return some type of action results on the return value for inaction. Result is view, You know, what this is doing is establishing that For every method you have here, you should have a corresponding view file on. That is what this returns. So when you sender quest for index from the home controller, it was search through the view holder on they look for a full of the corresponding name home on that. It will look for controller with a view for view with corresponding fun, son, you index on, then it will return it. So that means if you have a method here and you have no corresponding file in a corresponding folder that you get something like a 404 era, we will get into that and explore all of that in a few minutes. So I just take a look at index really quickly. Our index file. I wanted to appreciate that it has purely html things in its apart from this section, which is preceded by this at sign. Once you see an outside, that means you are about superimposed C sharp until your HTML. All right, so remember is a CSS html file. So it's following about a bit off c sharp on it is merging it with html on I just do a quick example off putting, see, sharpen this. Others protected if statement so at sign. If a between this just very example just to show you whole reason works that actually allows me to create off Sorry. Well, since it allows me to actually superimpose c sharp old right here in my regional. So that is the relevance off my see ization or reserve you file. Another thing to note is that we don't have that traditional skeleton. I call it a skeleton where every issue, Beatrice time with our doc type on our head and or body tags. We don't have that here. None off these you files have. That's that is because they're all inheriting from what we call a layout file. We'll get to see the nail file in a few. But what I really want you to see and appreciate is the fact that each file here the name corresponds with the name off the method. That is it the controller. All right, So once you have a method name once again, you need to have a corresponding you file in a folder which has a corresponding name to the controller. So let us just take a tour. Andi finally pressed at five. The moment evolving, waiting for So we will grows. So it may have taken a while. But once you're here, we want to take a look at all Visual studio and sp .net NBC are aiding us till create a fully functional gate and German websites. No, this is our index speech. Cardinal rule for me, when it's some sort of design, is that all pages should be called index once it is the intended home made, right how or index page. If you look at this and we look at cold, you see the correlation between what is here as contents on what was on the page will also see that we have a little bootstrapped seemingly land where using the bootstrap love buttons, even the funds is coming from bullshit. Everything is integrated with wolves. No, I want Justo also appreciate that this is loading from low Post. It's not loading from your local file sets as it would be if you were building a regular HTML page. Visual studio is actually conjuring a session off. I I s express s a sure for Internet information services. So it is 100 of many fibers and off that I'm using it to emulate a Web server experience. When you going to be about more, Which is when you pressed five. Now, if we bro's three cone, we see that this is our home weekly. A boat on. We see that link change. So no, we have local hosts on your port number may differ from mine. We see home. I we see our boats. No, remember or controlling it was all hope so Whatever the name off the controller is, that is what will appear. And this will be followed by the name off the view that we have requested. So in fact contact. You see a similar change home slash contact. All right. And I will go back to home. It's going to load index anyway, so it doesn't need to indicate anything else. We're going to go back to visual studio and make a few changes. No, back in visual studio understands. Come out of evil board. No, we're going toe. Add a new view. So I'm just going toe, take two steps. Stone on, Right public. You know, our return type was the action results. And then I'll see tests. You hoping for her are bird braces on Then we know that we have to return view as that is the value. At the very least, that's our methods. Stuff is expecting. No. If I run in debug mode once again on, then attempts to grows to this view, you should get an arrow because there is no corresponding file in this folder. So we'll just run that experiment and rebuild on. Go ahead accordingly. I know that we have our whip up. We can follow the seam path convention that we're used to so you can just see a slash home since that is the controller that we just added that view too on. Then I'm going to write in the name off the new added view, which is test view press enter on, then were greeted with this very unattractive page. But then if we take the time or to appreciate what it is seeing it is letting us know that the view by this name was not phoned in any off the locations that were searched. So we see that it looked in the views Boulder. He looked in the corresponding home folder on that they didn't find any file that would possibly could possibly have passed, as have you filed. All right, so that is that kind off arrow that we would get having Not me. The heart adjustments toe our projects. Now back in visual studio, we still have a bit of work to do to get this view over and runny. We already created the method stuff here. What we want to do is get the file over here. You can right click six odd both of you on. Then give. It's the name that you know we want. So that would be test you. And then we see a bunch of other options here. We don't need to wear about template model class just yet. We don't want to take this, but then you see something here about Leo Page. I mentioned your pages earlier, but we still have not made it to look at the label pitch. But I will just leave this blank for no God. And then it goes through this thing called strap Holding. I know we have our newly created view on. It's quite a simple page. Like we said, it's almost a beer bones html page that is capable off having someone moans or c sharp text in it. You get the title here in this variable, so it's also generating all of this on them just into arrives. Feet tug. That's his Hello world. Andi. I will give it one of those famous bootstrap classes glass and it's the text lash in four. So we should get blue fixed when we rented us was he can control, shift and be or build and click build solution at on works Just ensure that we have no syntax errors in our board. We also see that's our you file is created over here. So if you go back into the boat moored on, then we grows to test you, Then we should be greeted with a page with an H to talk with this generated text as well as the text that we just added. All right, No, that we've made that the adjustments. You just come back to this page first for me. These you pressed five from visual studio than it would ever go toe to the speech we see here that we have over h tug printing this and our hello world looking room because we put on the bootstrap class for text so we can just go Makoto people more and know we know hota add more views. So our projects once again you go to the controller on. We make sure that there is a method stub that has a corresponding name with the view that we want to get to. All right? No, I mentioned the Leo page more than once on Dime No. One's Give You a quick tour off what is in the little piece. Essentially, the veil page is a generic reusable. Tim pleads for your peaches. You can have more than one loads on the case for having more than one. Deals would be like If you have a system that has a customer facing side and an admin portal, then you know you're Porter probably looks differently from the customer, fusing one so you can have a little for the admin side and lay low for a customer fees inside on. Then that would reduce the need to do the repetitive stuff over and over and over. It's just off meaning to Odinga scripts on doing the HTML scale. It's on every time, right, so that is why you have such a very scale Don't version off of you file over here. But then, in the shared folder under views, you have a little old Nazi s H d you know, file on. You go into this and you're no bombarded with a bunch of HTML. But if you take a step back and you just go through to see that it's regulates, doctor, it's HTML where we're headed. Tugs inside that were some metal declarations, or charset and for responsive Web design purposes, these are bootstrap required at the release you see here where the title is being set dynamically. If we remember surf above authenticity, we see that here we said View bagged up. Titled he test view in the layout file. It is changing with each page. That's a custom render on, then the static part of it, which is my SB dotnet application. Since we're doing a school management system, I'll change that to school management system. All right, on, then, some of the declarations here these functions are C sharp functions. So we see here are at sign, signifying that we're superimposing some c sharp on then Styles is a static class which is calling a function called render, which is then passing in some prior mater's, which, if you look at the Asian of that gets generated from this, you see the actual cord linking all off our files from our content folder. All right, I won't get into that. Right? No, Later on, we'll explore that in more detail. I just want you to appreciate what you're looking at on. Then we render some of the scripts. In this case, we're really rendering just modernizer, because that testicle I head off everything else. But then below this is where we're rendering the other scripts, such as the J Query and bootstrap Andi sitting some parameters. No. If we just scroll through on Look at it. We see body we see here. We're adding enough bar would strap style way. See here that we have an action link. So we have on object about HTML and has a function called, actually which is taking a few files, a few values as parameters. All right, so here, I'm just going to change application name because I'm sure we remember on our age, you see, application near coming off every time on each page. And who would want to say application name would actually want to give it the name it should be. So this was the school management system, and then we have enough bar home about contacts who? Look here. We see that with this is our enough bar on. We have each of those links home a bolt. I'm contact. No, we just created a test view. You would like for it to be in the number bar that we can bro's to it as well. So I'm just going to control De on that duplicates the line, and then we can just modify this sergeant, see test you All right? So the first block of text speaks toe what it is. What is it you want to print on? Enough fire. The second block speaks to the actual may. I thought that it should look for So remember in the controller we want to look for the method by the name test view. Noticed There's no space here because we don't put spaces in our medical names. But we have to say it as it is here on it is not case sensitive. If you want to use looking is here or use. Look is here or you proceed with the case. We will all be the same thing over and participates with this one because we wouldn't want toe prints, the camel cased test view to our users. So we prince what we want so or use it here on then the controller is home. So this last Permata speaks Look control. So if you take a careful look at home, you would see that we're printing home. You know enough fire here However, it is linking to the index method inside off our home controller. So it is linking to our index method in our home controller, which then search for the searches for the view all index andan renders that however, were telling the user it's home all right. And then as we go down in our lives, we see here in our body contents if that were rendering body so render body really speaks toe the actual rendering off the CS Ishan of you file inside off this entire layout, which is why all of them are being rendered with enough buyer and with a filter. We saw our footer had our operates sign the year Andi some random takes which would have been generated my SB done if application. So, since we're changing out all of those appearances off my speed on its application, we want to ensure that all say school management systems. I just love it. That's on displacing it here. And then I can control, shift and be and build on. Make sure I have no syntax errors on. Then we can go back into debug more on DSI, all of or changes press five to interview. So when our page loads, we see here that we have all of our changes reflecting. We have school management system printed here instead of application name. We have our test view. No, I didn't. Or enough bar on we have or footer reflecting or age. So if we want to start changing contents, you know, everything would wouldn't want to have a school monitoring system with ESPN dot net printed . All right there. We want to change the content and so on. And we have to go into our view. Faz Pino the content and start putting in all of our custom content for each page. All right, so I hope you appreciate whole views and controllers work on hold. They all tie back to the Leo pH On whole. You can effectively go a boat adding more content and functionality to your website. See you again next time 7. Scaffolding: Adding Controller and Views: no in this studio or we will be looking at scaffolding on generating controllers and views for functionality in our websites. So far, we've looked at what's the controller, which is a view. Hold a link. Will you go about creating a new view? Onda touching into a controller What we didn't do was actually linking the model to everything. So we looked at the sea. We looked at the V. We've looked at the M. We've looked at them in in fear, isolation and no, we're going to actually tie them all together. So in this to tour, we look at a procedure or process in visual studio on most NBC frameworks that you use called scaffolding, where we associates the model with a controller and generate the view accordingly. No, I have here on screen my entity framework Bagram on what we'll be doing to begin with is create a course control. Oh, Andi, Some views associated with crowed functionalities. Four courses in short, C is for create Our is for read. You is for opiate. Andi is delete. So current operations basically manage, are governed everything that a user would ever do on a website that is the doctor. So with no further ado, we will go about creating courses controller, linking it to our course model on generating a bunch of views that are lost, interact with or courses in our databases. So to start this procedure, we go over to our controllers folder. We right, click and click, add. Then we select controller. Then we're given this kind of wizard window where they ask us, What kind of controller would you like? You see, here you have M v c five you have with the FBI to with a bunch of other things. What we really want out of this one is NBC five controller with views using entity framework very specific. So we select this one on a week like that. Then they asked us, what would you like as the model class? So from this drop down, we'll see every single CS file that is in our project listed here. But we're not interested in every single CS file. We're looking specifically for the one with the name that corresponds with our mission. So in this situation, we want the course which is found in our models folder on. Remember, if we drill own into the media makes we would see the CS file. I'll just do that quickly and give you some context. So we drilled into models. We have our into different work. Bagram. We drill into that and then don't Here. You see that you do have course that CS and that is a model that we want to use the generates this controller so once again, we directly controllers. We goto ad click controller. We select NBC five controller with views using entity framework and click add Then we select from this drop down box course on the data context class would be our school Montreal DP entities. All right, so we can just like that we can choose to use a sing controller. Actions are foregoing this time and then I use it the next time on. Then they're asking us which layout page would we like to use for our views? So we see here we have a check boxes is generate views. We have a check box here. That's his reference script libraries, which we really don't need to do since our Leyla Page already has the references. So we will just select or little page by clicking the ellipsis button. There were going to views shared and then we select our layouts. Once again, you can have multiple. They also you choose little that is appropriate for this situation on Then by the end of its there would be asking for the control enable you can see following the same naming convention. It is also generated using the name off the model which is course they say courses on the word controller. So the naming convention, I mean teens, then we click add, it will go through a scaffolding exercise. At the end of this exercise, you be given a class file and you see much more core than we're used to from or home controller. All right. No, once again or controller is just a class with the name off the model in this situation in the world Controller on its inheriting from a base class called controller. Then they go about initializing our data context objects which allows us to communicate with our database. Remember, keep on saying that this diagram is our bridge. What? This bridge is all involved in this one line here in line 15. So we initialize this object to a new instance off our entities diagram, which establishes the connection toe our database. Then if we look through, we'll see that we have quite a few methods that were generated, and some commenced the guidance as to what is happening here. So the 1st 1 is Index. Remember, as always, indexes, The first file that should ever be in any website on this one returns a view. But then, in this situation, we see that we have parameters in this view. All right, so you see that you have B B, which is the same name was our database context on. We're running a query against the courses table, and we're just parsing all of those toe list further. Don't you have a detailed speech which is taking probably an integer. All right, so that question might really means that it could be No, it could be, ah, value. It is preparing that it might be a no I devalue that is coming in on it as a cursory check to say, if the I d that is passed in is no than return some bad request core all right, otherwise it will go on toe source that course by I d. So it's his db dot courses not find find will return any record with this I d and store it in a variable called course. And then it will go on to say if the course that is returned is no meaning nothing comes back at the end of this query than it still says, Http not phone. So you see quite a few returns here and none off them our views. All right, so actual results. But then action results are low. Zito have different values returned. As long as you have the correct value are an acceptable value. Then you have a car to return time so we can return on http Status code result for Butters about requests we can return. Http. Not phoned or we can return view with our sourced course. Right. So we looked for the course on then. Once nothing is no on everything checks out. Then we return the view with our course data. We also have ah create my thoughts stub on. We go on to see that there to create method stops We have one to get which just returns of you and then one for posting, which comes with some security features and some binding. And as we go along, we'll explore them more. And this one. Make sure that the data coming back is valid before it goes about having it toe our databases or course is stable in our database on, then saving the changes on, then redirecting to index. If the state is invited, then it returns to the view with the course, with some error messages stating what is missing or watch was invited in the same way we have to creates. We have to edit. So have one edit here, which is I get. And we have one edit here, which is a course than the cord bases are quite similar on. Then we have a similar is construct for our deletes and then we have a dispose function. So all of this was generated just by you, adding a controller had in the class generating the views on you. Get all of this. So the key in what I just said was generating the views. We have the methods, so we have to ensure that we have the views that correspond with these methods. In a corresponding folder for this controller that I go to my solution explorer. I see here, the controller was added courses controller, but then I need to validate the views. And if we go down to views we see here courses that name on this collapse this the names correspond courses, controller courses, folder. And you see that for each method that is here in the controller, you have a corresponding file. So if we click Index will see quite a few things happening here that was not present on the previous index pot. So we have here on inclusion off a model, All right, on the soft type I innumerable. So C sharp has quite a few data types. If you've been doing this thing for a while, I'm sure this wouldn't be very foreign to you. But you have this being included, because in all fairness, the index file is getting a list. Right. So remember, over here, we're passing up a list into index off db dot courses to list. So it is getting a collection type. All right? It is getting a list of courses. Index page should display all of the courses. I'm sorry. That's wrong. Index file. All of the courses that would have been in the database, as at the time off. You loading this speech? All right. And they have quite a few things happening here. You have this create button actual link for creates on because index and creator in the same controller, you don't have to explicitly records of the control so he could put on you could put on the control in English courses. You can redirect toe another controller off course. This would feel because there's no create inside off the home controller, right? But then, by virtue of the fact that they're in the same controller, you don't have to be that explicit moving from index to create. So this works. Then we're going to create a table. We have to properties for our courses stable That don't include the idea. So we had i d were tightened where credits We don't need to display the i. D on d. M. V. C knows you don't need to display the i d. So when they generated this page that made sure to just exclude what they figure you wouldn't want to display to the the end user Anyway, so we have a display name for title on one for credits and all of those are both of those are put into the header section off or table on. Then we see them injecting some C sharp cold here where they say for each. All right, so they're saying for each item in model model being this here or the data coming back. So once you past data into the view, you can reference it by seeing model. That's a key word right there. So all of the data, just by hovering over the tool tip, is indicating that this references the collection off course is coming from the database. Once again, course this controller index were quitting our database, looking in our courses table on getting all off them and parsing them to list on passing that into the view. The view can identify all of that data coming in through the keyword called model. Since it's a collection, we need toe list everything in that comic collection. So we say for each item in the model or set of data coming back, we want our rule. So for each item want to generate a rule and this rule should have one column for the title on one column for or credits and then 1/3 column with our action buttons, which would say edit details and delete which each will wrote to the corresponding methods in our control. Oh, I want to remember in our courses controller, we had edits. I find it quickly where edits we had creates. We'll have to, but we have create on we have details on. We also have deletes. No, we need to be able to bro's to this page or anyone off four pages. So I'm going to go to our layout page and make sure that our Leo has a link that can bring us to that index page. So I'll remove or previously created test viewing. As we don't need it going forward on, I will just manually type this. Also, I am creating a new now of property or enough link sitting an action link. So at sign HTM l dot action link and then I'm passing in as parameters. What I want to be printed. I know what I want to be printed. Would be courses. How desperate courses on. Then we're looking inside off the index. Sorry, we're looking for the index method inside off our courses. Controller. All right, so remember it is what is displayed the action or the view that we want Onda, the controller, that we should be able to find it in now. Having done all of that, we'll hit a five and see what happens now. This is the result off our paid so far. And we see here that we have a link called courses. When we click that we should be guided to our index page on. When that page loads, we see it is empty. We have anything in our database, right? But then we see it's consistent with what we saw in the view we have index, which I believe is in an each to talk. We have a link that's his create new, which, when we click, it should lead us toe are create form. And then we have the two headings for our teams. But we have no rules and columns afterwards because we have no data. Remember, it is generating each rule for what is in the date of this. If the database is empty, then no rules will be generated that for each loop will not run. So let us go boat. Creating something new so create you brings us to our create view which asks us for a title on the credits. So you see the creative you is actually auto generating. And I just hit over to visual studio while we're still in debug mode. And take a look at the creative You. We see it generated a form. All right, so there is an HTML helper function called begin form, which renders out a farm in HTML on then, using some bootstrap code, we're getting a form here that there's a validation summary with a class attached to it on . There is a certain pattern here that as you see the cold more and more, you catch onto the pattern. So I'm deliberately not going into the details of certain things because I want you to see and appreciate the pattern as you go along. Those certain things will come to light more and more on the way Ever live on in this day if we have a label so you see another issue, my helper function being used and we're looking at the model on we're creating a legal for a title on giving it some bootstrap classes. Sorry. All right, on, then, don't. Here we generate an editor for So there's a help of function that's his editor for pretty much distress is I would look at the data type that I'm supposed to create a control for and create an appropriate control. So if we had a boolean for our human, see that we needed to create something for Editor for would automatically generate that check box. So there are situations where you want to use editor for for ease on there, times when you need to be explicit so you could see html dot takes the box for All right, so you can be explicit on there. Certain times you want to be very explicit because editor for has some limitations. Textbooks for comes with more textbooks related functions that are ready to go a few things otherwise. So we want a text box for our model, and we have a little, um, the expression here to say model that title, and then we're adding issue attributes. If you remember from HTML, when you have a nation will tell you can add in attributes such a zaydi class, Please solder when it comes to text boxes. So we're adding new Ishijima attributes. And remember, this is all C sharp, so we have to treat it a bit differently from all we would have in ST each demo. So we're adding additional attributes were adding once again another's another collection off attributes. Now, if you use textbooks for than some off, the court here will also have to change so you won't be able to see New Asian attributes in this manner. You have to refractor your court a bit, so to not complicate the situation as we're just waiting our appetite, I leave it on editor for on. Then we move along so we see Editor for is generating or text box, and it's assigning a bootstrap class called form Bash Control to it. We also have another section for validation message, which means that if we stipulated at the database level that this field is not gullible, then the validation message would know that once we try to submit a null value or an empty field, when we click submit on our farm, it will reject it like we saw in our controller logic, where it checks is valued, so if it is not valid, then it will reject it and return the view with whatever bodies came back on. The validation message would show accordingly. So it does, Ah, lot of the heavy lifting for us on then. I don't know it. All we have are Submit Button, which just gets a bootstrap class for default, someone to changes toe success. So having changed it to successfully just save changes were still in debug mode on We just go back to our screen and refresh Onda low. It's to reload or page with our changes. There we go. No, let's go about creating a new course. So I call this one in production to Web design. Sure go. My spending right on then, like I was saying with the edit for it knows that credits is supposed to be an integer, so it is actually giving us a text box. I'm actually typing text right now. It's not accepting it because the control that it's generating for it is a number picker itself. Type number P clarify, inspect element. I'm sure I'll see inputs type to be number. There we go. So it is restricting me on what I am able to enter. So usually introduction to what design is a three credit course I just could create. And there we go. So we go back to our index page. All right, Andi know, we see that we have a generated rule with two columns, one for the title, one for the credits on then another column, which had our action buttons for edit details Onda delete, and each one will bring me to the corresponding page according to the type. So if I click edit and I'm actually going to bring visual studio this time around and put a break point on our edit action, all right, so each method here is called an action, so the break point is sitting there were still in debug mode on. Then I'm going to click edit, and then we take the time out to dissect what happens in visual studio. So the break point is hit on. Then if I hover over idea, I see that I d want. And that's because our newly created record in our courses table has an idea off one. And then if we step through our cord, we see that If I d is equal internal, this value is two falls, so it skips by that on. Then it goes on to run this query, which then say's find the course with the I D one. So if I step by that it runs that query and it will go through some stuff on, then it should return course. So if I hover over course, I see and that it comes back with a bunch off generated values. But I can drill down and see the exact details on here. We'll see that we have or credits being three and or title being introduction toe Web design on. Like I was saying earlier, once there's a release on City entity, Framework will automatically bring over whatever values are associate ID. So since we have no enrollments that are directly related to this particular course than the list off enrollments is zero, it's empty. So if I press f five, it will continue. Teoh evaluate If the course is not no land, we know it's not know because it just saw that it has a value, so the values not know, so it will return the view with the corresponding data that we just looked up, and that's all we engaged in the anything procedure where then says, Bring up this form. So we see it looks very similarly to our creates, except it comes preloaded with all the data because we looked for the course, got the data associated with the course on, then passed it back to this view. No, if I make a change here, the expectation is that the course would update when listed in the index. So I'm going to change this because we expanded our programs to know we have introduction to Web design part one on, then we'll have a part to. I can also edit this view because I want to save button to look like green, someone to go back over here. So I'm going to make a few changes here on this view. Either way, I want the same button to be green, much like on our create page, so I'll go back here. We're still in debug mode. We'll go into the solution Explorer. Find that view so we look in courses folder. We look for the edit view on, we'll see that it looks very similar to our index create page on. Then we will modify our submit button tohave Bt and dash success once again. So as you go along, you get other generated court, which is really just a guideline. But you will be prompted and influenced the give it here or individual flair on change. Certain elements, as you see, fits if I go back here and refresh and you see teaching the break point again, I don't want it to do that's artists take off the brake points That's unpredicted on. I'll just click. Continue Andi There we see that our peaches reloaded on. We have our green save button off course are changes were on. Don's off me. This change again and then I click Save on. There we go. So the change was done on we know have introduction toe work design won the same number of credits on If I look at the details, the the details option is doing a very simple thing. It's finding. Which course has the i d. Associate it here off course, that is not visible, But if we over over the button, we'll see in the bottom left corner that the link is being displayed so it's going to courses slash details slash one. So that slash one is that parameter that gets passed into our option in the par mentors. All right, so if I look at details to be specific, we'll see find details, we see action result details. It's getting a perm. It'll called idee. So whatever the i d. Is, it's being born to this link right here and that such a when it is clicked, it is going to be Pasto the details action in the i d parameter on. Then it is evaluated, making sure that we're not wasting time because a database called think of it as expensive . So you want to make sure that you vets your data as much as possible before a database called is required. So here we're just making sure that if nothing came over, then don't bother to waste the time to try and look for something that will be invalid. So we check we validate that this idea of value me well, it may exist at this point. We don't know yet. Then we try and find it on. Then we check if we found it on. If we didn't we say not phone, which is like a four or four on. If we did, then we say Please return the view with the data associated with the course. So let us try that. And then we see here, this is our details. You very simple page on. All it's doing is displaying the title on credits. So it's details. It's a view page. It's it's for viewing purposes. It's not for editing or creating, So this would be more like our in crowd. This is your read page, and we can choose to go back to the list, which will just wrote a spark to the same place this Woodrow Justo or we can choose to go ahead and edit, which would be the you the update on then we don't obey this again. We can just go back to the list. And then from here, we can also delete. So if I click, the leads will be led toe. Something of a confirmation page, which did a similar thing to the Bt is it looked for the course and it brought about the course I sprinting the details and then it's asking, Are you sure you want to delete this on, then, just to add to the aesthetics off the page, I'll just go and find this delete view on. Then we can look through. We can change the verbiage as we wish we can say, OK, delete. Are you sure you want to delete this? We can put this in on alert so we can give it a class, and I give it on alert. Danger. All right, so that's a bootstrap class alert. Danger. Bootstrap has excellent documentation. I'll share that with you. So you can if you're not so Oh, fear. With bootstrap classes and what they do, you can always go to the bootstrap, get bootstrapped outcome. And they have excellent optimization. Where the break out all of their classes, Andi, their their functions for you. So I made that change on. Then I refreshed to see my changes. All right, that's not the best. I think I'm using the class wrongly, but you can see where the bootstrap classes helping me to just add a little individuality to the page, as opposed to what was auto generated for me on that probably want the button to be read. So I was find that button on here is a button. It's a submit button. Onda changed that to BT Indust Danger. I believe for this one. I need to put alerts than alert. So just do that Save and refresh on. There we go. So this looks much better. We see that alerts give it a bit more putting on another dangerous what? Immediate Red. All right, so a lot of those bootstrap classes you have to use in piers, but take your time and look through the examples on then our button is also read, so I delete It's just a show that our court works on. What I'll do is also set a break point in our courses. So we already loaded are get deletes because we got the data, right, So we've got the data for display purposes. That's what this one does. No, when I click submit As with any other page, it needs to do something. So like I mentioned before, each one has a get on opposed it as I get on. Then it has opposed. So you get is what happens when you bro's to the edit page. But once you click, submit The post is what happens so we'll see in our delete posed what happens? No, The very point is set on, Ben. I will go ahead and click Delete on. Then it hits the brake point. So here it causes. We see. That idea is one. It is no going toe. Find the course and then visual Studio 2017. I loved us to do this school thing where we just skip directly toe our line. So I'm going to skip over this line, all right? That means the quarry was run. So if we look inside off our course, object will see that it got the course. That's the I d. Those air, the credits, and that is the title on. Then it's going to see remove from the table. Whatever data is in this object. Alright on, then. Once that removal occurs, we need to see if changes. I'll just press F five on at the end off. All off this, it is no going to redirect to our index option, so you'll see that this is also one big pattern that happens in every single action. In the edit action, we see where it's those some operation. It validates that data that has bean putting since the edit is valid on, then it does something where it touches the fact that this entity was modified and it seems the changes. That's a nice, quick way to do on it it on. Then we return to the index if we look at our create creators rendering the view. But then it has opposed where it is validating then adding, saving the change and then redirecting to index. That's pretty much the flu off any crude operation. You contextually right cord toe effect. Whatever changed to the database, you know, you probably you're creating content, so you have to do top articulo. We may be your editing Clinton's you have to find It's what it is that you're anything and then let you know it has been edited and then save the changes. And then, in this case, we're deleting. So we have to get the file or the record rather that were deleting, then see if the changes and then we always go back home to the list. The list is what shows us that the changes have been made, so I'm just going toe President five and skip ahead on then there we are were redirected. Index on. We have an empty list. No, you can do that with any other data table that you have in your database. The same procedure that you just did for courses obtains for students. And it may be a bit different for enrollments, but I want to China and to go ahead and do it for students and create the student from operations using the methods and techniques that you just learned in this video, you're free to leave comments and let me know if you have any difficulty. I will be more than happy to assist you, Dennis again on have a good one. 8. Managing Database Changes: you guys. Last time we left off, we were creating the control for our courses on using scuffled into Jerry's all reviews. I left you with the challenge to go ahead and create the same controller and views. Or are students table someone to do that quickly, just in case you probably didn't know what to do on actually, how simply really is. So we right, click or run for a stable Goto ad, one shoulder select M V C five controller with views using an STI frame work. Then we select our model class. In this case, it would be students. Then we see that most off the information is already populated because that's what we did last time. So visual studio is keeping track of our activities. Inspire me and easier. First, let's move along. This time I will use a sing controller. Actions is to show you the slight difference in the court. Everything else checks out, so I just week at at the end, off the scaffolding exercise over New control is generated for students, and we see that it looks very similarly to what we're used to from over courses. Controller. Additionally, if we look in our views table to see that we have a new folder for students with the same set of use our prisons in horses. Now, if you take a closer look at your control, you see that you have a few new syntax words, namely a sing on a wheat. These are parts off the holder, but generated from when we said Use a sing functions on pretty much easing kind of with our cold butter. And that's alot our methods to run. He's synchronicity. So this is in keeping with C sharps need for efficiency and ongoing multiple threats to run in one application. Outside of that, you see that most of the court looks pretty much the same if we compare it with our courses . Controller Hole. Now in this video, we want to focus particulary early on making modifications or databases Week will allow. We're using a database first, quoting pattern, which means that our database would have existed on then we build application around its or our databases constantly involving as we flesh olds and muffles the conscious either for or application. Now the challenge with this approach is that as we change our database, we have to update our models on also opiate or put no. I just generated this hold all of our views and this controller based on the fields that were present in over eight of these tables. So if I look into the data vis, I'll see that I have three fields steel anxiety, last name, first name and enrollment rates, which means that everything that would have been generated would have been generated around those particle feels. So if I take a look at my control view, I'll see that I have a form generated for last name, first name and enrollment deeds. Now, what if I needed to put in the students? Middling. I left that out of the database initially on? No, I need to include it in what I have going on someone to go in to views into my SQL server Object Explorer. I really don't into my database Instance on defined by database, school management, TV table and make a modification to my student table. So I rightly and then click the designer. I will then proceed toe add the middle name column to this table. So I just come here in the middle name I wanted to be a in part shar 50 just like the other names and the nitric off deeds to commit that change. Once that will be, it is done. I know need Toe, albeit my database model to be cognisant off the fact that there's a new column in this table or in that particular class. So if I bring my E DMX, I'll see that the current students does not have a middle name problem. So I right click in the empty space on my Click Up Deeds model from Data Bees Thistle. Then give me a little wizard. I can go to refresh click tables on, then click Finish At the end of that process, we see that we have middle name added here as a column. Now that leaves me toe have to update all of ordinary two views toe know that there's a middle name that needs to be anything or added in our create that is control shift and B and make sure that everything bills successfully after a successful build. Then I will go ahead on defined my views that need to be edited so godowns by these holder look for students and then first it It's our creative you. So I need to pretty much replicates the structure that I have here. Poor last name and first name on the system form Italy. Considering that they're all birds similar either types and the constructs, I can just copy and paste this block off Cool Onda modified so that we know you want middle . So this is generating a label for the first name. I just changed this too little and you can see that the intelligence is picking up that there is indeed And in fact, a column in the model caused little I said, Just enter on then I will do this or headed for On also the allegation, Mrs. I will also need to do this for my edit page like in this copy This once during that edit page looks very similar to or create Page and I would just create some space here on is the same hole on once again our model on our any page His students on dso it knows off the new property cause made on additional step so that we can bro's to this newly created index page is to modify our Leal's on added coronavirus. Artistic on courses for natural D to do you hear that line? And then I'll say students on. Also, we will change the controller name to students. We can say this and then go ahead and people, once our window launches, you'll see that we have the length toe our students paid, so we can click that and be navigated to our list off students. We know that we didn't add anything to the database. And also you see that even though we added middle name for the model, there is no middle name column the instead of here. We did, however modified, created. So we do have middle name here, Alec Tree age on. If I go ahead and creates on, then look do notes that enrolling date I lows us the type in our free text. So if you recall, I was saying that there are certain situations where you may want to add custom controls. Toe our text box on Day 84 has some limitations, so it wanted probably changed data type associated with this input from text on set. It's a few times so we can at least get the time picker or find a geek worry or Java scripts cut in the control to put here. We can do that that the major deeds foot for No, I'll just put a generic gate's and then click creates. Now, if we take a look at this, you see that or nearly period. That report is here once again on index were not displaying the middle name. However, if we click edits, we'll see that we have a slight anomaly with our program, we did not do enough to make sure that middle name was going to be populated upon create. As a result, though, we added the text box to the edit form. There is no little new display it because there was no the middle name committed to the date of this when we clicked three s. So we still have a bit of work to do. Now, going back to our court, you can come out of evil more for a second and see what additional work needs to be done to ensure that our create function works. If we take a look at the data, we will also see so directly for table, I think you data on. We see the middle name was indeed and in fact send across as a low. That is because at the time of creation, even though we put the textbooks and controls there or the middle name, we did not tell the controller that it should indeed and in fact, for a middle name when it is receiving later from our view. So if we take a look at our controller really quickly on we go to the creates course potion will see that we have something here that says find include on we have some parameters. Do Lords students I d last name first name enrollment dates on DNO middle name. Now what is happening in this include equals followed by this string off fields coming from our student model is we are looking for specific properties from this class that should be included when we home pile or objects on to see if changes So they find me the modification here that we should take a seat entirely. Last name, first name enrollment it on top on middle Him on this part is case sensitive Zoff, please be sure to bright in the same way that the property appears in the class Andi for the edits. We can also go ahead and include little came on going to debug mode and attend to add another students. Then we should no longer have this problem. So let's a strata. No indeed modem with attempts to add another. Then I click creates and then we have a second student record. Now, if I look at the end, it's then you will see our value coming back, unlike our 1st 1 where there was no value committed to the database. Now if we look at the details age to see all off what we need to say about the students, details really and truly should list every single thing about the students here. Notes. There is no Middle East, so we still have a bit of work to do to get middle name to show up in our G feels age. So I just quickly go over the details and we're still in debug mode. Find the details view on. We can see here that details Page looks a bit differently from the other pages. It is predominantly using the HTML helper function for display display name four and display for So we can just eight. This Andi replicated this kind of logic on inserts middle. So I just put a little name on middle name see on then refresh our peace on. There we go. Last name first name on our new additions of the family middle name. Also, we have enrollment needs. They're things you can do is technically to make RD It's more attractive now, possibly easier way to have accommodated all of these changes to our database on our subsequent controller and view cold would have been toe regenerates or controller and views based on the changes in our model. The danger to this, however, is that any changes you would have made it up in discarded on replaced with the generi court. So be very careful when you are going to make changes to your database on the cognisant of the fact that you probably want to do it manually. So maintain whatever core has proceeded. This change anyhow, thank you for tuning in on. I do hope you found value this Listen. See you next time 9. Customizing a View - Bootstrap 3: you guys in this tutorial will be looking at home with global customizing overviews and our applications. Aesthetics trinkl More like or application as opposed to the altar generated application. Bento spice v dot net. We can redesign our landing page a seeing on the screen here on we'll also the boats what Bootstrap has to offer to expedite this process. Before I move on, I need to remind you guys that we're using bootstrap three D Falls. Bootstrap that came with our project is bootstrap three. We can upgraded to four. But if we do that and we run the risk of having to redo a lot off work, so I recommend that we continue using would strip or bootstrap documentation, we can go to their website, which is get good strap. Or you can just look for bootstrap, three on who was suggested, and here will be given all off the documentation behind all of the good ism who have surpassed offer. You don't have to start from scratch, but I'll just take you through a quick tour toe. Appreciate or Wilshire brings to the table. Now both strip is CSS framework. In a nutshell, the developers observed with development patterns. Over years, Andi came up with a bunch off classes or Chiesa stars that they think people need further to, that they had a mobile first agenda. So using bootstrap helps it accomplished a mobile first on clean design, as they would have backed it up with commonly used CSS styling on I keep one saying this, but let me, for instance, the cuts tables. People always long tables. People always want their tables to not look quite like tables. Will Bootstrap gave us a table us. All we have to do when creating and tables give the class iwas table to our table cord on. Then it starts looking something like this. And if we recalled that so our students on over courses, tables look both off the box, you can also add strength properties. You can make it border. But the fact is that bootstrap is making this very easy because you don't after at all, see assist accomplish all of these thieves at on the classes. This take a look at buttons. Last time we looked at changing whole buttons look, so we saw that one skims TTN and then e t and dash something. So you have et and Dash devotes to get this people looking button Bijan Dash Primary to get a blue one success to either green button on everything. So it's all clearly outlined right here on their website. They give you the example on, they give you the core for this example on. You need only translate that into your need and your specification so that you can go ahead and start using it. They support responsive images because I am G dash responsive. That means that your image will start to resize on flicks according to your screen size. All right, so you can, Pero who's? I wouldn't recommend that you try committing it all to memory because it can be overwhelming. But as you have a need, if you want something to be rid our blue or something, you can come on over. You can go through the CSS category, or you can go to the components category, which has even more things. You have space for hurts. You have your danger alert versus your success alert. You have labels that can add text in the job script section. You have stuff for more details. If you want of pop Hope that looks attractive. You have tabs if you want a tub experience on your browser and they give you the JavaScript . And if you recall part of the scripts that would have been given to you, the project include a bootstrap Js. So you don't have any additional work to do but to incorporate this court with yours? Andi, utilize it to your or benefit. So advise you to look through, See what you need on use this under. So for this section, we're going toe actually re style our landing pitch were going toe. Actually add a few images on a bootstrap slider toe our home page section right here. So we're going to ripple this entire Greece section and then we're going to replace it with a bootstrap slider. I went ahead on bond about some pictures from Fix a Beta. Come. That's my go to site for free, high quality pictures on dive selected three pictures that I want to use and was used this one back to school. This'll one never stopped burning on this one. So it speaks of a you need only go there. Click Freed on Lord Lord on then it will ask you to sign up. I'm just very fair that you're nuts. Robots on Once you click down, Lord, it will initiate the Donald for you. Someone to go ahead and do that to know. Having done that, I need to get them all into the project. I would have downloaded them to my desktop on No, I need to get them into my project For further using their website, I recommend you create a folder on you, put all their images in the fold residency they give you for the structure for all types of house. One file time that they may not off gator for his images, so I'll just go ahead in content. I think content is the best place to put images based on what's in there on the same continent. Add on your folder, call it images and then I can right click images. Please, God goto existing item. So if the item exists, meaning you're not going to use visual studio to create the item. But it's something that's already all there, like in this case, an image file, and you want to bring it over into your project and you click existing item and then you find it on your PC. So I put mine on my best disk top, so scroll through and find my image and formed one here. Screw the fans Elder to and I changed my mind was one off the images on their their added to my project. You can tell the plus sign that they're no being incorporated into the project. On when you over over each one, you'll see many preview off what this image is best practice or for ease off use. You wouldn't use this long alter Jerry to name Cool from the website. Now you want your image to be easy to use, so you want to rename it something that's more appropriate for the purpose that you have it . So I wanted for sledders so called This one's like Dash One on the extension is that J. P. G on never renamed Builder to accordingly and no, we have all three images that we need or or slash yl. So like I said earlier, the objective no is toe change That gray area which should have been depicted by this Jumbotron give on we want to put in a bootstrap slider in that section. We can just head over to the bullet struck website to see the documentation on get bad, and that's the hope we do that. So what's the JavaScript section on? And look for car self. That's what bullshit, cause it's a car, so and then they give you an example. First, slide seconds lead their slide as you can see the clicking works. And then as you scroll down, you see that give you a mountain off court that is required toe have something looking like this. What they didn't give you are are the images that But you just need to look at this, appreciated and then modified four year old purpose. Someone's just copy off all of this section off course. Go back to our project, paste it here on. Then it may look a bit overwhelming, but if you take the time out to appreciate it, if you know HTML, you see exactly what's going on here. But before anything else, let us take a preview off what the result is. So this is a preview off what we get. A Z conceit is much less attractive, and what we had before and we still have a bit of work to do what we can see the way of our errors and actually clicking the IRS. Actually, enemy, it's something that is visible. So let's go ahead and go back to visual studio on DSI. What additional changes need to happen to me? Are Carcelle look presentable? So back in visual studio, looking at the court, you will see a breakdown for each sex son that should produce an image. All right, so firstly, you see that you have this ordered list which has allies on it has some deed entire Gibbs on. Then you see that it has data dust like 2123 This one is stark as active. So zero will always be the default one. But then, for the actual slides, you see that each slide appears in its own give that's item number one on desire to number two on. We know we have three items, so we just need toe build on all of this sample cord according to what we need. And then don't Here you see that? A people's section for the controls which heir to a tugs using some bull shop classes here to look like Pareles on these air Ours. I go to the side for next and previous. So first thing I'm going to do is modify the court for our first Slatter. So image I'm went to set the source, change it from Ellipsis and I had this is control space to get that intelligence hinting. I remember my images folder inside of content on then my images inside the images folder on I'll say slide one before the alternative text our ports We heard for the caption I can use a spun tug See, we planned for the second section I'll do a very similar modification. So jeans SRC slide to on change that never stop Mark Um, just putting in some random captions and alternative texts you would fill in years more appropriately when you have your chance to do so on then we have three sliders, some dismounted, duplicate this one. Move this. It exists on change This to slide three, I will come back and change these two more appropriate captions and alternative text. What? I just want to show you guys where you go both putting in a bootstrap slider on We don't have to modify much else. Then we can preview that on. Here we go. So now we have a slider in the space where we had that generated text. A few things that we can observe would be the varying heights or each image so that causes the Carcel to push and pull the contents on the page. So you'd want to be mindful of that To ensure that your images are off the same dimensions on and soul, your content will look fairly consistent with each slider. So that is a preview off whole. You go boat incorporating bootstrap component into your website. You do so at will. On as you need toe, you may not use a carousel that's up to you. What? You have quite a few options available to you can a tool tips you can attach drop downs on all of this, comes out of the box with bootstrap Andi speed, and it comes out of the box with bootstrap. So unless you're going to find another framework that you may prefer as you have a few out there, you can invest some time in experimenting with bootstrap and seeing what it has to offer. No Another thing that we want to accomplish is to modify this section. Teoh only have two options, one for courses and one for students. So as we can see where three columns on def, we look in our code, we will see that we are using who'd strapped to divide. All were role, so boots triple. Do you construct called a role cigarette or table on? As you know, each table has columns, so Full Strap has a great system that once you have a role, you can divide it into up to 12 columns on in. Further to that, you can specify Khomeni columns should be present or whole big. A column should be based on the size off. The screens of typical screen on any laptop or computer would be in the empty reason. So they're giving you three columns. One surgery it on a pistol. One two on three. No, we only want to. So I'm going to remove the 3rd 1 I want to modify this one, bearing in mind that we have up to 12 columns that we can use someone to change this 1 to 6 . A list of six on Once again, I know that I can do this because it was already outlined in the documentations. They can always go to the documentation and read up on the grid system to have a better understanding off what is happening here. And then I'll go boats changing the title or the caption that is being used here. So horses on and do this. I'll also change of this partner. I really don't need to be advertising. It's be done it on my school management assistant site, So I will put a nice paragraph on. Then I don't need to be linking toe on a trip if all the way outside off my purview, someone to change this toe, a button that willing to my courses So I can use my action link somewhere that my sign and call for my Isham off helper for my action links on. Then I want to print it takes learn war. I want this action link to go to the Knicks on this index would be in my course is unfolding. And then I'm going to repeat that for students. Six. All right, so me the adjustments added students caption a paragraph for that section. Andi, actually on. Then we can go ahead on preview. This so we see here that are changes have been put into effect and we can see that we haven't even split between the tubes. Remember out saying we're 12 12 spaces toe comes that we're able to use Andi. I said I wanted either one to be six off those 12. So we get forces taking up to six when we get students taking to sit. So that's a nice, easy way to get things side by side. In traditional issue move, you have to use live, and then you float to the left and then you transit margins in between to make sure that they're, you know, a certain distance from each other would strap. This gives you a great system and this Hey, put them side by side. Just tell me how you want them kind of 100 arrests. Andi, this burying height for the pictures kind of annoying. So I'm not gonna fix it on my TV to you to modify and find images that are consistent. No. One other thing that we want to do is get our buttons back. We have links, but we want them to look like the buttons that were the original. So I'm going to just prove project on we're going to add Lose Wilshire classes now from the earlier examples, you remember that we initialize a virgin Eric object on in distant objects. We specify that we want attribute class on. Then we had our values, so our values would be a forgettable strips. Documentation bt n on Bt and dash whichever class you want. I want a group on someone to say primary on the same thing to stop that or the students. What? I'm going to meet this one. Be a lighter ship in for just so we have a diversity so we can refresh and see what that looks like on There we go. So we see that horrible circle works. We have order and more looking like a button on our students looking like but also Andi, you know that they were both anchor tags. So bootstrap Milos u two style a typical ankle tag on me. You looked like a button. So go ahead and experiment with bootstrap. Experiment with making your website look cleaner than mine. Does the release Onda adding styles, removing so the default court and meeting it's more personalized 10. Customizing a View - Additional Data: Hey guys. So in this central about adding our enrollments toe our students detail page no on enrollment in fewer call in our database comprises a student I d on. Of course I d This serves the length a student toe a course which means that you have many students being linked to many courses. The objective behind this is to ensure that when we click on the details page off a student , we will see that this student is currently actively enrolled in X y Z courses. No, As a quick recap, we know that we did our scaffolding exercise for our students and so we can create a new one at its view. Details and delete. No, If I click the details button, it will trigger a call to our action in our students Controller A centre break points and I'm currently in de boat moored Onda. We just want to take a look at the object that comes back when we click details. So we're going to fetch a student on the idea that was passed in was 2000 and two Onda. We can see that one was fetched because we did not get back on everything objects. Now when we look in this object will see that we have first name, last name, middle name on. We also have to enrollments. So this student is currently associated with two courses in our enrollments table. And when you quickly come out off, debug more on, we take a look at our database to validate that clear. So in my object Explorer, I'm just going to right click horse and look at theater on here. We have three courses. Introduction to see Sharp. It's a man in calculus on din enrollment. We can see that we have students with the I D 2000 and two and roll toe both courses with ideas two and three. I'm not going to commit those two memory. Onda, obviously showing this to human really does not work. So now we're going to see how entity Framework makes it easy for us. The data bind on display data that is not directly in our table inside off our view. So here we have or details view for the student, and I'm just going to add some information to its understand to see student details on. I leave everything else, as is on underneath this last dynamic link tug, I'm going to start populating with some cord that is going to generate a table showing all off the enrollments for these students. Now, this table is going to look rather similar. Toe one that we're used to from our index speech. If you recall our index speech has a table, it has a top roll with some headers, and then it has a piece off. Oh, that is generating Rose on columns based on the data coming back inside that model. Now we do have a model being passed into our details speech. But unlike, or index page, it is not a collection. It does, however, have a collection property in it in the form off enrollments, which is what we just saw in de boat moored in our students controller. So we're going to go boats creating a table that will furnish rose on columns based on the data coming back from over enrollments collection. The first thing we need is our table on. Since we're using bootstrap, we can quickly made this table look attractive by just adding a few table classes. So I see table. And then I wanted to be convinced as well as responsive. Next we generate our top most rule, which will have our table headers. So for our table headers, I want the course title on Understands control D and duplicate these. Andi, I would like the credits. I'm not sure if I need to remove this next up. We want to utilize over, reserve you and start dynamically generating rules. According Toa what comes back in our enrollments property. So I'm going to use my at sign and write the word for each open that open. We want fire, something I can call it enrollments in. And then we have a key word in C sharp called model. No, this keyword embodies whatever data comes back inside off this model on it starts with a capital M someone to write capital and model dot on. We're going to see our enrollments, which, if we look at the data type carefully, we see it is a collection time. So for each of these, I'm going to generate a rule. So, er on in this rule, I want two columns. Andi, I understand to duplicate that inside this column. I always say that I don't like printing text without a tag. So I was putting whatever is going to go into this column inside off a Peter on. Then I can just directly reference enrollment using my at sign enrollment, which is no my object off type enrollment. So on enrollment object will furnish the course. The core society enrollment I d. The grade students on student i. D. So I'm going to say course. Since I want the course title, I have to get it from the course object. So I go into a course object and use my daughter operator once again on. Then I will be able to get the title. I'll do the same for the next one, and I will add enrollments. That's horse, not critics at the end off this exercise, what we'll have is a table being generated with all of these attributes with two columns 14 course title, one for credits. Andi, all off the related data for human readability so we can go ahead and go into debug mode and see or work no one RPG's loads. We can see quite clearly the fruits of our labor they have or table with our headers on. We have human readable data being displayed. So instead of displaying just the ID's on instead of me having to go and write in her joints to get actual data entity framework made it quite easy for us to just call on the data on demand. Now I left out a column because the student knows what they're enrolled in, but they do not know their greats. So I'm just going to hit back over to visual studio on modify. Oh, our view on I'm going to add a column for grades. So I duplicated credits and understand to say, creates or green. And then I'm going to add another column inside this rule, which has been toe have the corresponding greed data. Now greed is inside off enrollment model. So once I see enrollments, then I'll have the property grade. So I don't need to go into student or go into course. I can't escape Great right there from enrollments. I'll say this refresh on. We will see or changes and there we go. So this students is fresh. They haven't gotten any grades yet, but they see what courses they're doing on anybody move stumbles upon their profile. Will also see what courses they are doing. So this is a really quick way to get additional data into your view. I hope you understand the concept. Andi. Once you have a relationship, you can either call on the collection off related data or call directly under related data so you can go ahead and stuff, hold on enrollment situation and start creating enrollments where you associate students with courses on Did. You can view the details off the enrolment with the course details as well as the student details. That's watching, and I hope you have a good one. 11. Add Data Validations to Forms: Hey, guys, welcome to another exciting video in our journey with s p dot net NBC Web development. Today we will be looking into adding validations to our forms. Now, validations are very important because when we are accepting input from the user trying to start in our database, we want to ensure that whatever we're passing with the database meets certain rules. At the very least, a rule can be like, you know, you expect a text value for a text field or we expect a number value for a number field or your text body should be at a certain length those kinds of things. Those are validations that we want to ensure we do from the client side, meaning we don't want it to try and hit the database with invalid data before we know if this data is admissible, are not so. We want to add certain rules to our forms, such that before the user is able to actually submit this information, we can ensure that everything matches a certain standard. Now to keep things off, we'll take a look at our create action in over courses controller, as you can see, um, already in debug mode. But we want to take a look at what happens when we submit data. So we have our create action which renders our form for free horses. Understand? To bring that up, quickly, click on courses on. Then we could create new, which then renders our creative you on. Then we ask, the user watches the title of this course on how many credits it shouldn't be. This is a number on, but I shouldn't be able to put in text. Those kinds of things matter when you want to validate the information coming back. If you take a look at what happens upon the post, you see that it checks if model state is valued, which means it is assessing all the information that it just thought from the user and seeing is this information valid? What we're going to do in this video is set up our own set off validations so that this automatically assesses our rules and makes a decision based on that. But before we do that, we're going to take a look at the data base and we're going to take a look at what happens when we try to submit information If we take a look at the course table, which already have over here on, look at the designer. We'll see that both title on credits columns are designed to a low no values, which, in fairness, is probably not the best thing to do, because then it allows me to create a course with no title and no credits, which doesn't really me sense. It hits my break point now, just continue. Andi goes ahead and it actually creates that empty record with a Novalee for title Onda. Nobody for Crates. Andi. There's nothing there, which is something that we really do not want a user to be able to do. So the first step would be to change the validation rules are changed data type rules on or database so we can head back over to visual studio, bring up over designer for our course database, and we say we want to not alone knows so we can't take those alone, knows on. Then we can click off it. Then we say off the database. This is going to give us an error as you see down here, because then we're sitting or database did not accept, knows while we have values that exist. So I'm just going to remove that no record. Andi, Since I have micro operation, I just do it here since my court works. So delete this. No record. Eat it once again, we hit a very point. I'm just going to continue on there. It is removed so we know we can retry our save. So I click a bit on update again on then it is successful. This time. No Little Strand had a course with no title and no credits once again. So we're going to leave these blank because we want to test. If changing the no sitting on the rules that govern our data types in our database will be effective enough in setting off validations here. So when we click create, we see that it actually hits on error. If hits on exceptions in that something happened while trying to execute this. And if we scroll down and read the details, it says that we cannot insert on love value into the column type. So we see that some amount off validation is actually offering here. But this is probably not the best because you don't want your application toe actually pause like this when the user is using it, or give these hands off errors that using me not necessarily understand. So effective. Continue. Then you see that the page precedes the Lord. A very nasty looking error that the typical user may not necessarily know how to process and me not want to see at all. So we're going to have to modify this behaviour a bit, So I'm going to quickly exit, devolve more on. Then we will get to work. No, in orderto actually add these validation rules, we have to use some C sharp classes and enough some Opie type implementations toe have very fluid, Andi. Somewhat disjointed but unified solution. And that sounds like a paradox. But as I go through it, you appreciate what I'm saying. So the first thing we want to do is tow take a look at our model. So we said that we want to start adding validations toe our courses. So we re alone into our models Boulder into our media mixed diagram on. Then we thrilled on into our model the TT on Look at our course class. We need to appreciate what is here. on Do recall that each field that is outline here is synonymous with what is in the database. So the father we see here that credit is still unknowable value he's that we created or later, baseball. We did not openly it our models. So that is the first step you need to take some people tore Edie a mixed Bagram on. Then we right click in the open space and clicked. Hope it from needle this people to refresh the tables and click Finish this, then reloads are tables and since the last time we were here, I added middle name and date of birth to our student club. Now, do you remember that each time we refresh or do make a change of any sort of our diagram we need to build So you can either go to build on, click the solution or hold on control shift and be on that will actually effect a build operations and going to do that control shift and be on mine is already built. So when we go to our course that CS file, we will see that it is updated to show that it is no longer a notable value. It has to have an int. Andi tests have a string on the test have uninjured. You're here so you can see that this change has been made successfully. So that's a step one off for validation. Making sure that our database reflects our ambitions. Step two to our validation is to create what we call method data Classes are defendant need amis that you feel you call meta data, which is pretty much data about data. So in this case, we have later in the form off our model. Our class are our database tables on the data, a boat that would be descriptions that we want. And in this case, the descriptions we want would be our validation rules. Okay, So what we want to do at this juncture is to create some classes that would describe rules that will govern over values here. Now, since the work, we're about to do concerns models and the best place to go ahead and create the fires that we need would be in the models folder. But then if you look in the models for there, you see that you already have a kind of variety. Adi stiff. You created the project in the way that I did with the individual user account set up at the start, Then you would have these view models already existing. So in order to not mix and maintain that separation off concerns, I'm just going to create a new folder on I'm going to call it Meta Classes on, then inside middle classes. Then I will have those meta data classes that I alluded to Just know the 1st 1 I create off course is one for courses. So rightly please add Create a class on. I will call this one courses God. And then that will give me this empty class. No. My first objective is to meet this empty class mirror my actual model so I can go back to my course that CS file on. Find all of these properties that are there for me. I don't have to bring over. I don't have to value be it. Course I d because upon creation are a guitar. Any operation. We don't need to validate what the body is here, but we may want to restrict any course title toe lint off. 50 on. We wouldn't want people putting in 50 credits for any course that they're creating. Maybe the maximum above critics that any course can be is eight. So we're just going toe. Copy these two over. Put them in our meta later class on, then proceed toe, add or validations before we move on. In order to add our validations or what we call data on notations, we have to include our library that gives us that function so we'll see using system knots from Poland's model. That's later on notations. No, you may not remember this, but then when you see the pattern that I'm about to use is your studio will actually recognize this pattern on city that, Hey, this is illegal. You have to include this library to use this on. Then they would proceed to suggest that you include that library. So, like I said, the first thing I want to do is include a string land off 50. So literally I'm will to say string length and their intelligence finishes it for us on. I'm going to see 50. No, if I remove this on notice that it has no become to life everybody else's sort, somewhat greed out. But this one is actually bold white text. If I removed this than typing, this would cause an early in visual studio. And then they would suggest to me that I need that library so you can always start typing it before on then include the library richer, actively or even just include this library, and then you have no problem moving forward. I also said that former integer I want to restrict the range of values to be from one. So that means you can't have a course with zero credits on it should never pass it. No, it is worthy off nodes that you can actually include these directly on your course. That's year. So you didn't have to necessarily go and create a whole new file a whole new quarter on the whole new file and then start from scratch and put those theory would actually put them right here above title on both credits. The downside of this, however, is that each time the model gets generated or regional Rita are dated or change and you build your project. Then you're actually going to have this CS file as well as every other one. We stayed here refreshed, so any changes that you made to it will be discarded. So you really don't want to do that? Because that would lead to a lot of free work. And you have to do this each time. So I am suggesting that you create this new file on. Then you associate it with that model using a partial class on that we have that. As I said, it's jointed because they're actually different files, but unified because they're making reference to each other. So it doesn't matter what happens here. Even if the courses table seizes to exist. These courses and metadata courses table will not in any way encroach on the operation off your assistant. So next we're going to create actually another class. Andi in C sharp. You can actually use one ceasefire. The holes, many classes. Some people say it's bad practice. Some people practice it, it's up to you. You can decide what you want to do. I'm just going to use this one CIA staffs called meta courses meta data. Andi, I'm just going to create another public class, but this one will be partial, so public partial class on. I'm going to give it the same name as the model that I wanted to be associated with. So that's one of those grades, or Beatrix, where I can create Sorry, that name of the classes course I can create a partial class and give it some properties on it will work in conjunction with the original class. What I wanted to do, however, is be associated with the meta data class. So I'll use another data on notation on us a meta eat a type on. This is some fancy c sharp that's going to happen here, but he can study this pattern are just no hole to do when the time is right. So I want to associate it with courses, meta data. So at the end of this exercise, he would have created a meta data class which would have data notations that will govern the validations off your fields on. You would have associate it with the class coming from your model just in a very indirect on Opie, like we no one final change before we move on on. This is very, very, very important. And it's a common mistake that people run into trying to maintain that separation off concerns But the partial class that you defined needs to be in the same name space as the class it is. Well, let's say apart off. So if I go to courses on guy, look at the name space and see that it is in school management that models we look at, where the name space is for the partial class. You see that is, in models thought metal classes. So each folder determines that name space hierarchy, right? So we're going from the Project School Management Toe folder called Models. So school measuring toe afford are called models for another holder called letter classes, and that is its name space. So what we want to do is remove the metal classes from the name space. We can leave it physically in the folder, but the name space will associate it with this folder on any other files in that folder. So by doing so, we are putting or partial class on parity the higher art car sense with its original counterparts so we can go ahead on actually debug and see if our validation works our guests. So we will look at the courses section on just run some tests to see if our validations are working. So we go to create new on. Then, firstly, we're going to just click create. So the expectation is that once invalid data is being sent across, it will re both our attempts to create a record on this plea on air a message so we could create on without feeling anything. In our we see that the biggest reloads with an error message the credits field is required . Have we can quickly review where that air Mr just going from. I'm bringing a visual studio still in debug mode. Andi, I'm just going to go over to our view for create on courses on. Then we can just take a look at what is happening in that credits section off the farm. So remember, we have that label, which gives us the word credits on. Then we have the edits which use us over text box, but then red underneath that he actually have an issue. My helper, that is sending back a validation message. All right, on we see that the bootstrap class text bash danger is being a flight. So that is basically seeing that once I tried to submit on. I'm just going to go to my comptroller real quickly on put a break point right at this decision. So he create. And if it's that very point on, then it evaluates if the model state is valued and you see that this is evaluating the falls on, like all the other times in the previous examples where it validated on went true. So if this validates the true, then that should happen. The fact that it goes toe falls means that it will just return the same view, which is our period view. Andi. It will return whatever data was being submitted on, we know that we didn't try to submit anything. So everything comes back, has no zero on then that is what triggers the display off or validation message. So if I put in a title and you can see that I was testing this thing, So I put in a title with clearly more than 50 ages, and to recall that are validation. Rule four courses say is that we should only accept 50 are up to 50. So if I take, create, it hits it again. And it says that the state is not valid, so it returns the view with the data on we see, we get back our data. How long aside at this played are a message that we're exceeding or much Mom Lynn. If I see a 10 critic course once again recall that or validation rule said 1 to 8. So that means anything less than one and anything more than it will trigger on Aramis is if I could create once again it It's our break points. The model validity is false, so we could continue on. It will display on appropriate Aramis is displaying to the user. Hey, your leader is wrong for this reason. And so this is a pretty cool feature that we can use the ensure that for users are staying within the confines off what we expect for our data so I can create a legitimate course is be the Nets and V. C. Validation on that could be one critic course on. Then I could create and then we see tits are break points on this time. Everything is valid on because it is valid. It will go ahead and add it on DSI of the changes and then redirect to our listing off courses. So I press Ponting, the expectation is fulfilled there we have over brandy, of course, so that so we can go about setting validations on your fields. No data annotations actually serve a greater purpose than just sitting validation rules. They can actually influence what is displayed for a form or for value in the display name for helper functions. Understand? To jump over toe Is your studio real picky and show you what I mean. I do recall that we have label four on then in our details view, we do have display name for so you can actually use data a notation to influence thes The simple way to change this would be too serious it and rewrite what he wants. The downside to that is if the field changes or something about what should be displayed, changes and you have it sits at different points off your project. Then you're going to have to manually go through and change it at all those points which can be tedious. If you however pungent, use the issue of function on, then you use your data annotation than once you meet the change in the data notation it will be made right across your after Keisha. So just as a quick example for our courses form, we have title and credits, just like the fields are in over eight of these all right title and credits. So as they appear in our database, that's all they gets created in our model title credits. On that is what will be displayed in our label for on or page title on credits. If you go to details, we see title and credits. No, it seems innocent, and it seems unimportant for courses because we only have one word. What about the case off students, where we're actually collecting first name, last name, enrollment eight and other things So you can see here that last name is appearing as it does in the database with no space, no discernible space here for human readability. If we click details who see everything about the students and once again this is not very human, readable or friendly. Now, when we go to students, unlike horses, we don't have only one word, but we have two words, so we click on students and we see that we have last name, first name and in Roman into with no discernible space in between these names and labels, and that is not very user friendly. That's not good. We want to make sure that our users look at our screen and feel comfortable absorbing and digesting our information. If I go to details, you see, it is a very similar situation. So we're going to have to use some data annotation, toe, clean this up and make our students much more user friendly later when we're reading the information. So back in visual studio we want to do is create two classes to associate with students one for our mental later on, one for over partial fast Andi were called as I created this older here meta classes or arm . It'll either. But we subsequently need to change the name space so that everything flows smoothly. Someone directly bad go to class and we're creating students. Yes, sir. On then, the easy way to go about doing this is just a copy. All of the fields that are coming back from our original model in our database we drill down into the medium expel, we find students that CS and then we can copy across all of these do note once again that these things are available. So for your own purpose, you may go ahead and change the beat of these opiate your model. But I really just need to get the data annotations here for student meta data. So I copied those across and we want to run some custom labels for all of these need of these fields of the 1st 1 I'm going to do his last name and I'm going to see string length . Andi, I'm just going to set up a validation. I don't want anybody entering a string link off more than 54 last name. So I'm sitting up a validation right here on. Did you see the arrow is being displayed and visual studio is telling me I need to include this library in order to used this function. Secondly, I want to see that display needs toe have names on going to set a custom streaming. You can always pay attention to the tool tips there, always guiding it as to what values can go in. We want name, which is what is going to be displayed in the U I industry. That description and ascertain what it is on I want to display in the last space name. All right, so we're moving away from last name as one perceivable word to two words on that can just reuse these 100 stations for the first name. I don't more than 50 on a first name. Just puts in space to make it a more readable enrollment. It well, I don't need to specify a length because be it is a date. The data type is already set. It's a alot does know Anyway, Andi, I want to display enrollment needs with this piece. Or better yet, it's changed up a bit it off and Romans and rewarding it just to show you that it's not a matter off just putting us peace in here. You can label eat whatever you want on your form. All right, on me. Just do the same for Middle Liam. So middle name am limiting the number of characters sitting off middle space, name and date of birth would have similar rules for enrollment, eats and symbols hates anyway. So this idiot off birth and then the second step off this entire transformation process, he is to create a public plus public Harsh. Oh, thus on call it student Onda associate the meta hate a class with it and you can look back at the previous school. But I'm just going to target here Meta data type on then in bracket we see type off. Sorry. Type off. Andi, spell that It should be off time student meta later on as our final after which probably could have come first. Anyway, we want to make sure that our name space is the same as the name Space for our part shall target class And then having done all of this, we can go ahead and continue with our developments are in debug and see if everything clicks No, When our students page loads, you can start seeing the difference is already you see that desert nable space between last name first name date off enrollment So the labels have changed. If we go to create new see that the labels for the form have changed a little name date off enrollment will ever include the date of birth on the create age as yet details So everywhere that is dynamic Ali using that HTM a helper that we pointed arches in details. This baby and four or in the create you have label four or in our index. Next, we have this blaming for everywhere that you have something like that. By setting up or data annotations on sitting apart meta class, you will see the different labels that we set being displayed for our uses on that is indeed and in fact, how you go about customizing. What is this played without being too intrusive, Andi, by leveraging the flexibility that this framework gives you. 12. Web User Management Intro : Hey, guys. So welcome to this new video. Exciting times ahead. We're going to be looking at authentication user authentication in our school management system. Now, up to this point, we've been looking at how we go about creating content, putting our database. How creating courses students. Well, we haven't really looked at controlling who can do what on that's what user authentication is read all about putting in that one need to register on to Le Guin mechanism on restricting access based on if you're registered versus if you're not registered, what can you access if you are registered those kind of things on. That is where we want to start off today. From the very beginning off this do totally would have noticed in the top right hand corner off for enough bar that we had a register born and we had a logging born. Those have been there the entire time. I haven't clicked on them open to this very video when we will actually see what happens now, it's noteworthy that this would have been generated for you from the get goal on when I say they get go. I mean, when you were creating the project. There was an option there that asked you what kind of authentication you want. Andi, It had something for individual cones and such and so forth. We'll get into that. I bring about through those steps so you can re acquaint yourself with those options. How do you selected no authentication than no work could have been done beforehand. Have you selected individual concept of released, which is what I did. He would have gotten these buttons as well as some auto generated court That would have been in the whole project template, as you would have seen it from the start. So to begin, we're going to walk through visual studio. Just create a mock project on you will get to see the exact options that I was referring to . So here we have visual studio once again on this should be an all too familiar page. Once you open a visual studio, are routed to this start pH where they want to know. Do you want any project, etcetera, etcetera? We can just go to new project, create new project select Web application. I'm not going to give you to a specific name because I'm not really going to create when I just want to show you what I was talking about. When you select NBC and then to the right, you see that you can change authentication. So authentication right knows that, too. No authentication me because the last project I did, I created it without authentication. There are ways to get authentication in. You have to get some identity libraries and do some money will work yourself. But then you can always change authentication from the creation point on. Then click individual user cones so you do have work or school are cones, which would link it to look load any of windows authentication, which would probably use, like, held up for a more Internet internal kind of sitting. Well, then we would want to use individual user cones because we were not necessarily sure who will be accessing. So I guess, based on nature of your project, you can use individual or it can use held up. But for this purpose, I'm going to use the individual user cones on if you read the description, they say, for applications that stories of profiles in a sequel databases on it also allows users to register using existing acorns for social media platforms. All right, so it actually generates all of that court and those interfaces, and you just go in and plug in whatever is required a few accordingly. So he can just select individual user cone speak, Okay. And then when you click, OK, the project would then be prepared, as we know. So back to our project were from the get go. We actually selected individual user cones. We would be able to run a register and run a lugging. So I'm just going to walk quickly through the register on show you how the court works. This is strictly out of the box. I have not made any modifications on. We can put in an email address. I can see. And I see I already have one here, and I can use a pastor. Google is suggesting a very complicated one to me. I just use that And then I click register on their ago, were routed to the home page where we know, see, clearly displayed Hello. That email that I just entered on its giving me the ability to log off so I can click log off on then I'm went to try and log in with those exact credentials. Andi, ask Google to see if those credentials because, you know, the the password was a bit complicated to remember. So I ask you to save it. And you see, all of these screens are register. Screen this log in screen. All off. Those came out of the box with the individual user cones User identity registration engine . So I can just click lugging right here on. Do you see that? I am No road right back to that home page where I am? No logged in. All right, so in the studio or a, we're going to take a tour off this whole engine. All of the court that would have been generated. If you want to add more fields, what do we need to modify on? We will get into how we can go about customizing this to our own. It's 13. Web User Management Changes : Okay, So back to visual studio, we'll look at, firstly, our account controller enemy. We could sit on, dissect everything that is here. But what I really want to point out are the fact that it does have actions for the logging . It does have, ah, get and opposed action where it validates. Who is the person logging in and antiques on action? It's just a bunch of if statements that were used to on then you get some other court because, remember, it's not all about verifying or validating against a local database, but it also gives us could toe close the register on sign up for an application using social media cones. For this video, however, we're going to simply look at controlling registration on logging, using our old local database and what we need to do in order to support that. Now let's systematically go through all of this court, all right, so the first thing to point out is that in the Models folder you would have done some other files, particularly identity model, not CS against the models. Don't see us on this file would be that the initial Isar for the entire identity engine which is what controls are user authentication engine Right now, this user authentication engine actually automatically creates a database for you, at least if you don't already have one. If you already have one, then it takes a bit of configuration to ensure that you are going to be pointing to the database that you wanted to point toe in our model file. Identity models will see that we have two classes. Application user on application, db Context and application. Db Context points to some connection String called Default Connection. What happens is that once you generate all this corden and identity engine, it actually will generate a database for you on the first launch. All right, on this database will be generated based on the specifications set up in default connection so we can go to a solution. Explorer on Take a look at the Web config file That's Web config at the last one here that is at the project level. There is another one here in the views limb that is not the one you are to be looking at. So the last Web config file that is in project let's go both of the project. It will have under the connection strings section in line 12. It may very, but you see our connection string here with the name default connection. And if you take a look at what is in the connection string value, you see, it has a quiet, unique looking value there on what it is doing is creating a database that has the same name as your project. Andi. It will use that as the engine for your identity functions. If I take a look at server Explorer, I see that I indeed in fact do have a database set of default connection and in bracket school management. And you see that it has all off those tables, right? It has quite a few tables. Andi. I bet a few tables there afterwards. But don't mind those. You should see at least these. But that is not necessarily what is desired because we have already been working on our database. We are at this point because we're doing database first, NBC five developments. So, indeed, in fact, what should be used toe hose Our identity tables should be our database that we have come this fire with which is housed in the school management on a square Devi entities connection string. And if we look at this connection string, we see that it is indeed and in fact, pointing to the database in our local BB called school management Devi, that is the database that we really want to be using toe house all of our user interactions or user authentication on about the various user feast Hung Shin's. All right, So the first thing you want to do is change where this is pointing to, and I already have that line off court. I did this. All right on. I'll walk you through it. So I just comment this line on gun comment this line on, I'll walk you through the changes I made. I took everything out after data source on. Then I replaced it with the values coming from the data source here. So I looked in my entities connection string Onda scroll across until I saw data source. So we have connection. String is equal toe and then we have data source on. Then I took everything here from local db Sorry. Right down to the last one. I don't think you need everything, but just to give you some clarity on. Then I used the that value and paste it here in data source right here. So at least the two of them are looking to the same point. And then you're probably going to ask. So why not just change the connection string that is being referenced inside our identity model? Now, the problem with doing that is we're using entity, framework and identities does not play well with this flavor off entity framework, so it will actually give you an error. If you try to replace the connection string that identity model is using, you can try it and see the error for yourself. And if you have had any success with it, that would go contrary to what I'm seeing. Then drop me a line and let me know how we can have a discussion about it. But my thing is, I just kept default connection. I could always rename its boots. I have to make sure much is a connection string here in this conflict file on. Then I changed out the value in connection String 2.2, my eight abyss. Now, having done so once you go into debug mode, it will then one search for whatever database. So in this case, since it didn't exist, it's actually created this database at the time on. Then what it will do if the database is phone, which it will be in this case is go ahead and generate those tables. So if I look back in server explorer and look at all the tables you see that I know have all off those tables created here. And if I look inside off s being that users by right clicking and viewing the data, I will see that the user I just created is right here. The i d looks a bit word because we're probably used to that auto implementing. This is what you call a geo idea good or very unique. I devalue. All right, we have the email. Idris Onda. We have a few falls is. But look at this. Look at the password. This is not just a passer, but it's got a password Hash. Look at it. Take a good look at that. It is always good practice to encrypt your password so that if somebody by any stroke of luck got to look at your database and look at the users report. As much as they can see the email address, they should never be able to make out what this password is on. If you look at what comes up in that tool tip, you see that that is a full value off this password. It is completely unintelligible to a human being. All right, on. Then they have a few other default Carlos, that go in on you see, the user name is automatically set to whatever the email address is. All right, so that obtains for every user that you create, you see that they also have support for rules. I don't have any rules. Now let's get back to our model application user. Now the challenge with this auto generated court is that it doesn't necessarily capture all of the data that we want to capture based on our context. So, for instance, I'm doing a school management system. If I would have users, I'm going to definitely need more than email, address and password for my users. I'm probably going to want to date of birth for my students and winter ones on a dress for my teachers. I'm going to want additional information. All right, so we need to be able to modify our context. Are our model that is governing what a user looks like toe our application? No. There are a few changes that will need to be made on the 1st 1 is with application User. So we want to go ahead and at the property, date off birth to this class so I can distract prop in visual studio and pressed up twice, and that will generate that line. I would want that date off birth to be a date Time data type on. I would want it to be birth date on. Then I can just use this, clarify that using system. In order to get our daytime to recall, you have to use certain libraries to get certain class types. So we know have a new property in our user called it off birth or birthday. It's rather so that is modification number one under our belt, you know, to add as many properties as you need on, be sure to use the correct data type as you see the need toe when you're storing the data, because whatever data type you're going to use here and C Sharp is going to be translated over into our SQL for further storage. So be very, very deliberate with your data types. The next step is toe make what you call a migration or a change to the database. Now we've gone through making changes to the database. We saw that we just need to go into our SQL Explorer bring of the table modified on, then update our E DMX. The problem here, however, is that while this CD a mix has not been updated to reflect the new tables on to making the change just like that does not necessarily mean that application is going to know what to do. Now we need to run a migration and to do that, we're going to have to get our hands a bit dirty with our console, which means this is one of those things that kind of click and generate. You have to write a bit of court here to do that. So we will want to write some quote, enable migrations and further on effect the migrations using or package manager console. I have it here on doctor in my toolbar already, but then, if you don't have it. There are anywhere visible. Then you can always go to tools on. Then go to new get package manager and then you just click package manager console, and that will generate this console. So I'm went toe. So I cleared my console off any messy error that was there on. Then we will look at enabling migrations first on formal. So we'll write, enable dash my gray shin's press enter and then I'm actually going to reproduce that error that we just saw. So this arrow is saying that we can't have a migration being done in ambiguity because I have more than one context the context. It doesn't know which context or which database connection. Remember that we had to connection strings as told by our Web conflict, for that was around one. Sorry, you know what conflict we had? Context number one, Context number two Or rather, we had context number one, application DB context as well as context number two to remember that this is a database context in waiting enable migrations is saying I don't know which one you want to use this command on, so we have to be a bit more specific, so they actually instruct you as to what to say. They say Use on they say, for both. So more than one context was found to enable it for the application db context. Then we need to say enable migrations for this, that at that and then, if you want it for the entities context that we need to enable it for that that that that so I would want it on the application db context, since that is the one that's really and truly we are identifying as our user management data context. So I'm going to see here enable migrations. I can just press up to see the last woman on. Then I'll say, dash context type name and I just pressed. Albany generated that line, and then I'm just going to copy and pieced this parts to reduce the margin for error application context E B and this press enter and see what happens. All right, so that operation may have taken a while, but then we'll see here that's completed and we got a new file configuration that CS and we also have a tiny warning here, saying that they detected that another migration may have occurred, but the end result is that we have enabled it for our project. All right, so the next thing we want to do is actually register over. Migrations on migration is pretty much like making a change to the database. You make a change to the database. In this situation, though, we're making a change to the model that is generating the database. Open to this point, we have generated models based on the database. These models are generated based on the data base. In this situation, the database was generated based on application user model, which is inheriting from identity user, which is where all of those default tables and columns were generated from. So we actually modified the base model. So we need to inform the database that the model that it should emulate is no updated on. This is a principle in court First development, we're doing database first development, so called first development. That is how it is. You build them base model on, then you generate the database based on that. So in this situation, we need toe let our database know that we've made a change or we're going toe Adam migration. So I'm going to add a dash migration on I'm going to name it added Birth did. That is the name off this migration that I am registering. So I'm just going to press enter. And then this is also went to do Ah, little operation on when this is completed. You see that you would have gotten another file. And just to take a look at where these files are being stored, you actually got a new folder called Migrations. And then you see all of those migration fast being listed there. So each time you add a migration, um, then ah, file is generated just to keep truck off the changes that are being made. The good thing about this is that you can roll back to a specific migration in case you think you may have botched your data model or you made a change that was undesirably can just roll back your migration. I would undo the changes to your database. So this code first methodology does come in handy when you're dealing with a very dynamic project on do. You don't necessarily know what your database is until you're developing the feature. So this works well with a more agile approach, then having the database and building around the database. That being said after we get this fire, the last thing we need to do is actually update the database services update, stash database and then press enter. All right, And then we get a bit of Burbage scene that we can see. What did Daschle Toby space dash verbals on that would show us all of the SQL statements being applied to the target database meaning whatever statement should have been used to me that change and add that column. But the end result is we seen or read writing, so we can assume that we have no errors. And then we can always go back to our server explorer and refresh our table and voila! There is birthday. It added to our table so you can do this with as many other columns as you see fit. I'm just using birthday today as a quick example. Once again, you simply add your column here or as a property rather on. Then you run a migration. The great thing is that you already enabled migrations, so you don't need to go through that step again. What happens here after is that each time you make a change, you have to add a migration until it's a name. What migration was done on. Then you're on update command on that will keep track off all of your changes as you go along because you know your project may expand it. My contract, Your requirements change on. You need to be brother dynamic with what you're storing as user information. So that is how you go about customizing this identity model to what you may need in order to complete your tusk. No, we're have about two more steps and then we can call this relatively completed. The facts that you added this to the database does not change the view. So remember, although we update the model, we still need to modify our view to be able to collect this information and there a few more steps that needs to go in in order to accomplish this. So, firstly, we need to understand where what is stored. So remember, all views are stored in a views folder on in a folder that corresponds with the controller that it is related to. So we have the account controller for user authentication. So we have the cones views folder for all views related to that. And then we do have or register page now or register Page is what asked us for the user name, which, in other words, would be the email on the password and then it As for confirm password. As you see, there's some configuration, some generated cord in the back in that gives us the the comparison between the password and the confirmed pastor before it actually accepts that data. You can attempt to have miss much passwords and see that validation message that comes back . And remember that must validation, Miss, It will come back up top here or the set off them would come back here. So what we want to do is add birth date as a field. So I already have email. I would probably want to select or collect the birth date right after emails. I can change us the birth date on birthdate, but then you would notice that there is no birth date coming up in the intelligence because our model does not know anything about birthdate, so I'm just going to put it there, and we see that it has a red line because our model once again does not know what birthday it is. If we look at what the model is, we'll see. Another continues new construct being introduced, called a view model. So it's really just a model like any other class that we've seen. It's just that the view model, the principal off view models, is that you, the developer, can actually customize a class that helps you to add your own date, annotations and validations and so on. And then you pass it on into the database, or much about to the model at will. I would have to do an entirely different tutorial on that view model, point of view and perspective. But then let's just beer through this one, and hopefully you connect the dots. If not, you can always watch that video. So we need to modify our view model so that the page will know about birthdate. So if we just control and click on register view, model will be navigated to it. Andi, it is really being hosed in a file called a cone to view models in Solution Explorer. If we go into models will see that we have, Ah, coned view models, All right. And then if we open that file will see that we have quite a few model's view models rather that kind off have the same names as some off the views that you have seen in the A cones controller. All right, say a verify cord view model. You have verify cord view. You have forgot view model. If you look in solution. Xperia have forgot forgot password views are so read. Essentially, a view model is more of a specific type off class that you create and you can set up your data and notations that will. And you see that there quite a few data annotations that with validation and what is displayed on that gives you greater control over how you generate your view on what you display on it vs the view Coming the model coming back from the database where you kinda have to work with what you get kind of vibe. So this is a far more flexible way for you to it's a bit more work, but it is a flexible way for you to manage your views. So if we look at our register view model will see that this is required. It's an email address. Displays emails. We all know from our data annotations video that we can change what is displayed here. All right. Email address slash user name since they're doubling. All right, so I can see even just last user name. And that would change that display on. We have the property email. So what I need to do in order for this view model to knowable birthdate is at it here as a property, So I will go down. So I'm going to make the birthdate mandatory. So I'm going to see you required. I'm going to specify the data types. So you have some default ones like this. That's an email just attribute. But this one, I'm going to have to use my data type. I think these are Denham's so data type and then open and close parentheses and inside of those pregnancies as the parameters, I was a data type dot date time and you see, they have quite a few ones coming up in the intelligence. So you have all of those that you can use if you need to add that kind of validation toe whatever feel durable toe put in. So the data type must be off type. The time on the display will be it's off birth on once again. This is where that display name comes in. Because I'm really calling this birthdate. So it is off. Type it. Time on it is birth beat andan once again after include the library for daytime, which is using system. Now, having done that, the airline will go away because no, our model knows what birthday it is on. Then. The final piece of this puzzle is to modify over account controller in our register host option where it is actually loading up our model to send off to the database. So we say far user is equal to new application user, remember where application user is coming from. It is the class that we just added Birthdate to application user birthday it. So we need to go updates this'll creation model discretion off on object off application user to see user name email on. Then Isler added it. So that's what it would be. But we don't want it to be a time, but no, we'll just add it on and say birth. It is equal toe model dot birthdates. So remember that wants the post option. Once we get the view and then it is submitted, it turns over its the post action. The first action is then receiving on object offer. Disturb you model called Model on In this register view model or model arm object called Model we are using the corresponding data feels So Phil wrote these properties, so that means I could easily add another field here and call the user name. And then, instead of using the email address for both female and user name, we can say model dot user name after adding on appropriate textbooks or collection section for the user name. So whatever modifications you're going to make to your application user the model. You have to also make it to your register view model, then the register view in order to have synchronicity there on, then finally or account controller on all off. That can't be done without doing these migration steps. So I will actually in the notes right out the steps towards filling out or completing all these tasks. Step by step. If you follow those steps, then you can't leave any stone unturned it. So to wrap this up, let us make sure that the changes that we made our reflecting in the functionality so once again I made a change of the annotations. I said, Even if justice is a name, I don't want to use us. Today we have the same email address or user name. If I try to register, then we will get something about the date of birth. Feel being required because we sort of that bit annotation on the passwords do not much, because there's also generated court or politicians that govern that. So all of those things are in place, the date of birth, really and truly you want to use a and a picker here. You don't want toe have date of birth, just being a free text field as much as it's a date time, and it will not accept that. But then users will try to type in the date according to hold. They think I did should local. Some people say year months there some people say year the months. Some say the months year essentially Citrus, Citrus, so you want to use a cut in the picture and force the standard from right here as much as you can. But I won't go into that, Trent. No, I'll just right. Virgin Mary. Kinda random bids. Andi, I will use a password test password on its where they don't know that you can use theater. Annotations actually govern whole stripped. These passwords are I think that's a miss much. Also, at metric, that is a mismatch. So attacking a posturing and then press register. So it is actually click register and see what happens on. Then it gives us that standard about that bastard. So let me try that again. Test. So the posture it is. Capital T capital, P test, Password one. All right, so we have a least one digit on. We have at least one upper case. I give you two so we shouldn't have a problem. No. All right. And we see that we progressed beyond that checkpoint on. If we take a quick look in our database, I'll just quickly bring up or solution Explorer, drill down into our tables into our databases and then entire tables, and we look at the data in SB Net users and there we have it. We have the user that was created earlier, and it got a very generic birth date because that birthday field can't be no than we specified that in our database design. So it's not know. And so you got a Virgin Mary birth date on. Also, we see here that the one we just created actually got the birthday that we put in. All right, so those are things that you can do to make sure that you're capturing all of the required fields according to your context and application. Onda customize the speed on its user identity engine. All right, so thanks for watching guys. I hope you learn toe locked once again. If you were unsure about anything, drop me a line in the comments on I'll be sure to get back to you as quickly as possible. On in the next video. We'll be looking at how we can go both restricting access to certain parts of for application 14. Web User Management Authorize : guys, welcome back to this tutorial today. We'll be looking at whole week and global restricting access to certain parts off our site . No, open to this point. I'm sure you understand that the controller literally controls the entire cited controls of flow off things. Anything that you request to view, which were under what we call literally of you is going to be searched for and later rendered by or controllers. Every request will pass through the controller. Andi. It will leave the results. What we want to look at to the is restricting what somebody can our cannot see. All right, so today will be using this course is controller as our guinea pig. As as it were on. Then we will dissect what we can put in tow control. Who can see what? No. The first thing that I want to point out is a new data on notation that you have seen in the account controller called authorized. The authorized means that you cannot access anything inside this controller unless you are authorized or by extension, authenticated, authenticated meaning you have signed into the application and you're identified as an authorised person. In short, if I want to restrict everything inside off my courses. Controller. Meaning you can't view the list. Of course, is you can't be the detail of any course you can create a course on. You can edit or do any off these operations. In addition to whatever else you may have added to the controller, Then I need only right above the controller declaration. Right Open square brackets on the word authorized, and you can always hover over it ends and see that it is. It specifies that a controller our action is restricted toe only people who meets the authorization requirement. And in this case you have to be loved being to be counted as authorized. So if we do this and then we run on an attempt to Bro's toe, anything inside off the controller for courses, then we should be redirected to the logging peach. And we'll try that. No. In our last video, we did test the registration and log in feature that we saw that they work on. We just specify that courses should require some amount of authorization before it grants access, which means that this button, which should lead to courses, should restrict me from proceeding. And let's put that to the test. So please learn more on, then voila! I am no required to log in. And then if I say lugging using that existing user information, then I will be redirected to the courses index speech. I can go back home on for the entire duration that I am loved being. I can click, learn more on the go ahead without any hindrance. All right. And then once I'm here, remember that the authorized was over the entire controller. So once I'm authorized, I can know it and delete and view details and do all of the wonderful things that I would be allowed to do as an authorised person. I understand to log off, and then we'll continue with our experiments. And you see that having logged off it moved me automatically from the restricted page back toe appears that it doesn't really care if I access are not so for or students controller. We also want to authorize because they don't want every and anybody to be able to just get into the system and view on delete and edit, etcetera. But then I want to lift the restriction on the view for the student listing, so everything is requires authorization. But I want this particular action. Maybe some others also. But in this situation, this particular one to be ableto be viewed without having the proper authorization. So there's another attributes called Hello Anonymous, which, if you read the tool tip kindof overrides. The authorize attributes author as a tribute to his global. It's the overlord powerful controller has the answer to it. But then anywhere that has a low, anonymous kind of says, OK, I'll make an exception for this one. You don't have to be authorized for that one, All right, so you can add that to index. I want to restrict the creation of a student and editing of a student's and deletion off a student by another registered user. So I leave those alone on. Then we can see if that works. All right, so we're not love been, and then we want to go over and view our students, so I goto our students on. Then we see well, it loads, some still not lovin on. I'm able to bro's all students. However, when I tried to create new edit or few details and open all of these in different up, so we can see the different results. You see this, this is create its requiring me to log in. This one is at it. It's requiring me to log in. And this one was for details. It's requiring me to lug in. So you see, although we authorize the entire controller, we can Hello anonymous access tope articular views that, you know, if the person is not love being okay, Finally let you see the information. But to get any further, we need you to be authorized. You can also add this authorized apart to kill our views. If it is a case where you have the controller and you want all of it, Toby opened everybody but for one or two music and just at that author as attributes directly toe that action in your controller. So instead of allowing anonymous, you would authorize right here above that action, which would then restrict that actions accessibility. So I hope you guys phone value in this video. The next video we'll talk about restricting it based on rules and modifying what options are available on the view when the person is authorised as opposed when they're not authorized or when they are a particulary rule versus when they're not. All right, so thanks for viewing and see you next time. 15. Adding Roles and Authorizations: Hey, guys. In our last video, we were going through setting off user authentication on in this video, we will be looking at setting up rules her busto further control. Who can access white? No, there are a few things that we need to do. Rules would already be enabled by virtue of the fact that we have individual user cones on . We already set up the database for user authentication. So we just need to have ah, few more tweaks on. We will get our rules, beast or roll separation in tact in our application. Okay, so we'll start over journey in our Stipe of class on Since the last video, I actually operated to visual studio community additional 2090. So the interface may look at the difference as I go around, but essentially, it's pretty much the same as 2017 which is what we started this course Siris in. So we start with start up on. What I want to do is actually create a few rules to begin with. So, in the context off, our school management system will probably have an admin a principle on Let's see ah user, our teacher. So we want at least three rules to begin with. So what I'm going to do is define a function here in the start of class that is actually going to go ahead and create those rules as soon as application will starts up, since that's what this classes here for. So I just go ahead and I'll treat a function that creates you, Rose and users on what I'm going to do here, firstly, is include my application BD context. Do you recall that application BB context would have been defined in our identity model right here. And it represents that direct connection which we call the fall of connection to our database that is hosing over user beast tables. So here, default connection is the king right toward database. So what we want to do is initialize an object off that here because what we want to do is to do a few data bees operations. So we need to include our application bebe context and I got a context Z photo and then you see that it's doing us you need to include something. So a nice keeper shark. It is control and dot and it will show us what has happened. You can't script that and then we see in you application levy contexts. Or maybe you're that bar kindof developer. Sweet would always just see a fire here. Our context deep was new application Devi context Next we want to enable to managers in the farm off the roll manager on the user manager. So I'm just going to initialize an object called it rolling Manager Onda I'm going to see this is equal to new rule Manager and I can just see control that which will promise me has still needs to be installed included Sorry second just percenter and go right ahead And I want this to have identity roll We're just going to require another inclusion so controlled that once again percenter. So as you go along, you can just go ahead and include all of those libraries that need to be installed on this . This is just a part of the initialization, so you can just go ahead and type along with me Rule store frond identity rule once again on all of this within the context, off context. So essentially we are initializing a role manager on we're passing in the identity rule on DWI. It's were initialized and constructor past mean bro store without entity, role on the punt, the value off context here passing the database that this role manager should be initialized within the context off I will do something similar for you are user monitor So this duplicate that nine and just change soft words. So these will be user manager. This is no user manager Soldier at least has. And this assumes that set up this would be application user and this would be user store on once again, case on user on context to me is the scene. No, we actually need to put it into action. So what I'm about to do is write on its statement to say that ephemeral already exists. If I roll, does not exist, then created on Dwell. Obviously it wouldn't create it if it already exists. I'm actually going to create an admin user initially. So if and I'm going to say not on droll manager allows me to actually toe find or run certain role specific operations so I can see rule exists on dysfunction will actually go into the rules database on the road stable. Sorry and check if a rule exists by this name. So here. Well, my juicy if there is a role that exists with the name admin All right. But in this case, I'm taking, if not so I want to see if there is no rule admin, Then do this. And what I want to do is create the first rule. So I'm just going to initialize something off type identity rule. And then I went to give this role object and name, so the idea would be implied once it goes into the database. But I'm going to give it the name on the name I'm going to give it. Is that manner aan den? I'm just going to see a rule manager go ahead on and creates this role. So Roll Manager once again has some role specific operations that help us to medically rules stable. So we don't have to do much work in getting data in and out off the stable as with regular tables. Once it's a user, our rules table as it would have been generated then we have certain operations given to us by its different more that help us to manipulate these tables. So I know that I have the role. I'm actually just went to create a user off the but your son user. And I'll do my object initialize your son, which would then say user new. So you could have done that here. He could have just done the curly braces here. And then this building Namie was admitted. Some just living it both ways. Just in case, hearing you to see sharp on. Do you want to see how Opie works there? Certain we stick it around this so I'll give this user knee and just give it would mean keep it simple on the part of the email. Sorry said to be I mean at message and then g school management for for com. All right, on then, What we won't be able to do is actually just set the password directly here. At least I don't want to because I would want to actually see bar Posser is equality, and I'll just say password just to keep it simple. But do recall that our database is actually going to or at least our functions are actually going toe incorrect. This password before it actually gets stored in the database so password is equal to this simple word. I just I'm just doing this. I can actually remember, but this is very fact practice. I'm going forward. So then I'll see if our Yes, sir, I'm just I'm just creating variables here is equal to. And then here's where user manager comes in because all we want to actually create a user. So we call on our user monitor, object, and then we see creates, but we know we can, and then we're passing it. And if you look at the function over the Lazio Serie can create a user with no password All right. You just passed in the object off application user, or you can actually create a pass or user with a password on you pass in the user object or application, user object and whatever the password is in string form. So this function would actually handle that encryption. Andi insertion into the data bees. So despots in over user object as well those a or password on, then, just at a cursory check here to see if our creations, So any time you actually create, carry out on entity, framework, action or function. Usually this function will return some value. So the up so the so the user object Here are us are object here will actually have a value so we can see us iron dot succeeded. All right, so it will return a Boolean if it was successful, It also returns list stuff. Arrows. So I guess if this is falls, then you will get at least off errors. If this is true, then obviously whatever. You tried work. So if this operation was successful, then we can see far results is equal to or using manager once again on we want to add to rule on after after insurance and decide experience user dots I d. Onda the role which is of me or let me start from the top. So we checked. Firstly, if there is a role called admin in our rules tables All right. So Roll Manager is our lease on with our old steals our to sing. Does the rule exist? Yes or no? No. If it does not which it wouldn't at this stage. Then we want to First day creates a role object and then fill it in with the data on. In this case, you want to give it the name admin on. Then we go ahead and create the role so the role needs to exist. Then we go ahead and creates on admin user on. Then we give that admin user positive, and we see it creates this user with that passers. So, no, we would have an ad. Mineral Onda. We have a user called admin. What we don't have is an association between our user on Dover role. So that is where this line comes in, where it is. If the user was successfully created, right, and if it got this fire, then the rule would be successfully created. If the roles created on the user was created, then we want to see if it was successfully created. Then we want toe add to rule this user on that rule. In other words, no. We want to create an association between this user I d. Whatever user id's? No, a scientist. This object because once in two different more friends, this operation this object is basically updated with the idea coming from the database on Do we have the Admiral? So this function will actually handle finding out the two id's on associating them. No, I think all of this is very important for the admin, because Rodman users are damn, it doesn't usually have one very few admin users. You don't go go on creating Adnan users, however, for the principal or the supervisor and the teachers, it's not that serious. So what we can do is simply check if those rules exist, it's understand, to see if nots role in my nature knots roll exists on this time went to search for that's new teacher. So if there is no teacher rule, then that understands a copy this court here on, then I'm going to the space that there and I'm going to change the role name to teacher and there we have it. So once again on the first run as off writing this court, none off These rules exist. So this will run on create Admiral and admin user. This will run and create a teacher rule happened. I'm just going to put in one more for a supervisor. She is very similar to that again super by Sir Onda supervisor. All right. And I understand the control shift and be to build on and just then sure I have no errors. Right. So we have no errors. I know that we've created all of this. What we need to do is actually call our function in our configuration function, which runs as soon as the application starts. Its understand to call this function, I can to stop convinced it they sit there on then we can execute and watch that our rules get created. Okay, so we got an error here. Um, if you were falling up to this point in all of the victors, remember that we modified over application user objects. Toe, actually, have I beat off birth? All right. So as a result, when we're creating this user and over, start off. Sorry. It's just saying that we have any invalid beads, beads, time results. So we need to fix that. So I'm just going to stop history of quickly. And then what we need to do is actually add eight off birth here. Birthday it equals and other sea beat time. I don't know. Solar fire me to do a frontal that's using system, and then we can try this again. OK, so we see that our application came up successfully, but I'm not quite interested in what's going on here, but quickly out of the Strand. Logan, as the admin user, which should have been created when this was started up. Okay, so we're not entirely interested in what is on this screen. However, we want to check our database to see that our rules were created. Service little bits of cervix for having stopped the people mood on the say so. Table data on. We want to see that our three year olds have been created. Andi so said so done. So we have our three rolls admissible by their teacher on the respected I ds on defy goto s being its user than we should see or admin user. Okay. I'm not seeing the acumen, user. I'm going to have to check that. Oh, because I'm not entirely sure why, uh, we can get back to that. So if the admin user was not successfully created and that means that association was not done either, which would be found in user roles, right? So there is no association, So at least we have or three rolls had mean supervisor teacher on. We have at least we have to users here. No, The thing is, if we wanted to associate them at least money Willy, then we just need our user. I d phone here in this follow on. We just need our role. I d phoned in this problem and then we could just put them side by side here manually on. Then we would have an admin user versus a teacher versus if that if that user I d appears twice with two different rules than that used there has those rules that have been assigned . So that's just debug. What happened? Why our admin user who was not created? Andi, I have a strong suspicion That's to do with using a week password. But I'm going to treat this court a bit on. I'm actually just going toe t this bit here on day. I'm going to run it before the if statements, just so I can t believe what is happening. It's understand. Set a debo point here because it's see yourself creates of the object successfully on understand to go ahead and press run on DSI What happens? All right, so need start up. We Fitzherbert pointed for looking or user object. We see that we have here. I've been on the idea is already there on then I can step through using x 11. We go line by line. So I have your password. And then we hit our function here, which had actually create this user on this plastering. So after I press f 11 then it will go toe If statements which will then see user creation was successful. Oh, yeah. So if I first effort again, then it should go into the if statement on proceed associates the user i d for that admin user with the role i d. So I'm not entirely sure why it did not work while it was a part of the If statement. All right, so our application is up this time, but I'm just going to stop because I'm not really interested in competition. At this moment on, I'm going to go to my data based on users on DSI. If my eyes deceived me or not, Onda, there we go. So overused there has been created successfully, so that means I should be able to log in with this admin user on if we look in user rose and we just need to refresh. Well, I already did it. But if you're not seeing sick industry first a query and you see that you have that association user I d and roll idea. I'm not entirely sure why the cool didn't run while it was in the statements. But the fact is we really don't want it to run again. Which is why we would have put it inside this statement to only happen if there is no ad mineral. So this kind of course, you could actually put into an application. You know, you're deploying for the first time on these are presets. They can put any preset you wish he connects, create a function creative presets, and just call the function inside this configuration function. In the start of us, I know that we have successfully created some rose and created at these going user. And there are, or what we want to do is on this is very, very, very introductory not s practice at all, but for the sea off example, I'll do it this way. What we want to do is actually modify over registration process to include rules. The first thing I want to do is go to my models. Andi, modify the identity model. So the first thing I want to do is go over to models and modify my account of you model on . Find the urge, Mr. Model on. I want to add here property toe accommodate rules. All right, so I'm just going to create another required field. Given the discipline year user roles on this is going to be a string. I don't want to call it user or you'd also notes that in our database the email on the user name, I would get the same thing. In this case, they don't have the same thing. But for every previously created one, they have the same value. So what I'm going to do is include user name as a property when registering on, make sure that we sit use any of separately. All right, So I'm just So what? User new and change this property to user. Next up, we want to initialize our combo box for the view for destruction. Some this musical into my cones. Controller Onda, what will be happening in this controller is I want toe run a query against my rules table to see all of the rules in table on present them as options for destruction. All right, so the first thing I want to do is actually create a property for application. He be context. Remember, that is what we will be leasing with our database on. I'm just going to initialize it. Having done that, we want to make sure that when the person user for our site was the register on, we rendered the view were actually rendering a list or combo box with all of their options . So I'm the simple cough view Bug Darts rules under many ways to do this under sprinted, it has a view, but on a call of a select this on this would actually go in hand the later when we start looking at how we associate files and have a whole have dropped bones. But in this situation, a select list. Firstly, it takes the data source, which would be context about rules which would give us all rules. But best practice would have us create the admin users outside off the box knots, a lower user to create or register and register as and I've been. So while I'm when I'm not doing it as a best practice. By allowing the user to choose their role, we can still, you know, explore why certain things are just about idea also. So in this situation I would modify my data source on exclude the ad minerals. So I thought on teens had minutes. So you can see where the name there's not continuing at me and then that would see exclude Advil and then we can just put its list make relies easier on there. We would have satisfied the very first constructor where you see that they're nine off them and we're about to employ one off the nine. That is not this with a select list. You can actually see when it is selected, what value you want. So I want a value name, not the I d. On also watch should be displayed on die. Also want name to be displayed. So if you ever worked with a combo box in html, then you would know that you always specify the value on you specify the text to be displayed. So this is essentially our doing it. We're looking at this list off objects off type rule on. We know that any variable or any object rather off type Roisman have name and idea. So we're saying we want the name to be the value on We want name to be the displayed value . Also write our doing all of that before we return the view Now, in the view on district like this and see court of you What we want to do is include another form groups section for our newly created combo box understands copy in peace that formed group on This would be a label four and we can change that from confirmed passwords to user role. But when we also have one for using inside just through this twice on that probably put user name above email. All right, But I still won at the time, so I still user name Onda. We will see if that value So this would also be a text box for as opposed toe passer for the textbooks for our using it. All right, and then likewise don't Here. We actually would change this to user role for the label, but we want our HTML helper for a drop down list. So is a drop down list. Then we select our property using rule put everything in quotation marks Onda we see that we want to use a select list on way are using view bug butts rules. So we are implicitly converting whatever values inside off you but rose into a select list . And you remember that That is what we said over here, view about dot rules is a new select list. So this increase it conversion should not feel considering that we already put in a select list there on. Then we just have one more empty prior metal on then that should teak here off our destruction Peach. All right, so we've modified the get or distributed on the actual HTML. No, we need to modify what happens when we posed back. So when a user actually comes in to be registered their certainties that Nieto affair here Firstly, we no need to modify our using an object to know that it is no longer taking email. But it is now taking using it because we added that on then the next thing we want to do is putting on a sing function to say this dot user manager docks add to rule. So we're actually going to associate this user with the role on we would remember from the previous activity that what we want is our user idea. So, user dot i d onda our rule by name, which we would get through model that user role are so we have a better from Eric here. Oh, I'm sorry. I'm using a wait here, so whatever I'm using has to be a sink. So it's basing on. There we go. So our eat use their manager on. We're passing in the user i d because the user would have been created from this function. Call on if it was successful, then we would automatically sign in on. I mean, you could always street the secret always move this sign in function after the creation and the association off the user with the role. And then you could rewrote to the page Andi. Similarly, if we after render and error than what we would want to do is real or select list because when the page reloads with our era's widow ones on empty kumble box for the user to have to sit down and figure out hold like get something back. So we want to reload over view bug With this select list such that went returns. This view, it's knows exactly what the municipal back in Ondo so we can test this Onda ensure that our application works just fine. No, our application is up. Let's try and register at Brand User and see what experience his life. All right, so no, we see that we have using him and we have used a role with a drop down there. Stuff foresee, Could x We could style this were using bootstrap To me, it looked like I dropped on. That fits in with the others. But let's go ahead right now, somewhere to state test teacher or, let's say, a teacher one on the email garrison to see. I said, You know, there slash using in, so we need to modify or model. So you teak all that stuff using him. All right, so in villages should be teacher at school come date of birth will just leave that that password. I'll use a simple pass it again and then use a role. You notice that this is blank over. When I take you, see that it actually has values excluding admin based on the query that we wrote to fill this combo box. The reason There is a blood space, areas that in our cold we did have a blank speeds in over each TML in the form of this. All right, so that's what that they gave us a blind space as the first on default buddy. So we can go back and complete or destruction by selecting a roller, announced a teacher. And then I could register and there were some distance. Receive that using the imposter combination for a teacher one. And if I click, manage or click on the user name, you see that you actually have some auto generated functions for the user here. I won't get into that today, but we can definitely tell that our teacher has been created on them. Just want to come out of people more real quickly. On we skip over to the database and see watch rule. This teacher has been assigned, so if I refresh the user's table, then you'll see teacher coming up. So we have the teacher at school dot com with the email and we see that the car to use any mist coming across based on the changes that we have made on. If I goto the user on rules and we should see a second role here coming up with the teachers Heidi and the teacher's role, I d. And there we go. So we have the teachers I d on. We have the teacher rule I d. On. That is essentially how you go a boat creating rules. Know the last thing I want to cover in this video is how you can go boat authorizing a controller based on the rule. So we had this cost using authorized to say that you are unable to access certain things in a controller or the entire controller. If you are not allowed, then I know what we want to do is see if you're not loved in under a particulate rule, then you are restricted from accessing these things. Now let's see, for instance, we already have admitted already have teacher teachers usually are the ones who should be looking at the students and their details. The admin might be the I t. Guy, so admin might not necessarily be able Teoh access all of this and that that may be a far fits in America incident that ad men should be able to do all but just humor me for this scenario on, Let's just say that anything inside off the students controller should only be accessible to people who are in the teacher role. So on the authorize attributes that is already here on our students controller, I'm just going to puts in open and close parentheses on. Then I'm going to see roles. And then you see the intense senses seeing rows equal. And then what is expecting is a strength with the rules that should be able to access. So you can actually have multiple rules here against a teacher. Hama. I mean, comma, as many as you need, all right, in this case, because we only have to users in either. Oh, I'm just gonna demonstrate with teacher versus admin. So let's go through this again. A teacher is authorized to access everything inside off this students controller. We already a load anonymous on index, so that means an admin or not long thing person should be with That's ESP index. However, if anybody who is not in the teacher rule loved in our otherwise attempts to go to details or create or anything else inside this controller, Then he should fail. Now let us test that. I know that the application is off. I have realized that there is a bug where if you are in debug mode and you're already loved being, then when you try to do this operation, it will prompt you to log in as though the author ASP attributes is not working. So to make sure that you get the most out of this this I recommend that you love off on do you try and love you again? So I loved off and I log in on destry some changes that they made to the law in presence where I changed blogging from email to user name as usually we asked people to log in with user name and password on in the same wien in the court. I actually updated sign in manager. So this is in a constant troller and this is a post log in front function. I change signing manager that password signing ceasing to be model dots user name. So I have dated the logging model, have user name instead off email on the signing function. Actually takes the user name Onda password. So because we're using email as they using a mope until no, because we added user name as a field in our registration process, we want to make sure that we're sending in with user name and password, which means the other two users would need to be abated. Tough user names that are not the email Chris and you told those are some changes that have made so you can go ahead and meet those changes. But as it relates also again in I just love and quickly as a teacher. And then I'll demonstrate that a teacher can go to all students, which allows anonymous but can also go ahead on Go to its details, the lead or create. And I'm just middle clicking toe open these up in you tabs so I can show you that each page lords, as we would expect since this person is in the car to roll. No, what I'm going to do is sign out as a teacher and then log in as the admin user. Andi now rose to students which will alone me. But then when I click on create new, it will prompt me to log in because my admin rule is not a low toe access this age on DSO the person is loved in, but they're being prompted toe Blufgan again because they're not authorized. So that is essentially how you can global, using rules to control access the different parts off your application on how you go boating, installing rules and customizing them to your purpose. All of this is extensible for different people have different requirements, but this is pretty much out of the box. With minimal cool, you can leverage Microsoft's existing rules monitoring system. Eso watching on the sea unite style. 16. Add Project to Github: Hey, guys, in this video, we'll be looking at how you can go about adding your projects, which would be in visual studio to get help for source central purposes. Now get top has been around for quite some time, as at the time of this recording, it is cold by Microsoft. On it is a development platform geared towards promoting open source. Open source essentially means that you're sharing your code. You know you have a project to work done. You want other people to partake in it, maybe add to it. You know that's what guitar promotes on DSO. By using get up, you can actually have a safe place to Syria court or host your code. Just in case like you have any technical difficulties, your machine goes down or anything like that. You know it's here in the code that you can just read. Don't load all of your latest work on continue. It also does version control, which means that for each change that you make, you can actually check in that portion on. If something goes wrong, you can roll back to the previous really working portion, so it's very flexible. It's perfect for a team courting Andi. Even as an individual, you can read many benefits from using it up. So you get to get told by going to get up dot com on. Then you will be greeted with this landing page. You can opt to sign up if you don't already have a continous Pretty easy. Just the user name on email address and a password on. You can see that I already have an account. So I just signed in on this would be Michael. No, I usually use this for academic purposes. So today we want to get our school management's project that we've been working on. And here it is. We want to get this up on ghetto eso. At the time of creating this project, you probably ticked at the source control. You probably didn't either way. As you've been going along, you'd have noticed that I have little padlocks and red ticks beside my files. This is on implicit. Are inherent source control mechanism given to us by visual studio where we can actually track are versions right here on our own local machine on visual studio is allowing us to see what has changed since the time the file has was created or since the last version of the file. Right. So, up until no, we haven't checked in anything. All of our ticks are there. If I expand the controllers for you, see that we've made changes all of these controllers. So all of them have takes? No. What we want to do is actually check in all the changes that we've made. Best practice off course would actually have us do shorter accounts of chickens as opposed to building or the whole feature or a whole host of features and then checking in Who would want to probably chicken per feature so that if anything went wrong, you can always roll back and have one less feature than you did before the thing went around, right? So, no, I'm going to show you two scenarios. You're either in scenario one where you didn't click at service control and then your product would look like this. So this is another project that I have on. You see, It has no takes, knows no padlocks. And don't. Here it is at the project. It's a source control. All right, so if you're seeing this ad to source control. Then he can just go ahead and click that on. You should see gets. If you don't see get, it probably means you did not install. They get function in visual studio. So you want to go back to your visual studio installer and make sure you select get in the list of options that they give you, but you can just go ahead and click it on. That would create a local repository on your machine that would allow you to do a version. Control Andi tracking right here on your machine. So this is processing for a while. Ultimately, what we're aiming for is that once you have done that successfully, then you should see change to something like this. Where you see they get symbol. It is the engine behind the source bunch. Also, there is a source control engine called git on the This is the engine behind. Say, get hub a big pocket and quite a few others. Even as your Dev Ops, formerly known as TFS online even as your develops is pushing the gets engine All right, once you added it successfully as a local repository than you should see something looking like this on. Do you start seeing those padlocks and locks and those sticks beside your files? It will have asked you to make sure you see while changes before you continue on. Then in the team Explorer. What you will see, I have quite a few here. So you mean us up this extensive list on the year local? Get her positives repositories section foot for me. I have the option off. A zero develops on. Get up. So at zero developed is also free. You can sign up for that one are you need a live a cones to get through with this one. But get top is open to everybody regardless off if you have a live accords or not. So that's why I'm using Gets hope andi. Either way, Microsoft owns both, so it's becoming more homogeneous as we go along. We can always go ahead and say connect. And if you're not seeing, gets up Then once again, you'll probably want to check your your visual studio installer on. Make sure that you have the visual studio tools for ghetto. I want to show you guys a nice, easy way to get started. you can wreck, click on your solution on. Then we go toe commit. So I have a few changes that need to be committed. Committing means that you're actually going toe. Send these changes to the source Bunch of your you're making a check. Your checking in court literally. Right. So I'm going to submit all of these changes to my repository. So Iraq click on the solution on advise you do it that the solution level so that everything that falls underneath in the project or projects will get checked in each time. So you just right click that you go to commit. And then that changes the menu to ask you which brunch master is the default branch on. Do you have to enter a commit message? Know the purpose of a current message is to let your team know or even you, because maybe you look back at it. I wonder what change ALS meat here. All right, so you just put in a comment to see or what new features were added. So let me just do that quickly, Okay? So you can see that my comment is quiet long on their things that I did that I'm not capturing here. Which is why I said in the beginning that it's kind of bad practice to be checking in court after a very prolonged period. So you want your comment to tell the whole story and also in order to tell the whole story is better. You have short stories, then have one big story and then try to capture it all in one big epistle. Right? We have added controllers. Since the start of the project, we have added the data model and we added user authentication functionality off worse. With each of these changes, what we would want to do is spelled out okay, this is what was done. This change. This was always done for that change, right? So once again. But practice here. But I'm teaching us that you go alone. So you learn for your own purpose not to do it like that. And then you see, calm it all and you would be tempted to the slick it. But once again, I want to show you the simpler we can go on this. Don't carrot and click commit all on sink. So what sink would do know is ask you okay, commits all to the local repository and you want to sink it with where, exactly? So Because we don't have a remote repository, which would be one of the as your develops our guitar are. Otherwise it's asking us, where do we want to sink it to? All right, So in order to facilitate the sink, what we'll do is just connect to get up so we could disco ahead and connect on. Then this will prompt us to sign in with your user name. So the sign it quickly and then once you signing with little, we'll see all off our depositors listed. Okay, so after connecting to get hope here in visual studio, what you want to do is go to the home and click sink on. Then what I will ask you is it will give you the option publish to get up, say, in just a publisher, get up and then we'll give you a time menu where it just validates Alozie to change these. If you want, you can change the name off the repository, as it would appear on get up taken to, say, school management O r you get up at a sharp description here. So the project so I'm gonna type of a quick description are separately, and I put description here created for the U Demi course. Learn SP Bennett, NBC with Entity Framework Database First does. That's, of course, that this video is associated with then. So this this serves the purpose of letting anybody who stumbles upon the court have an idea of why this was created or what it's for. You can upto have it us private or public private means not. The whole world won't be ableto access. That cored public means that well, the whole world can access that called If they go on, get up on, then you can unstick publish. All right, So once that action is completed, you see another change. E really sure you the direct link to your repository here on get up that come so quick that it will navigate your browser to that. They also give you the ability to manage a few things from get up right here in visual studio. So you really don't have to go to the website much after just creating your contract. So if I go back, though, on I refresh here Then I would see that I have the repository, as was promised. All right. So I can go to school management on Then it will that we know that four whole commits were made because what happened was that I on my computer I was making commits to my local depositor. You might not have been, so you would see probably one commit made. But all off mine that were being made locally were all pushed to get up. So get up has the same record of changes. Know that my local repository, hard as I was going along, going along using it only locally. So here you see the court. Andi, if you follow this link, you would be able to see the school. Um, at any rate, you know, using ghetto bit Alozie to share it with with facilitators. Oh, are your friends on dshea here? Whatever it is you're trying to do if if you're attempting something and you know it's not working arctic and just send it to get up our somebody to check on its door, it is ill advised toe chicken or commit cold. That doesn't work. So I would advise that if it hits. Get up. It should be operational. Meaning if I come along, stumble upon its and try to Don't load it on. I can always either clone it on. Get the source files synchronized with my visual studio Oregon. Just don't load it in a zip or just a zoo owner I can open in visual studio. Or I can just don't know the zip here as as a passer by and have the project as you would have uploaded it. So that's all you get your court off to. Get up, Get up is very cool is very powerful. Andi, I hope you get through this exercise pretty well. If you have any difficulties, feel free to drop me a line in them, you know? 17. Understanding Package Management: Hey, guys, in this video, we'll take a quick look at package management. No, I would have mentioned before in earlier times, and we're looking at what comes with the project, but that we get all of these bootstrap files and all of these script files Data Query and so on. I would have mentioned that they're not necessarily always at the latest versions, right, because, as as they build on it to get person 1.10 dot one and one to a Citrus offensive for the easiest way or the way that you probably think about it naturally, toe poke read these files would be to go to and get the physical files and come back and replace them here in the project. On that, that would be fine. That would be understandable. But then visual studio kindof tries to make it easier for you by giving you what they call new, gets pocket management. So if you right click your project or your ek lik references, then you would see that they have this thing called manage. You get packages on. When you took that, it opens up. Ah, nice menu sexual where it's listing off all the installed packages. All of the possible updates on also lowing into Brose sew there times when what comes out of the box of visual studio might not be adequate for what you want to do on DSO. They have an open source community where they are low people to contribute solutions on so you can actually grows all of those solutions right here. Andi Condone loot in units. You can get adopters for my SQL bitter bees. Andi, even bootstrap everything that you might need. It's somewhere here so you can always a search. If you know exactly what you want on, you can actually just click it and view more details. As to the version, they consider it to exactly what person. So it's a very powerful selection on a package management tool. I'm going to go over toe opiates because we can see that we have 34 pending opiates. So, as at the time of this recording, NBC five was kind of being phased out, so it's kind of behind. But ah, lots of these things out of the box at the time. Where the latest No, they're not the latest. So new get is allowing me to say, OK, I can opiate and let's look at Bootstrap I warned about updating Bootstrap because if I obeyed bootstrap right here, I'm moving from version 3.0 to version four on there. Quite a few changes in the court for bootstrap between three and four. So a big jump like that would cause it's after the a lot off regression testing and changes and all over the place, right? So for the purpose of this course, I will not updated to version four point. Oh, all right, But then, as you go along, we see that Jake worry with that. Is that Version one? It's not version 3.4 on the other Jake, or if libraries are quite farther ahead than we are right now, you see that M V C libraries. So it's not only for JavaScript and CSS files, but also deals, and the others are listed under the references sections, all of these things that give it the actual functionality. All of those things can be updated using new gets. So I'm going to focus on me into the script files because sometimes when you update the dealers things just pretty things stop working of compatibility issues and all sorts of things. So I'm just going to keep it simple on I'm just into update anything that is javascript. So here I know that this this is a Java script file. All right, Web grease. It's made for optimizing. I'll use that. Also, ill take Newtown. Genius, son, I'll take modernizer. You take the geek. Wear validation on G Quartey. Andi, please note if they're going to upgrade any j Corey dot file, please obey the J query based file Have run into problems in the past with that thinking that Oh, I don't need updated draper, but the other things I can opiate. So those things can be updated if I will be a bootstrap than it would opiate the CSS file on but the script associated with it. But once again, I will be moving from Andi. I'll leave everything else. As is off course you can. You can always rule box if you try toe updates. Thes Microsoft dots. Dependence is ordeals from version to version on something bricks you can always estate. Note off what version worked and then you can just rule Boksic and uninstall or you can see what is the version you want in the selected like that? And it does sleep a bit and it will install that specific version for you. So I want the latest one. But this one says, Just put that back on then. Once you're finished, you know, picking and choosing. And the same procedure applies the one you're opposing and trying to install. You just select with the one you want and anything to speak in. Start this would be in style, a supports orbit, someone to go ahead and up the thes. So my problem to do in this process to say that Oh, there, it's about to make these appearance on. Are you sure you want to continually just click? OK, then you accept any license agreements that come your way, art and we're done. So you would see that you got a few more red ticks because changes had to be made, Um, on the new get INGE initially in that we have fewer updates pending because everything else is are there later So you can just close that window. What? I want to point out to you also visible but once again, red ticks here, Onda the packages. That conflict file is actually like tracking all of the packages that are in our project. If we take a look in the scripts folder, we see that we have some new files. So when we get a new file because of our search control engine, tracking all the changes we get this, plus science or get knows that this is a new file. It was never there on the neurotic means that these were modified, right? So it got rid off the old files and brought in the new files. On day, we didn't steal any opiates over script toe our CSS files. So there are no changes there, off course. If I abated Bootstrap, then you would see pro signs there for the brand new files. All right, so once all of this is done, we can just go ahead and control shift and be to do a bill on the build was successful. I will also just go ahead and check in this court side of the school and commit so once again because we have it's answers. Control? No, we're tracking every change that we make. So we going to say abated. Some script files on added new geek worry versions so that that should be descriptive enough. And then we can estimate all and sink. So once we do that, what it does is commit the changes locally on. Then it just pushes them to get a job automatically so that we don't have to get involved with the second step. Once you commit all and sink on, There we go Successfully synchronized Andi once again if we just take a look at ghetto but we just refresh. Then we'll see where off. If comets all right on by clicking commits, we can see all off the changes when they were made. Andi what? The intel. All right, so that's where your comments come in handy. And then if you want that specific version, it can just click it on. It will show you what was done. They can only just froze the files to get that specific version off files. So if anything breaks that we can just roll back toe before making those you get updates 18. Add Lecturer and Enrollment Management Modules: Hey, guys. So we have gone toe. Quite a milestone with our project. And no, we want to start actually assigning courses to students. Andi moving along with actually having a school management system. No. One thing that we didn't do before no is at a table on the requisites structure. To support adding lecturers to the course is because we have courses. We have students and we have enrollments. Enrollments would be a student being assigned to do, of course, on degree that they would get. But what we don't have is having the lecturer who would be teaching the course. We don't have a facility to manage that in our application as it stands. So this video is geared towards just adding that new module and as you go along with your development, especially if you're doing it in an agile way, as the need arises, you may need to modify your application to fit the needs. So that is the scenario that we want to highlight today. So we start by adding the lecturer, table, toe or database off, or so I have my default connection or school management so they use a server explorer or use the SQL Object Explorer. You should have the same effect someone to use my SQL server Object Explorer and I'm going to add a new table to my school management Devi on This will be for lecturers. So I added first name and last name to this day to be a stable, off course. Whatever it is that you want to start about electoral, you just want to put in the stable. Maybe for your school management system. You want to build a whole profile for the sectors here at a profile picture, maybe their specialty water it is. But for the state off moving along, I'm just going to leave it as it is. The first name last name. That's all we need for any given lecture. At least right now, we also have to make sure that our I D column is auto incremental. So for these, I can distract Lee care and just include that identity on guidance. The increment column and I would just think identity to make sure that its identity and make sure it's counting up by one each time on once all of those changes have been made and you would see reflecting here in the courts or the euro, the cold already that way. That's fine on. Then you can update this stable on that successful No. Another change want to me is to the enrollment stable because on enrollment, essentially is assigning a lecturer to a class with a student on whatever agreed that lecture would have given that student for that class. So that's his whole or enrollment table is set up. So we want to make sure that we modify our enrollment, able to be aware that it should have another foreign key in the form off lecture I. D. Soto. Add the foreign key constraints to the enrollment stable. I'm just going to take the Circle way and copy and Paste one off the country's that's already there and just changed the information according to my needs. So I went to see Lecturer, so I d. And then we change the table toe lecturers on the I D column. Teoh i D. And I made a mistake there, so this would be I D. Since that is the primary key column over here so that we know it's letter I do. You have to call it lecture idea any, and it's clearly statements of any problems. And I'm getting an error here because I don't have a comma. So the coma on then all those air should disappear. So that is adding the constraint. What I need to do is at the role for the column. Rather so lecture I d. Mi searches integer because it's a foreign key. Andi, I I'm going to not alone. No, because it doesn't make sense. Oven enrollment with a course and student and no lecturer, right? Or I can actually leave this. No, because you could have the students and rolling to the course. And we don't yet know who is going to teacher, so know that everything is OK. I have the lecture i d column and unacceptable constraint to see that it should apply to the letter I d column and reference the ID column in lectures on. Then all of that is in place, so I just click off it on. That should update our database tables. Now, recall that we're doing database first development, which means once the changes in the data base, you have to update our model, so we have to find or into different where model, which you just double click here and get this diagram on. Then we have a few of us that we expect well, we expect that the in Roman table will be updated with a new column on that a new table will be added to this model related to the enrolment. So I'm going to right click in the empty space on Click Update model from database, which would then bring up this style of box. I can drill down into it and select specifically the tables. I wish toe add on. The reason for doing this would be I don't want to add migration history. If you're doing crowed with rules and users, then find you can do that. But I'm not going to be doing any of those things I'm only interested in by a lecturer stable, and then I click finish. Once that is done, it does a full re first refreshes the enrollment table and ads in the missing column on it also adds in my lecturer table and shows the relationship between them also notice because I allowed No, The notation here is different from the notation here. I know that I have my Electra table at it. The next step is to make the crowd operations available, so I'm just going to go to controllers. Click, add a new controller and then I'm going to continue with the NBC five controller with Entity Framework. I'm going to specify that I want this controller to be based on the lecturers table, which is not listed. And if you run into this problem, it's because we didn't build. So every time you make a change to the mother and I think I said that before, you always do have been somewhat control shift and be and just do a quick build on after a successful build, we can try the operation again. So we record controllers goto ad new controller, continue with the into different work based controller Find over model so I can actually just type elect juror on. There we go. So our model is no available on. We can leave everything else, as is on. We just go ahead and think once that operation is complete, we will land on this controller with everything already wired up and we've already gone through all powerful. This is we get our listing off all the lecturers, the detail per lecture, which would be like this profile page we get to create on any time daily. So we know that our crowd operations for any given that you're is completed, What you want to do is probably at a few test letters so that we can continue with the enrollments. Onda. Additionally, I'm going to just adjust my layout page to make sure that I can easily get to my lecturer speaks. I'm just going to add another laying here, control, See envy. And this will be for a lecturers so that when we couldn't that link, we will be in that lecherous crowd Operation Space. All right, so I'm just been so quickly run and show you what that looks like, even though it should be very familiar. All right, so here is our page, and we see that our lecturers link is no added and weaken bro's to it. And I added a few lecherous here Jack Daniels, Johnnie Walker and Re nephew. So that's it for adding the lecturer management model it or application on. Of course, the last act for this video is the check in this code, so that we can make sure that we pick up where we left off. Should anything go around so understand, to write a quick message on. Then we just commit all and sing Jean, committing our changes locally. Andi on ghetto hell for over enrollment management. We're going to repeats a lot of the steps we just went through with our lecturers portion. But then a lot more adjustments are going to be me. It so that we can have, ah, nice dynamic and user friendly application at the end of it, someone to start off with adding a new controller on leaving it with entity framework. On this time, we're going to do it for our enrollments model. So we went through and we did for everything but enrollments. So we create that add All right, So for our enrollments control that we're going to just take sometimes appreciate what's going on here because this table is going to be a a bit more unique than all the other tables that we added controllers for on because of that, they're a few more phone says that they're going to be here that you probably didn't see before. No, So, firstly, for our index page. You see here that we get a slightly different query and I'm going to bring up or lecturers controlled us so we can compare for the electric controller. All we have to do is get all the lecturers or a DVD dot Nature is the to list, and we just returned that. However, you notice that that we have two lines in enrollments and we're declaring a variable called Enrollments, which is running a similar Corey getting the DB from the context, getting the enrollments. But then we're doing something called Include on what include Does Is It initiates what we call eager loading, which includes literally any related entity to this table. So in other words, if we look back at our model really quickly, we'll see that we have three late relations toe enrollment, that I'm just going to drag it across the screen so we can see it differently. All right, so when I rear interest diagram, you see that the lions follow enrollments. That's because the lecturer is associated with enrollments the students isn't associated with Romans on the course is an associated with enrollment, which means if we look at on enrolment we should be seeing data for the lecturer. The pores on the students on DSO when the controller is being generated is seeking into account all of these relationships on it is writing the quarry that sees that you should include data for the related course. You should include data for the related students, and you should also include data for the related lecturer. So each line off enrollment is going toe. Have data associated with the course, the student on the lecturer. So when we load index, we can look at that a bit more on. Then if we look at creates, then we'll see that it is creating some generic variable, which is in the form of what we call a view bug on. You would have seen view bag for a bit in a previous lecture, but view bag is just something that is created on the fly on what we're assigning to it is a drop down list which C sharp or SP dotnet NBC cause a select list on we're loading it with the list of courses on. We're associating this select list. The I D or the value should be the I D off the course on what is to be displayed would be the title. All right, now we're doing this three times. We're doing this for course I d for students on for lectures. So for each relationship, we probably want to have a drop down list that will allow us to select the value that we want to create that relationship with Andi. As we go along, we'll see that all it does is take all of those I d values on to create an enrollment record. The same would be for editors. You know that anything creates share a lot of the court Onda. At any rate, if you remove on enrollments, then you just remove on enrolment so that leads wouldn't look much different. So we can just go ahead and click, Start and see what our enrollments model looks like. Before we do that off course, you want to add a link to our layout paid so that we can get to it easily, is going to quickly hop on over to shared on Leo's and understands once again duplicate this line in the same way. And I'm just going to take all the pages were not using so I'm not using a boat and contacts understand to remove those from the menu. So we have more space for pages that really matter. All right, so, no, I can just navigate on. We'll check out how and romance looks. So when our page loads, we can just click on enrollments and we'll see the list that is there so far. Andi, I had added these directly to the database, so I went in and I said, Student one is assigned to course one, etcetera, etcetera. So that's why you would see those things here. A Z can see the table would take some modifications because, well, great is no title, is there? The last name off the students alone is there on first name is there? But that's not necessarily hold. We want our labels to look on. That's not necessarily the data that we want to present here. If we look at creates, we see that we get our three drop down boxes so we get or great here, which was text we get course I d, which gives us that drop down list we get. The trouble is for students on. We get a drop down list for only the last names off our lecturer. So we see that we need to do a bit off modification. What we're aiming for really is toe reengineer this speech. So when we get back, we'll look at how we can go boats modifying all of these things. 19. Install JQueryUI Javascript Libraries: Hey, guys, in this video, we're going to look at installing Ajay Kori, you I library in our project. Now, we would have looked at Newgate and package management in a previous video on DSO. In this video, we're actually going to be looking at how we can go about using Jake. Are you I in our application, as we will be using the auto complete feature, which means the textbooks, when we start typing, it will also complete with all possible matches, you know, similar to Google search. All right. So, firstly, we'll take a look at Jake, or you are documentation. Documentation is readily available on their website. You can go to Jake where you are dot com order simply google. Jake, where you y on from this website, you will see that they give you a bunch off. Widgets and tools, as we said, will be used in the auto complete for the remainder off this activity they do offer You don't know links on Syrian links seeding, meaning they host it and you just include that link in your core on that will take care off the referencing for you. On top of all of that, what is fully required to use Jake, are you? I is Jake are itself so Jake, or is a framer that's built on top of JavaScript on it's almost a mean steer, a staple in world developments these days on Jake, where you wise us building on double that framework and giving us, um, widget. So early in the lecture, I would have spoken about adding, like a date picker to the text box where daytime is required. Well, Jake, where you has a date picker and we can just take a quick look at all The date picker looks on how it works. So they give us a sample page here, and then we clean the textbooks and we see that the date picker appears and it allows us to to select the bit there without having to wearable typing. And I'm here attacking and it disables inputs. So that's one of the advantages to using, like a date picker widget instead, off allowing the user to type the date for themselves on. Then they also show you the source code that is required. They give you an idea of what style sheet has a required, as well as watch script files need to be included on. Please note you have Jake worry being included as well as a query. Why on these would be an example? SRC value would be an example of what a CD in is. You know, it's just a link toe. The file being hosted somewhere on the Internet so you don't have to have the physical far . I noticed. Also, that order mutters, you have to make sure that you include Jake or before you include Jake or you I Otherwise, you will run into some referencing problems on, then having it reference both of these files than the actual JavaScript function or J query function that is employed to actually call the date picker is the tire. Get the date picker elements, which is the input. So we have a pitak, Sure, and then we have an input switches off tactics. But the idea is date picker. So we see here that Juncker is using the same kind of identify a CSS hashtag for idea on a dot for a class so hashtag debate picker target that elements and call the date picker function on. That is really what involves the calling off the calendar the way gets its style is by including the base theme file for the Jake worry You y all right? Or maybe you'd want to include the one specifically for the date picker that I know that they do that also, any hole we're looking at the auto complete function which, if you look at it in action, given a list or databank off all of these values, you should be able to start typing and then it will make suggestions to you See that? So if I type t is going to look for everything with a T and give me back what I possibly want and that's all we're going toe hello. Whoever is adding students two courses to actually search for student names creek them on, add them to the class in a nice, fun, dynamic and interactive way. Now, back in visual studio, we need to include the Jake or EU I files in our project. Now, once again, instinct will probably have you just go to the layout page and just include them here, which would be fine. You could actually just copy that cold with the cdn. Links on just include them here on your little page and then you go on. But we want to highlight whole package management helps us to keep in check with what is happening. Also, we're going to look at what these lines off court means. So notice that we don't have in our Leo Pidge any link tags and we don't have any script starts, But yet we know that we're friends in CSS five and we are referencing Java script files. So what is happening is that we got a file in our upstart folder called Bondo Conflict. The Bundle conflict actually contains references to our files for us on from here, we can actually trump all off the files in tow. One what you call function part. So take contents that CSS, for instance. So this is the name off the bundle for our CSS files on. Then, once this bunless called, it's going to include the bootstrap about CSS file as well as our site that CS is far and it will look in our layout page. Then we'll see that we have only one call toe the bundle as specified by name. All right. See if you take a killer look, you notice that you have scrips. The Orender bundles a query. And if we look in the bundle config you see that you have your bundles, Dear query here, friends by name. But it's only including something in the scripts folder that we can actually just investigate that. So we go to scripts on then it's looking for Jake or a Dash. We do have files that have jaker and Dash on, then is looking for some version, which would be the version number, which we have 3.4 point one on dot gs. So pretty much this gives us a nice, dynamic way toe always include whatever version J Query is here because if it was 1.1 point zero, which I think it was before we updated it, then it was being referenced and we didn't have to change anything. Now that we updated it, we still don't have to change anything here because it would just look for what is the version that is available to me at the time. The next thing we want to do is use new gets toe include all of the Jake or you I script files on that style sheets in our products, so we'll just head on over to you get out of the top open. But if you don't, then you can distract Lee the project on Go to Manage, you get packages This So then leader still explore what is installed to obey its or go to bro. So we're interested in browsing because we want something that we don't currently have in our solutions, so I can just start tapping on. I think I've searched for it before. So, Jake, where you I would come up and it would fill Terrell's off course. And then we can always click on the search results on. Then just read the description. Also look at the author and make sure that it looks like it's legit. Brothers go ahead. I can change version if I want, but I believe that the latest stable on Go Ahead and Click Install I mean the problem together and to speak okay and allow it to run. After a few moments and a successful operation, you should see some new FAZ appearing in your Content folder as well as your scripts folder . No, we need to let our bundle config include these files upon Render. We have a bundle for CSS files already. Some just want to add the CSS file that is associated with my daughter complete Understand to include the auto complete CSS file in my bundle. So I'm just going to see karma and then I'm going toe it by path on the path to this is through content slash beans slash base slash auto completes. That's CSS. So I left us slash there. So it's the till there. Which means, you know, whatever the fire path is before we get the contents than include that. Sure it za dynamic whale for creating and relative you are I and then content slash and then from contents, for they go to the team's folder on then from two years older go to base and then inside the baseball that we're looking for auto complete that CSS know. What this will do is when it renders over Leo Page, and it renders this bundle huntin CSS. Then it will load up all of the's CSS files one time so we don't have to go and change it everywhere or anything that I would just change it one place and it just gets rendered. Another thing that we want to do is include our Jake Worry Dash You I fired. Now we're already including Jake wears Understand to copy this because it would be a similar dynamic on understand. To place that on, I'm going to create a new script bundle and called it J Query Dash you I. And then what I will modify here is scripts. Slash J query. Dash you. Why? Because that's the new puncher. Enough for files via query dashi wide dash version. So it's J. Corey Dash U Dash on in whatever version number. So if we obey it, it's years down the line from 1.12 two point. Oh, then as long as the record actually wire pirates stays intact on, it's still a J s fire than this one, the conflict will just pick up the latest version and just run with it. So that's advantage to using this bundle country. So we can always just save the changes there and then because we added a new conflict than we're going tohave toe met or layout page know about it so we can just duplicate this J query bundle reference and we just add Dash You I remember or their mothers. So Jean course should always come first on. Then the dependence is afterwards. So bear that in mind if you're going to be rearranging the order off these fast No, we can just go quick execution and see what our court looks like. Now we can quickly just execute or application and go to view paid source, which will then show us that everything should be rendered. So we have our script fast here being included Jake Worry and then Jake where you and then remember that bootstrap comes out the words so everything is rendered as expected. But we see an error here with over length as Onley Bootstrap that CSS is being rendered and we should have three files. So I'm just jumping quickly back to our bundle conflict that's es and s e here where the air is that we have. We did not reference this properly cerebral, that so we should have a comma after each block off string, not a plus sign. So we have bootstrapped. That's yes, it's comma side, not CSS comma. And then our order complete CSS file. And if we have others. And we just use a comma afterwards, weaken the stray again and see if we have any improvements. All right, so we can just sent that again. Onda. And there we go. So everything is being rendered correctly with for bootstrapping where we're side out CSS. And then where were all the complete that cirrhosis. And so that is how you go both including a package. At least try inside package of JavaScript and CSS package on whole. You would. Hello. It's to be rendered in your Leo Peach in a dynamic fashion off course. Having included it in the layout page, those files will be available for every other page, including our enrollment speech, which is where our auto complete court will be executing. 20. Implement JQueryUI Autocomplete: Hey guys. In this video, we will begin to implement our Jake Worry Auto complete function to aid us with enrolling students in a course. But before we get into all of that, I want to go through quickly some adjustments that I have made to the application since the last video. And you can feel free to emulate these if you wish. Firstly, I removed the contact on a boat links from over not bars. And no, we only have home courses, students and enrollments, all right. And we could actually just add lecturers here. Considering that we added a model to manage lecturer star just that quickly so are enough. Barno only has links. So our models that we have implemented or are implementing Secondly, you would notice that I have a styles that render on this is rendering some styles for Jeker. USO added a new bundle to my bundle conflict for J query Why on I'm including the based all that CSS which includes the base that CSS Andi seems that Syriza's files as well as and I had date picker I was running an experiment. But this should really be auto complete, not CSS so I am adding these two files to my overall thesis imports, and I am referencing them in the DJIA quarry. You I stars render all right, And if the need arises, toe have more than we can just put them in As we know we need toe once again, order matters. So you want to make sure you include all of the base files first before the individual CSS files? All right, So, no, Before we get into our Jake or excitement, I want us to just run back over to our documentation here, given to us by geek or you i dot com and just take a look at the auto complete feature. What we're aiming for is when we type a student's name here and selected on in this example , it is made with programming load. So let's say the programming languages would be our student names, and I type something like HS. Then the expectation is that any students whose name contains HS should come up in this drop down. See if that type see when you get a better picture on. Then when I select that it will be that students that will be and rolled once I click create, so we're doing it in pieces right now. We're just dealing with implementing the order complete in the next video. Then we will deal with actually effecting that, adding on enrollment functionality back in visual studio. We start this exercise by first finding the create view for over enrollments. And then we're going to do a bit off re fracturing. Rearranging off for fields on just by will freak up. We have a field for greed. We have a field for course I D, which gave us a drop down list with all of the courses in there. We have ah, field for students, which give us a drop illness for students. Andan other one for lectures once again with a drug. Andi, In case you for gotten on your wondering why we have so many drop down lists. Once there's a one to many relationship meaning with enrollments, it's literally many toe one. With all of these, so many students can be in the enrollment stable. Many courses can be in the enrollment stables and many lecturers. You'll find that dotnet in scaffolding will actually give you drop down lists. Auto generated giving you all off your possible options on all that's really gets passed by is the course I d. Since that is what the enrollments table is really storing anyway. So you want drop down lists for some of these and for some off these fields, You want to change them up a bit at the time of enrollments, then we probably don't need concrete. So actually, the greed they don't remember in the database that we would have allowed No. Four grade. So at time of creating an enrollments that is adding a class, seeing who is the lecture and adding the students, we really don't need the grade so I can remove this as at the time off creation, often enrollments. We probably don't know who the lecture is, so we don't need the lecture I d right now. All that is really important is to specify which flats were dealing with Onda, which student or students will be assigned to this class. The A part of this activity will be to make this entire procedure dynamic enough that you don't have the The user won't have toe throws away and bro's back every time they want to add a student they can just select the course and at other and up parts off the page will refresh. But we're not very it right now. We're just dealing with the auto complete. I'm winter reference, the DJIA Query documentation Once again, just so we have an appreciation for the core that we're about to write on the part off the auto. Complete documentation that I want to focus on is a remote Jason P data service. So we're going to be using Jake or E E. Jackson. You see them? Me preferences, de query deducts, which will actually call a link or call a Jason endpoints that we're going to me right now that will serve up some list from the date abuse in this case, the list of students based on what is being tight. So the example here is that they have a data beast off birds on. They have a euro for the search and their specifying the data type on what should be searched for. So that's what beat represents the term to be searched for on then, upon a successful query, Andi, it will return the data and they will show the data all right, and then when one is Cilic, it'd so that is actually just an event in this entire process. So the source off the data will be over. Ajax far they're seeing the minimum length for any search quarter should be too. So two characters and then you trigger the search on, then wanted to selected. Then they wish wish toe right to the love that you selected this with that value and that I d Now let us begin our journeys. I'm going to type this script thing. That's the third part off my fij underst putting it at the top here off the views we can have a distinct section for it to me, probably later on extract this and putting a script file and references directly. That's fine. But for now, I'm just interrupted threat here. And because amusing Jake worry sometimes you would start off taquerias. Document dots ready. You can actually just see dollar sign function on. Then you open close. I like to just close my functions at the same time. We're just getting warmed up here. But before we even start writing Jake, where we have to make sure that we have the appropriate controls or what we're about to do now remember that we want to be able to type the students name and we have a drop down list working with so we can't type the student's name with a drug bonus. And there's another factor to this that the drop down list is actually tracking the students i d. A text box won't be tracking. The students idea will be tracking the name off the student. So in order to facility the need for the user to see the name in a text box on the actual solution to get an idea pawn the submission off the form. We have to teach this oats Anderson to erase this and I'm going to replace it with two controls a text box. Onda Hidden field. All right, So I did that real quickly, and I just walking through the two lines off court, which really shouldn't be that foreign. We have our HTML helper here and we're using an edit for you could have used a text box for That's fine then you do realize that they're not of me off the edit for and the textbooks were are kind of different when it comes to referencing over CSS classes, but either way, they both need model Andi. We're associating the text box with model dot students. That first name on the reason I'm using the first name is that we did not use the full name column in students who used first name and last name Andi. I'm just going to use this because I just need a text box. There's Remember the edit for Is Going toe yield a control that is in keeping with whatever data type we're telling you that we need it for. So in this case, it's a text. We'll get a text box. I could have used last name if I used a view model, which would be an abstraction from the actual entity coming from the database. I could have included a full name data field in that on then used full name. So there are multiple ways to do this. I'm just keeping it simple. Um, so they think it open running later on in the course, actually view models, and so you can create that live off obstruction, but for no, let's just stick to this. So we have model that for Student that first name and then we're just giving it some new HTML attributes Andi, including the class formed US Control, which gives it that bootstrapping and then the second line is a hidden field because we want a truck. The student i d. When the student is selected from over order completes drop down list once again, this auto complete text box is only going to show us the name. But what the application needs is the i. D. So we're just using a hidden for so that the user doesn't have to see the 123 at the 2000 and whatever the student I d. Value is. So we're hiding that from the user. But then when the form is submitted, this is what the model really needs. This is what the controller needs to see any. We can just take a quick look on the post option for create that. It's really just wanting student I d doesn't care about the first name on the last name. All right, so this is striking a balance between giving the user of visually acceptable interface on actually making sure that our solution is a break on maintaining the integrity off the data that we're passing across. All right, so you've modified this on. We just took all the drop down box, and we added up takes months, which is going to serve the purpose off having us facilitate our auto complete functionality on ah, hidden for which is just tracking the i d off the student that is selected from this auto complete textbooks. Now back in J query, um, way can actually just go to the documentation and probably copy in peace. So this score on the change it as we go along, its understand to quickly grab some of this on distant adjust it as I go along. All right, so here we have our cord Onda. We're going to start re fracturing toe or purposes. The first change is the target elements now in Jake. Or you can target any elements using the the I d. Value. Just like in C assists. When in CSS you want the element by I d use the hashtag or if you wanted by class user dot So in this situation, you can actually reference it directed by the i d. Using the hashtag are directly by the class name using the But in this case, what we want to target is the Edit four and then we have student dot first name. So in other words, whatever the model value is here that determines the i d off the elements. So the i d off this drop down list is well, in this case, course I d the i d for 84 is student. Not that what underscore When you have that entity on its property, then it's usually ah, on the score. So that's a little gray area. But I'll go into debug mode and show you how you can determine what's that idea will be, in this case, the hidden for its ideas. Student i d. So I'm just want to quickly going to be bold more on show you the i ds as they rendered. All right, So this is what our creation page looks like right now, having stripped, told other drop down boxes on we have course ideas. The label which we know we can change using our method classes on. We have student i d on what we wanted to determine was the i d for this elements, which is a text box so I can just go there and inspect Element And then by looking at whatever is rendered here, I can see that the i d for the element is student. The model is student dot first name. So in court it's would be student dot first name But that dot is an illegal element in an idea in HTML. So the what is rendered is actually you didn't underscore first me so we can just come out of people more quickly or we can stand people more since what we're about to do is also going to modify the interface So we can just change this target element of student on the score first name and then we see that we're following the court that auto complete, which is calling the function auto complete on that target elements. Now the next step is to change The u R l that is being referenced. Were going toe have our own Europe on. Do you have to waste readies? You can write it using the HTML helper recon. Just write it using the same pattern off slash on in point. So I'm going to use the stash in in point method where we went to see a slash and I wanted in the enrollments. That's the controller, right? So it would be enrollments slash What is action you and I'll call it. Get students. So we need to go into our controller elements controller on later on. Make an action that will get called whenever this function is involved. All right, on the data type, we can just modify this to Jae Sun. All right? Jason Pisa specialized. Former So Jason saw a few more comfortable using Jason. You can test it with either and let me know how it works. And then for data, you need to specify what? The name off the variable that is going to contain whatever data is being entered into this element. That's name. So that means when we build our jeison in point, we have to make sure that it is outfitted. Onda prepared to take some variable called term on the value that we're passing his request that term. So this could really be anything. This will be turned. This could be query. You know, whatever you want to call it, just make sure that when we're implementing this action, we have a facility to recognize that this is a parameter being passed in. So we will get to that point soon. I'm just building all this Jaco record line by line. The next function is success, and success basically gets involved when the source successfully brought but data and so success Hunting's said data on What I'm going to do here is at a week debo gland. So in declaring, you know, if you don't really get a debugging tools like visual studio to take it line by line, so what is a good technique is to receives. Console that log and then you think, just put whatever value to is that you want to write to the console and this council would be the boroughs or console. So whatever brother using in this case proves he always have a pencil top here, and you see that we have an error here and I'll explain this era. But when we do console that love, whatever value to that we want to see printed here, you can just see there, and that is how we go ahead and build on debug and make sure that the values that we expect are the values that we're getting back. We can leave the minimum length that properties. So that means that it won't involve the auto complete until minimum too. Characters have gone into the search box are the elements which in this case, is students on the sport. First name on select will see. What do you want me to do when a value has been selected? This takes two parameters event which says, what was the event I was triggered And you I o r se query or data, whatever it is, and that is whatever value is being returned upon, the success or whatever value is being selected. So I'm just going to put a console that love here once again just so that we can make sure that we're getting back some sensible data. I want to come out of people more quickly, and I'll explain that arrow. Let me just bring it up quickly. So this arrow is basically saying that Yeah, you're trying to initialize something when there's a referencing problem, and I would have said it more than once. And if we could that we see that referencing problem is right here well started. We didn't refresh all right, So it's in. That referencing problem is right there at our function. Invocation. And that is because and I'll bring up full Hey, it's source so we can see it. That is because, or script here is running in isolation. This is a geek worry block off court deeper and agents on. We're running it at the top off the page when we're friends in G query at the end off the page. And remember that I said Sequence matters. So what needs to happen is that these scripts need to be referenced above this block on DSO . Everything will were properly so I'm going to come out of people more. Go to my layouts on day. I'm just going to move the CF. As I said, you have a number of techniques toe handle. This. You see a number off ways. I'm just going to move on my script files to the top of the page. All rights on the knees, modernizer. All right, so I have all of my stars and all of my scripts rendering first. And then by the time everything would have been rendered and it gets to the body or the view, remember the view gets rendered there, and in this case, this is the view than this script would have already been taken. Care off in terms off What prerequisite libraries It needs the reference in order to do the auto compete on the G query functions. Know that I have done the JavaScript portion. I'm going to modify my controller and add the action, and I'll just add it below the delete confirmed. And we're going to type this so quickly. So, firstly, I did specify that I wanted the type of call to be posted. I I did not. So I'm going to modify that we wanted to be a post cause. So we'll just say, type on. We're right in quotation marks post. So our euro should be called in post, and then in my controller, I'm going to modify the core on Add on h et put People's Jason result function. So upon to know we would have seen action results each time. No, we need Jason results. We have a public and it's J son, and you see that interest since is helping your alone. So they give us built in function that can return. Jason results and I did say that the function should be called Get Students. So I'm just making sure that it's spilling his cart Aan den. What we're passing in is a parameter called what do you recall it term? So we're getting apart metal string term and then this function we're going to the clear of variable called students Onda we're going to do just run up with query so But I know we should know hope worries work because we've been scaffolding We've been modifying court on DSO We just want to run a week or so. I'm just going to see a DVD dots on what table recurring students and then use are not operator again. And then we're going to go into some off the dynamic nature off link on into different work on DSO. We're going to declare an abstract object with the data values that we really, really need for this operation. Once again, the two data values that we know we need are the actual name, which should popularly, this text box on the I d whose value we want to place in thesis elements. We know, however, that we can only look at one element at a time when it release the name either the first name or the last name on day. The idea. Well, it's there. So what we need are name and I d on to be very complete in our search. We want to make sure that when we type any two letters, that combination of letters needs to be in either the first name or the last name, not just the first name. So even though we're using first names here, we don't want to limit our auto complete just first name. So once again, this is just because you didn't use a view model, and I'm not looking at full name in in the ability to specify what the textbooks should be . I'm just using students that first name on. If you still don't feel comfortable that you could actually just use a regular input field type equals text a text box on, then you could say the I P is equal to student name on you. Give it the bootstrap class off course, and then you could just use that here, right? So it's it's just showing that the name off the I. D. It's been material to the operation that were really about to perform, so I'll just leave this bit off. Court here has a reference point, if you wish, but I'll continue with this since you spend so much time ventilating that so TV that students that collect, which then requires me to put in some parameters. And I have to specify Lambda Expressions first. So Q. Here is where I can actually declare a brand new object that doesn't necessarily look like a student's object. Someone to see new, because I want a new on abstract object with my own values. So Q is pointing to a new object on. I am going to fill this abstract object with a name Andi for name I'm going to see you got . And then remember, the Q gives me access to all of the properties off whatever they were looking at. So have Q that first name, and I'm going to make it look like a full name, someone to plan cat in a first name on the last day in and say cute dot on the last name on off to put a little space there so it looks user friendly. So that is the full name off the student on then we also want on i d. So once again, this abstract object allows me to declare whatever properties I want on the fly, and then it will construct these objects on Put the list off them in this students variable . All right, so I d will be equal to shoe dots. I d student I d rather on right The root of said once again from our database and our students table select into our brand new object. That's pretty much what that is saying. Select these properties into a brand new object on this burning object has the property name on Give me these values on it has an i. D. Give me those values and we could go ahead and just put as many other properties as we wish . But once again, we really only need the name and the idea. So those are the only two that I'm selecting. But it's not finished there because remember that we want a filter. So this is selecting all of the students in tow. Brand new objects with name and I D. That's fine, but the fact is, we need to filter on term. We need to make sure that whatever is being returned as students has term in there, so we're going to add were we can use to you on the filter command would be que ducks. And then you notice that the two is no only picking up idea name because it's only trying toe filter on whatever new object I just selected all this data into. All right, so then I want to see we're name, which is a combination off first name and last name contains andare expression is a term that went to walk through all of this one more time. We're running a worry. Um, we're storing the results in a variable called Students on this quarry is looking into the students table, and it is selecting all of the records, but it's reconstructing them in tow on the fly. Very abstract model that we just created. We didn't give it wouldn't even give it a name we just created. It's just for this purpose. And I'm saying I want the name, which will be he would up first name. Plus, Andi has empty space and last name just so it looks user friendly. That's a full name that could have called this full name if I wanted to. It's really up to you. I just lied, man. As name on. Then we select the I d on we say the I d should have the students i d. And then we're going to filter all of that. All of this will be filtered were the name that is returned, hon. Teens this term and then at the end off all of that, we need to return because you noticed that this red line has been here all this time. We have a Jason results of the to return. He's going to be a bit different. So we're going to see a return to the sun on. We want to return are variable students on we just passing all of those methods that we need to fasten. All right, so we're returning a Jason results off this object or a set of these objects as Jason objects on. We just add in that behavior toe alot get we can build and just ensure that we have no errors. All right, so here in our browser will just test and see if all is going well with or function calls. We can quickly look on DSI. The students that we have in our database parts added a few more so back in create Remember that our cold right? No, it's just monitoring by a console that love what is happening with each step. So when source is successful, the initial writes the Beetle that it's bringing back to the console on also, if something selected. But right now, I think we'll only be able to see what comes back to the console allowed. So if I tap t, you know there's nothing is happening because it's not minimum length by five p on, then you see the minimum length and you see that there's some action happening. But if we drill down into the console, we see that it's actually bringing back some data for us. If I track E A, it brings back pizza again on you see that it's really just filtering based on that certain soap we're bringing about the name on we're bringing about the I d. Like we specified in our abstract object that we really only need name and I d. What we need to do is actually display the actual drop down so that we can click and select that value here but in the background. Sure. This idea value in our shouldn field art so back in our application and made a change here quickly and I just walking through it the whole point off source having toe parameters, request and response. We named them that, but we really named them According to what? Therefore the request is what will be passed on the responses. What is C? So what is received comes back with success on using our response function. We can actually mark some data items, which would have been what is returned. So date is on ary off the search results. So the response are mopping all of those data items. Andi, I am calling Ah, I'm passing each record from this ari into this function and I'm returning a label value off item that name. So remember that item or data would have honoree off objects that have i d and need. So each item here is going to have a name and then I d. So what I'm doing is returning objects with Mabel on value on an I D label and value especially important for what is displayed on the screen. When the names come up on the doctor, dropped bone appears use. The label is what appears in the drop build and when you click on the text fields, the text box, then that would be the value. So you wouldn't want to change these from name. Since the name is what is expected to be seen in both situations, however, I D once again is just for about groaned purposes so well, Dr Interface. Andi, I bring up the console that we can see what's happening on. Then I'm going to start typing so remember nothing onto two character saucy trip. And then there you see you see it appearing if I type will. All right, So it's actually searching the full name for any car to sequence. And you see that for each successful results, we're getting back that data object alright, Someone to actually select one and remember that we have a console that love tracking when we select and that was it being fired there on. We see here that we have the item object with the label, which would have been what is displayed when it struck down the value which you notice is going into the text box on the I. D. So no, we need to write some court to make sure that our hidden field gets populated with that Aggie. Because if we look at it specifically, there's nothing changing. We have the hidden field and there is no value, all right, which is not what we want. So we want that when we select that name, the value off this hidden field gets updated. So back in visual studio, we will modify our select function. So then update the element in question and the element in question is students ideas. So leave the console, that long quarry on what I'll do is see the sign Open British open breast kits and petition marks. Student I d on D. J Where makes it easy for us a set of values so we can just call the valve function on. We just passed in the value that we wanted to be said that so we can see data dots. Well, sorry we named the query Saluzzi Worry dots on. Then remember that this is actually being much toe on object with item on item has name on Di Di. So you need query dots. Hi, Tim. Dots on. I am going to specify I with common keys, since that's altered here. So its naval value on idea. So I'm setting the value off or hidden field student. I d to that I d on. Remember that that is happening whenever a select event is fired. So I understand typically go back, refresh. And you try that again on Just watch the value for the field and their ego. You see, it's being updated. So if I say test, we have these two. It's being updated each time. So no, we know that we're actually tracking the value off the student that is being selected. Now, once again, our objective is that we will have this speech on that create button on when we could create we see a dynamic refresh and reload off the list of students currently associated with this force. So, for no, I'm just going toe select one from the drop down box and I'm going to enroll, test student into this on them with the click create, and then we see what happens. Okay, Sorry. I had a break point on that bit off court. But if we go here and look at the object, you see that we're passing the essentials? Of course I d No, no. But then we did alot. No, for lecture i d and for greed on students is getting it so the two most important parts off this particular model are getting data. So if we put five and continue, then we will be rerouted to the enrollments in that speech. Now, once again, we're going to be doing some modifications to that full process so it doesn't go back here every time. And then we have to create new We will actually have a partial view off the list off students enrolled, refreshing each time create, or each time this has changed, it will refresh the show. Exactly who is enrolled in the selected class on Once a student is entered here and selected, it will refresh on have them dynamically without moving away from this speech 21. Create An JQuery/Ajax Form: Hey guys, In this video, we will be looking at implementing on Ajax form for or application. Now the reason we would use an Ajax form which is JavaScript mechanism, is to reduce the number off reloads for our pages. No, do recall that when we're creating an enrollment, we want toe the Anamika Lee one search for a student, which is why we implemented here, Jake, where you are auto complete widget in or text box Andi toe act too dysfunctional to what we will be doing is implementing what we call an Ajax form now on Ajax form will actually reduce the need for us to refresh in between clicking or submit button to recall that every time we click created actually is set up in the controller to navigate to our list. What we want to do is allow the user to continuously enter and intern enter on this one page without needing to navigate away and come back. So that is where the Ajax form will play a huge advantage. Now the first thing that we will want to do is actually include some Jeker libraries and we will do this through new get. So we will go over to our project. Right click on Go to Money can get packages because you don't have them installed. We will actually go to Bro's and we will look for Jake Worry on obtrusive E Juckes so we can just type. I guess you can just type deducts on just by typing ejects. The top result is our library that we're looking for. So Microsoft that j query on the truth on obtrusive reject so we can just go ahead and click install on deLone. You get to do its thing, all right. And with the success of that, we can just confirmed in Over Scripts folder that we know have Jake where dot Unobtrusive. That's either a little too new fires that we expect to see Afternoon Get has completed its installation. The next thing we want to modify is our bundle convicts, so we want to create a new bundle four or new script files. I'm just duplicating this JIA Carolina named the Jake or Dash Ajax and instead off trying to re type this. I just copied the name from the file here in Source Explorer and just paste it to exponent that whole typing process after saving this lyinto over bundle config. Then we want to let or layout page know that there is a new bundle intones. I just included on the knees our Jake worry lying. So remember, order matters. As long as it's underneath the geek or land, then you should have no problem. So Jay Curry dish Ajax is our new bundle that needs to be rendered. Now we can hit back to over create view and then we'll start our modifications. So the first thing we want to do is change the type of form so we would see that we're using HTML that begin form anywhere, using a regular HTM of form. The new type of form in tone is a jack saucy Ajax right here placing HTML on. We're beginning over Ajax form. All right, so we're seeing that Ajax has a little error on the neath it and thats chiefly because our Ajax form actually takes a few parameters. So we'll go ahead and fill in these part mentors and walk you through it step by step. The first parameter is the post action. So the thing is, when the Ajax form submits, it needs to know what in the controller should I be calling? All right, so we all know that the form the uniform by default will call the post option off whatever is in the control. So we have to create here, which renders the form initially on. Then once you could submit, it's automatically going to look for the http post version of creates Over with the He adopts form and even with the H M A form, but it's required for the H Ajax form. We need to specify what action should be called. So I could specify that I want to call create. But then I'm going to modify it a bit, and I'm going to create another one, and it will write that action together. Someone to call this one ad students mixed up. We need to specify which controller is this. Action insults the enrollments controller, and then we need to add new he Juckes options, and I'll just bring the line here so that we can just fill it'll within full view. Now the options are more like properties off this new class, or you notice that this is getting the color crew quoting from visual studio that it's a class, so we're just adding values and certain properties that are called Ajax actions. So the 1st 1 that we're going to add is the http method on today it's we've been using post , so we can just meant in that. So it does specify that we want toe post on. Then we can say on success. We wish to do a certain action on I'll call it I did All right, So, upon success off this post call, then we want to call this function andan other one on failure. We want to do this one. There are quite a few properties that you can actually implement in the Ajax Option section . Andi, I have attached a documented this lecture stating each off those options and how you can leverage them. The next thing we want to do is implement or new function called ad students. Oh, well or new action called at students, and we'll just over into our controller and I will add it below the existing post create function. So, like we stated, this is going to be an http post on already just just know in case this is the first year seeing it attempt the word prop on, then pressed up twice on. That just implements our property. But it's a quicker way to just skip public and he can just sit in the type you wish on. This is not the property. Of course, this is actually a phone person on. Then we are creating the post action at students on golf course. Add students is going to take a parameter or apartment a similar to the existing create. But then you were called that we're expecting only two values, really and truly from this form and in previous lectures, I would go see in that actually, what this does is commit any in that is coming across the field is not listed here. Then it won't be included in over model. So we're going to use that. But then we're actually going toe. Specify exactly what fuse we want, which are the course I d on the students, i d Those are the two feels that really should be coming from this form. So for this parliament, understand toe, borrow this score quickly since its very similar. Except I'm actually just goingto specify that I want only the course I d on the students idea. Since nothing else is really being added from this form. No, For this action, I'm actually going toe do a try on catch. So I just type trend in double top on. Then it filled out the rest of that cold block for me, and then we can start filling out or court. So I'm going to follow this pattern because a lot of the court that was generated for us is still applicable. The model state is valid, is checking. Is there any missing data? So between the tool values that we're expecting, which are course idee and student I d is either off them missing in this scenario on, then if it is valid, then we expect toe add the record on return. The views understands of Copy that. And please that in my tribe block on. Actually, I'm going to modify this Just look like this. I'm going to make it into an asynchronous method. So I just put a sink and then task and wrap this so focusing on the simple and lower hanging fruits off this block off court. What I'm going to do is say, try to do this operation on. If it feels, then teach this action. So let's first work on the part. That does not feel so. If the model state is valid, then we want toe. Add the enrollment, save the changes. But then you notice that a return type here is wrong, because what we need to do is return a G s son similar to hole. We returned it in. Where is that function? All right, so we had a Jason result function here on we returned at G. Asan objects. So we need to do something similar for this. Since it is a Jason results, we're going to modify this action to be a Jason object that is being returned on. Do recall that with Jason objects, you can actually specify the contents off these objects to suit your needs. So I'm going to specify our custom object that has two parameters. The 1st 1 is going to be is success, which I intended to be a bullion someone to say True because if the modern state is valid on all of this work sold, then it was a success. So I'm passing back a bullion to say his success is true on also, I'm adding a message that I intend to display to my users. So I'm going to see I'm going to say students added successfully and then following the pattern off our previous G s son function, understand? To pass the Js underclass behavior. Hello. Get Parmenter so that our Jason object is complete. So let me just review this. We're trying this operation on If the model state is valid, then we're going to go ahead and at the enrollment at it to the database and then return a success status with a success message. So that will let or farm? No, Remember, we just implemented this or formal? No, based on what is returned that it was either success or a failure. So we have the success scenario. We need toe put in the failure scenario. So for our fair land, we can actually just copy this because it would be a very similar thing on this would be outside of this statement because this only gets done if it is valid, and then you'll see people flip this around. Maybe you'll flip it around to see if not valid, then returned a failure. But then if it is valid, then do some other stuff. So it's up to you. But I want to leave this as is on. So if it is valid, then it was successful on. If it does not return or if this fails, then it will be fall to this line. So if it defaults to this line, which means that the model state is not valid, then we return Ah failure status. So our success would actually be falls andare message would read differently. Maybe students was not added successfully. So if it was at it successfully, then we expect our Jason object. I have ah, true for this value and this message. Otherwise it should return this on in the same Wien. If an exception is thrown or an exception is caught rather than what we want to do is not throw because story actually crashes are application, but we want to handle it gracefully. So if you're not so familiar with a try, catch what this those Once again it tries this operation, and if that entire operation feels anywhere, then it catches the exception. So then you can see okay, if there's an exception or an overall arrow that was unaccounted for whole. Do I handle it? The line through makes the program crash. In this scenario, we don't want our program to crash. You want the user to just have the same kind of experience as they would have had if it was an invalid entry. Then we wanted to show them that it feels so. We can just reuse. This is success line Andi see something different and probably so I want to tell them Toe, please contact er administrator on. Then we can probably put in details off the arrow. You probably want to show them actual details off the arrow, since they're just end users. But if you're more advanced than you can probably put in like an email to fire after the administrator or the Web master when an exception is Scott so that you can keep abreast off the happenings off the software. Now there's one more thing I want to add to this validation before it actually goes ahead and adds a students on. That is a check to see if the student is already enrolled in a particular course. So what we're doing is allowing somebody from or create view where allowing somebody to select a course on then type of students name and then click submit on. Then it will call this function passing in the course idea and the students I d on then try to ask them. What we don't want is a situation where the same student is being added to the same course more than once that we're going to put in a validation here on going to add that validation toe this statement. So I'm just into right a quick bit off court, which is going to query our database. Someone to save our is enrolled is equal to. And then I can say DB dots enrollments. And then I'm going to use another link function, which is called any which really just says. Is there any record in the database that meets up articulo condition? So as it stands and he's going to say, is there any record inside the stable? So I'm going to build on this any function with our Lambda expressions I'm using, too, which is our universal letter for Lambda expressions, and I'm checking if there is any course I d in our enrollments table. That much is the course I d coming from. Or enrollment models. Here's our enrollment model coming in through our perimeter on I'm seeing Is there any horse idea in this table that is the same as this sport I d which I'm sure would be yes by no, right. If you have Internet, few records and there there should be at least one record. Maybe, maybe not. But this would return true. But this is not all we're interested in because you want to know that there is. Of course I'd be that much. Is this Onda in that same record where we found that much? That there is a student I d. That much is our enrollments. So this line once again, is seeing Please tell me if there is any recording my enrollments table Where the course i d on the students. I d much the horse idea and student I d coming in through this. Jason, request star this post request to this action in this model object. So then we want to say if is enrolled, then we don't want to have them. So this is saying is enrolled. So I can just add amend this This condition on the statement to say if the states is valid , meaning both properties that are required for the form are there. Andi is enrolled, is equal to falls. All right, so if it is valid on the student is not enrolled, then we can proceed. So if either one of these evaluates toe not being true, then it should pose that the student was not at it successful, and we can amend. This NC student is already at its A student is already enrolled, so it's good to have descriptive messages for each step so that they know exactly what is happening and probably white field. Second, amended senses System failure Once again, you probably don't want to tell the users that there's a system failure. You can find a nice, graceful message to put their, but I'm just giving you the scenarios as they come up on helping you toe. Appreciate why we have customized messages for each state. So once again, we're seeing we're chicken, that enrollment stable to see if there's any record that has both course I D and student I d existing before our current action on. If there is known, then we just say OK return that it was successful. If there is our if one off these values is missing, then we return falls with a failure on if there is an arrow in doing any off this appear, then we're going to catch the exception and just return on Aramis. It's seeing that there is a failure without crashing our program. I understand term in this line a bit on Die said it this way to spell it out for in case you're new to see sharp and you're not fully familiar. But then we can actually just see if is not enrolled. So this actually evaluates to the same thing that was there. Just know. So if you prefer to write it this way, and this way looks a bit shorter, But then, you know, as a beginner, you may not absorb it as quickly as how I had it before, But I'm just showing you that it can during either way, So we're just going to build and make sure that we have no errors. We can run our project on. I'm sitting a break point here at our ad student action so that we can see that when we click submit. The data is actually being passed to this function. So I'm just going to do a quick test here on Dustin to change the drop down property on I'm not going to put in a student. I will just see how this behave, Someone to click create on. We see that our break point is active. If I hover over my enrollment model, we'll see that we have the course I d coming back on. Nothing coming back for our students. I d So if I stepped through the cord on guy stepped until I got to the statements around the quarry and this returned falls because there is no enrollment that exists with course I d being four on student I d being zero on. Then I will continue to step and then you see that it skipped over this if statement altogether because the model state is not valid because there is no value being provided for a student i d. Which is required based on our design. So it hits our Jason objects, which is returning that there is a failure in the audition off the student on there is a message. That's his. Okay, a student is already enrolled on. So sometimes this may not tell the whole story, right? So be very careful with the message, because in this case it's not a lack off enrollment, but or it's not the presence off on existing and Roman, but it's the lack of valid data. So you want to be very clear when you have that message, any hope we can express their five and continue on. Then we look back at our webpage and we see that we didn't even navigate away. And I'm going to put in a student this time someone to type for students or type of it is still working on. Then I click create on. Then we hit the break point once again. And if we look in our object, we see that we're getting back a student. I d under course I d on d. I am just going to set the break point to the if statement quickly, first of five on. Then we're hitting our if statement and we see here this time the model state is true because it is getting back valid to valid values. For course, I D and students on also is enrolled is falls, so there is no conflict as to where this block off course should go afterwards. If I step in, um, and I'll just skip ahead of the sitting of the break point on distress at five on. Then you see that it it flashed on the screen because it did this. Then he did that on because no, off this field, it went toe this success portion on Did you see in The student is at it successfully like we designed it to see on once again. If any off this operation failed, what would have happened is that it would have jumped to the Cat Island return that Jason Falls also. So I can't express a five and continue and you see that the pages move Nothing changed on the pitch like that's that's at this stage is good and bad are about when I go back to the list. I see here that the enrollment that I just did was successful on Yes, we're going to modify this speech because as it stands as it is, it's not very clear. We have mismatching columns and poor data, So this is going to be modified soon, but I want to focus on the fact that the enrollment ALS added for calculus on the student Tajiri read on the page itself did not redirect. I had to manually go back to the lives to see it. All right, so that means our agents Ajax form is working as we intended. So if I look for another students, I want him on let for and I could create and I'm just going to take off my break points at this point because I'm sure it's working on. Then I just continue on the page, isn't refresh the page didn't do anything, but then I have to go back to the list and refresh on. Then it will yield that. That was also a successful enrollment on. Then if I take creates again having already enrolled on Ledford in calculus on, I could create, you see nothing. Nothing is happening, right? Well, nothing is happening visibly So with our break points, we would have seen that it hits the court and it would have evaluated the falls because this enrollment already exists and in the same way, if I refresh this list, then you'll see that this is not repeating itself, no matter how many times we could create, so know that we're sure that our code works. What we need to do is actually help the user to be sure that the code is working because, like I said at the beginning, there are no visual cues here to say, Oh, it was successful or it was a failure. No. Do we recall Back in our form we had specified certain options for UN success and on failure, and then we only put in text here, but I didn't quite explain at the time what the text meant. So these are actually functions or names off functions that should be called when it's successful and when there's a failure. So these functions will actually be implemented in JavaScript. So we have here the script block. I don't have to create a new one. I just use it on the the clear a new function in JavaScript. You just say function and you give it the name and I said on success, I want the function added to be called on. Then remember that were actually returning a Jason object here. So this is a new object that has two properties is success and message. So I'm going to prepare my function for the prospect off getting some response from the Jason call. So I'm just using the word raise our resource response, whatever it is you want to call it. So that's what I'm calling it. So once this has finished processing and it got the car back or the response, then it caused the phone shown added. I am letting I did know that I expected toe holds on object in which is going to correspond with whatever it is I'm returning. So raise here is going to embody the properties. His success Andi message. So I'm just going toe quickly implement this on going to put in an if statement and see if rez docked is success. Then we want to use a Jew query function. So the dollar sign really in force that geek Oracle Andi on this form shown I want it. So render some HTML elements. So I'm going toe render on element that I'm going to call success. I'm calling it by I d. I'm calling success and I'm going to tell it to feel in fast. So that's one of those JIA query things. The G query Meeks Jealous Krypton beat, you know, easier and faster to implement. If you were to write vanilla javascript to accomplish something like this, then it would probably take Ah, little. A few more lines off court. CJ Korea actually expedites that whole process of getting some interactivity in our application. And then I'm just going to copy this cord on them, won't implement another function and call it field on dime Justin to modify this statement and see if not, then I want field to fit in fast. So I want on success on Element called Sorry on a successful ad. Then we want an element called Success to feed in Andi if it feels in one's an element called field Feet in. All right, So after adding these guys, I just realized that I would have misled you with something, and I'm going to explain what it is after I show you the court. So I added the lives for success on field. Andi, if we screwed on I discreet ID one, Dave four field. Andi, I gave it the I d feel off course so that we could target it using the hashtag on. Also, I gave it the class alert on alert Angel from or bootstraps that a red box will come up on display our arrow. So what I did here was instead off using the message coming from from our Jason response a boat or the student was added or not, and then trying to find a reason I just gave ah wholesale era right here in static, fixed to see there was an error adding the student to this course and he could see Please check your data and try again. Or contact your administrating and explain whatever it is you want here in one big general text Onda also for success I put in the message student at it successfully. So what will happen is that on success we call added on, then add it is going to check if the success messages actually actually true and then render this this function. If we wanted to add the text coming back from the Jason, we could just append the text here in using JavaScript toe this element because Reyes would have raised that message. Just I quit has raised that success so we could have just said. We want the element success on we want to upend on. What we want to upend is raise that message. So that is how you would actually go about fitting the actual arrow message or success message coming from orgy son response in tow the contents off the do so if you don't want to do it this way where you have the static text in the diff, then you can do it this way where you just inject it in. So I'm just showing you both ways. I usually just put in the static text, but I leave that there for your future reference. No. When I said I would have misled you, I got a bit overzealous and would have to do that on failure is corresponds with the Jason response. And that was in utter it. So unfailing. Er actually means that if the call to the action feel sort of a reason, meaning this was not successfully, it made the adults call and he couldn't find this. Then what era do you want to show? So this function would actually get called if there was a total system failure. When trying toe call the Post action. So that's what on further really means. So whether are not on the database side, the addition off the record was successful. Or if in this case, the way we wrote our application, if there was an exception trying to do this operation and it caught our response as long as it's returning a response, The Ajax form sees it as a successful call because it sent data and it got back a response . So really and truly, to facilitate this field versus success scenario for the addition off our properties for the additional for enrollment store database, then we need to do it a bit differently. So I'm going toe see failure here, right? Andi? I mean, I can implement a function for this, but I don't anticipate, at least for this scenario, that my mom would have a total system failure. But what I'm going to do is actually modify the added function so on success. What do we want to do? And we call, added No added, isn't the reason we're checking for its success is that success can be the true or false because we got back a response and it's either true or false So if it is true, then we want to display our live called success and then I can see else So else. Meaning rez is not raise that success is not true. Then we can call our other function, which I outlined field on its passing in the rest. So just the same way we could target that Dave for success and put in the text. We can target this. There's I'll just leave that there for your future reference. Once again, I put in the static text here, so I'm not going to use this, but feel free to experiment on. So for the added, if this is not successful on really, actually, I don't have to do to if statements. So if it's not successful, then I want to call feel. There is someone to take out that block off court on. Then what I want to do is just pass. Is this called dysfunction? From are as section, so it's either successful. Andi got added and it's a success or failed toe. Add that is the database and so we're going to display hashtag field diff, which is a live with alert danger. So if it was successful than we see alert success, and this is where you start seeing a whole. Bootstrap makes it easy for it to display bizarre to steer users with very little effort. So once again, unfailing A really means that if it attempted to make the post called to this action on, they couldn't find the action may be renamed. It Are it just really couldn't communicate with the server. Then that is when you call failure so you could implement another Fung son. Four. Failure. All right, alright. So back in debug mode, we're going to test the theory that or cold works so once again on a successful addition off on enrollment, and we expect that we're going to see, give, appear on feed, insult the animation, and you can adjust the speed on. You can just check geek worry documentation to see the different speed options. You can say slow, fast, and I think you can say medium. I'm not sure if the mid range on in the same way. If it feels then we expect to see a red give to display or failure so that let's just try that someone to try the failed scenario first So I'm just going to click, create and obviously this should feel on. There we go. So it feed it in. There was an error, adding the student to this course because we have a course I d on. We didn't specify a student on. Then I'm going to try and add on left for two. Let's see a speed up net, NBC validation. And then we could create on. There we go. So we see a little *** in our corner. Where we have to do is being displayed simultaneously, which is not necessarily what we want. Andi, you know, it's it's not ideal. So let's modify our court a bit. So I'm going to say All right, So the modification, I mean, is to say that if something is at it successfully, then we want to fade out, failed or you could just said, It's display Toe falls over. You want to do it? I mean, there were many ways you could do that. So we're just seeing fade out quickly on feed in the success on If it fails, then we want to fade this in quickly. You just want to know that when it feels you're not seeing the successive and vice versa. So as we can see more changes here on, then try that again. So I'm going to try create this field, All right, so I'm going to try and add on to data mining on the There we go, so it's only displaying one at the time. So if I remove this on recreate, then you see that it replaces the arrow with the success and vice versa. So we've essentially added that Egypt's form and added a nice clean. We talk alot, people toe, add students and enroll them to our class. However, as much as we've done quite a bit off work here, the work is still not finished because we still want more interactive way for them to keep truck off. Who is in what course meaning in order to see who was added. We have to go back to our enrollments listing over here on. We have to look on, then we don't we see the course, but then everything is mixed up. Yes, we can do some quarrying modifications to make it ordered by the court style and so on, but it's still kind of mixed up so in the next video. What we will do is modify their, so modify our labels off course on. We'll also modify this entire creative you that, based on the course that is selected, we will see a table below here with all of the students in that course on. When we change this, it will refresh that view or that portion off this view on show only the students relative to which courses selected from this drop down. Also, when we add a student successfully, we expect to see them reflected in that list immediately. 22. Partial View and Data Refresh: there is in our last video, we completed our creation off on Ajax form that I load us toe more dynamically, submit student enrollments to each course on did. In this video, we will be going through adding on automatic refresh for each forms of mission. So what happens right? No is that we get a visual cue each time a student is successfully or not, successfully added, However, we don't know who is added because there's no list here for viewing. Would have to go back to list on view the enrollments each time which we want, avoid. And so what we're going to be doing is enhancing over current form such that each time a student is added successfully, greed will be don't here showing the list of students and it will refresh on. In addition to this, we will be looking at the concept off partial forms. The first modification we're going to make is to change the labels off or controls here on over form in visual studio, I added Amita theater class for the enrollment table on. We did that in a previous lecture, so I did it this time for the enrollment table. But you would notice that I did at the data attribute tug for the ID's. However, on our page, they still said Students idea and course I so long story short, the display name. It doesn't really work for the ideas, but that's no problem, because we can always just goto our view. That's our creative you, and we can just change those manuals. I'm going to leave the original quote there, and I'm going to re type it. So I will say Label on, say, four on the advantage off this label for as you notice, this is a label four element, and it's pointing to the course I d. So really and truly what this label and four attributes here does in the original HTML. Is it aloes that when you click the label, it automatically highlights whatever element is being targeted? So the label 44 side he would just highlights or drop down list with the horse i D. As its i. D. Next inside this very label, others other class and under Skopje and peace, the bootstrap classes that were originally generated with our control tickle that that sign because this is just pure HTML. This is not our razor for so we have label for poor Saidi on. We gave it the boot strap classes and then the manual text I would like to type his course on. Then I can just remove this line and I will repeat this for the student name on No, that we've completed that we can change the button text toe, maybe enroll and then changed the button class to Bt and success. So we get a green button on understand to save DTN dash block. All right, so you can get creative off course. No, Like we said in the beginning, the expectation is that each time we trick our submit on be it a successful response from or Jason are controller each time a student is at it successfully, then we expect that there is going to be a refresh. So what we're about to do is to create a partial view that is going toe handle, only displaying the students who are in rules. Now the concept of a partial view is you want a view within a few on. Let me just put that into perspective habits. So remember that we have a layoff. Peach and in the Leo page we actually render a view. So a view is a part off Julio pitch. Well, a partial view is actually designed to be a part, often existing view. So we have this view on. What we want to do is to create another many of you inside this view that is solely responsible for loading a particulate bit off information, which would be the enrollments on. Then we're going to set it that when we change the value on the drop down list that that great will refresh automatically, as well as each time that we submit an enrollment for course and the students that that greed will refresh. And so the new data then went to do one more modification here, as I would want my Grade two underneath my form. So I just put in ah, horizontal rule. Just so we have a little line to show on. Then I'll create a div and I'll give this different. I d off data. So data or data Dave is going to store over partial view next up. We want to actually create this partial view, so we follow the same procedure as we did in the first part when we're creating views where we right click or Enrollments folder and we go ahead and click. Add on you Thanks to want to give it a name, someone to call this enrollments our show on using the underscore. The front is really just the naming convention. Some people would create a folder for the par shows. I just use an underscore to depict whenever I have a partial view on. That is a pattern that you may see in other places. Next, I want to select a template, so the template would be what kind of page do you want? And we would actually want a list because we want a list the students who are enrolled. So I just cyclist on the model that should cover and this is enrollment. They would see that already have this click, but originally may look like this, but once you click create us partial, you see that it blanks off the layout page because the harsh of you is actually going to inherit all its scripts and stars and all of that from whatever view it is being rendered in, which inherently is inheriting that from the Littlepage, so that will automatically get great out. And then we click. Add All right, So if we'll take a quick look at the resulting, you will see that it looks just like our index spirits. If I go to index and I load it up, you could almost hold them up side by side and see that they're pretty much identical. So essentially, the list template gives you whatever comes up in your index page or index pages actually using that list template. So we're going to modify this a bit. We have a table. Yes, Onda, we can leave greed, We can leave course title. And you do notice that you have course that titles off course is the entity that is included in enrollment on. But the reason I said included is that if we take a look at our index controller will see kind of what is happening here. So when we load of ire enrollments on, we run that where you see that there is a part of it is that include, and it includes each entity that is necessary or later. So this is called eager loading where you're seeing, I'm bringing back each record here on then just include the corresponding or related data for each foreign key Severe. Call it our in romance tables full of foreign keys. At that score. Saidi student I D and lecture i d. So where to seeing bring back all of the resulting information for the corresponding course . I d student i d and lecturer i d. And so in our view, it was actually just a Lowe's to see model which represents enrollment dot whichever entity not whichever property off that entity so I can leave the course title on. Do you see that student at last name is coming back. We don't necessarily just want the last thing would on last name comma, first name or the full name. So these are really just the table headers, like would have seen when we looked at the enrollments next. And that is why it looks this way. So we get to modify all off this essentially over these air, just the display name for so relent. Truly, what is being displayed when this is rendered is really just whatever meta tags are display name we had put over the corresponding property in our meta class I'm just meant to do a few modifications as it relates to what we need to see. So we definitely want to see the greed and the force. Thailand Student name. I don't want this surrender student last name only. Go. So I'm going to take this old and I'm going to say student name because I'm going to be a rendering values that are their full names. I also don't need to see letters, first name or anything with the lecturer, right? No, on. We can probably just render that one time so I can take that off the table. Should have these three table hitters on one blank one I can astray action because maybe want toe complete an action. You notice that this column is reserved for these buttons? What we get there. So for each roll coming back in our enrollments on I'm going, I need the grade. So I leave that I need the course title. I leave that on day. I don't need the students. Last name. What I really need is the student's full name, so I can just replicate this. Right? So this is a display forwards actually rendering whatever value is there and out to sea. Student at first Name on space student, that last name. And if you want to wrap this all in a p tag or something else, you can do that. We removed the column, Head off for the lecturers, first name or the lecture informations. I just remove this all together on for the actions. Well, I would only want the ability toe delete on enrollment, someone to take this. So if you'd even necessary to have others than that's fine. So we'll be modifying this also to make sure that when we could delete we don't have to navigate away from the page just really removes that enrollment record and refreshes the grid accordingly. Now we can see if changes meat or action on one other thing. We can remove this cause I don't want the ability to create already on the creation screen . So we don't need to rent a link for creation. No, that we've completed the view. We need to actually add the action for this partial view in your controller. So remember that no view gets involved unless a corresponding action is present. So we need to give this action the name of the same name as the partial views. Understand the copy that from the solution Explorer history share don't miss type, and I'm going to place it immediately after index. So they're going to their few differences on you may see it done this way. You may see people do. It's using action results. It's the same. So there are many ways to do this. I'm going to show you with partial the result because I like to see what is a partial view on what is an act on ox energy are full of you, even from my controller side. So I'm going to say partial view results, Andi notes. I'm not making this one a synchronous because at least in this version off NBC, they don't support a synchronous partial views. So be very careful off that. So I'm making public partial of your results, giving it the same name and then inside off this I'm going to be returning partial now. The work isn't done as yet, because remember that our partial view requires data it's looking for on I knew Maribel object, um, collection off enrollment object types. So that means before I can return I need to return it with some data. So just the same way with index that has the same list pattern. They we loaded up data and then we returned that data to the view. We need to follow a similar pattern here, So I'm going to see the vire in a row Elements. And I can do that because in romances local to this function, so it won't interfere with that enrollments verbal on. I'm going to say DVD dot in Rolling's. But then do recall that in our partial view we need details for course, and we need details for the student. So I'm going to just borrow this court here from Index that includes course based on the relating record on students, and I'm going to follow that pattern here. Andi, load those in. I know that I have my worry done. I'm going toe return the partial view with the enrollments on. Did I just say to list or next action item would be to add a parameter to over action so the perimeter will serve the purpose off following us to filter on whatever values in the perimeter Take, for instance, the details. Actually, we're it receives an I d on, then checks if the idea is null shore. But then what it really wants the i d for is to just find that one record. So we need to add a similar filtering mechanism, toe our action based on the course ideas, so I can just add int on that, make it knowable. So this is how you make it infallible by just putting on that question mark, it suggests that a null value is acceptable coming in. When you're called in this action on, we're going to see a course. I do. There's so we know exactly which idea is being referred to. The next thing we want to do is I just start choir because, right? No, we're bringing back enrollments, all enrollment. So we want to filter on discourse. I d. So I'm just going to inject that court here, and I'm just going to break the line of it so that we can see exactly what's happening So you can actually do this without causing any errors and understand to say dot were on I'm adding on a filter. So this is me adding on a lumber expression. If my were close to say we're que docked course I d is equivalent to the parameter course idee. So doing this will actually alot that this view can be rendered without any course idea. And, of course, a query like that where this is zero and we know that we have no horse. I d d zero r. This is no, actually, Onda, we have no horse. I leaving no will actually return on empty, leased toe or partial view. So if you wanted this to be a bit more user friendly, we could add on if statement in this partial to say if model model being our list on we can say that count 18. The number of items going back in this list is less than one inches a function, so it model home is less than one. Then we can see Brendan. Each one talked to say no enrollments in this course so that that can apply whether we get back an empty set. Because remember that even if we get back, of course, I d. Um, if this course has no enrollments as it then we want to let them know there are no currently nor enrollments in this course on. We can put this in a bootstrap class, maybe text dash, but we can center ally it for sure, and we can see it takes dash in four. All right, so then we will get this nice blue text that you used to know that there no enrollments in this class and then we can wrap the rest off this speech in an else to say This does not evaluate. True. Then we want to print this entire table services. That, plus sign undersides, has collapsed everything as the hot I'm pieced on. There we go. So the table gets rendered when the list is not empty. All right, so know that we've tested that theory were the partial view loads were just going to remove this line because we don't want this toe interfere with our Ajax car. So what we want to do is make sure that on Page Lord, or were selected value from or drop down list gets rendered or gets used to render the partial view. So when we have this issue, actually is just calling the action blankly with no permit er's And so we'll always get that There's no enrollment because we were passing and no so I can just through this are for now. I'll just come into talks for further reference, but then we go ahead and start writing some job. JavaScript, RJ Query. He jacked school so quick and easy. Way to right, Jake, worry when we're loading a page is just the start of G quarry functions. So we know the pattern is dollar signs open and close parentheses on then in the open one output in function. Andi, just open and close everything so we can deceive. Everything starts and stops. And I like seeing my curly brace and my parents said each other on then inside this function, the first thing I want to do is know what the course i d. Is that the selected value from this course I dropped honest. So I'm going to get this value from this control by targeting it using its idea. So dollar sign, open brace open. We'll do some arts Onda hashtag horse I d on. Then I will see a dot Val on that actually gets me the value that is currently selected on . I'm just going to put that inside off a very sassy divorce Vier. See idea. This force charts. All right. So far, society is getting the currently selected course idee value next. Well, doing Ajax call, and it's going to look similar to this, but I'm going to put in a few different parameters and options on. I'll explain as I go along. So I started Egypt school dollar sign dot Ajax. I'm just filling the other parts in tax. And then we put in our options to the first option is the girl. So I could write the You are like this, but I'm going to write it a different way. Just so you have exposure to all of your options someone to write at signed you are else I'm using on each team Ill helper function euro dot action. All right, So you see that there are different ways to approach this. There is no one we know always set in stone. So you see, different patterns are on the place. I want to show you. What do you mean? See doing a research? All right. And then we have enrollment partial on just the same. We were on the issue of action with the action and the controller. I'll just rewrite it in the same fashion. The next option we want is the data type. Now our date that I have this time won't be Jesus on, but rather we'll use HTML. So you have different data types of different situations in the situation. We're loading HTML data, so I want the data type two b html on On that note, I just add content. Type on. I just feel in that char set sitting for HTML. All right, so we're signature content types. Should be off type issue mill with charset utf it taken. Just fill that in. Also, I don't think that one is absolutely necessary, but it's good practice. Just toe. Make sure that the Carter the heart Carter sits are being returned on. We'll set the type to be get. Since we're not posting data at this time, we're getting data and remember your commas after each option as we go along and then we have data. So of course, we need to pass data here because our action is expecting some form of data as much as it may before giving, because we put a notable parameter there. But we are expected to passing data to get the actual result. So we need to say horse idee, Since that's the name of the parameter is expecting on. Then we'll pass in our local value, which is C I d. All right. So I didn't give this the name horse idea, because then you mean get confused. If you have course I d call on course. I decided this a c i d just say could see clearly that this is for responding on the on the left side is corresponding with the apartment that's expected and on the right side corresponds with whatever value were passing into that. And then after data, we have success. So we need to define a function that gets called when a successful called his made. And when a successful call is made, it is expected that we get back some form of data in the form off this list. So I'm going to say data on in this function, we're going to populate our data, give with our well data. So we're really calling or partial view, and we're just going to see inside off the data deep. Want to load this partial view with this data. So I'm going to put in some animations so we can see hope. Awful. Jake, worry really is. And how it's easy to make a nice interactive application. So hashtag data targeting the element by its i d on d I'm going to say, fade out. So this will make it actually kind off blank coat. And you can bolster that by adding the speed or right, So remember that we did fade out earlier. They could put in far star slower water, a speedy want. But I wanted to fade out. And then I'm going to Lord the HTML area, this content coming from Ardito. And then once it's loaded, I wanted toe feed in. All right, so this will actually get called once the pages, Lord it so traditionally with geek where you would see something like dollar sign document that already which means or the pages no loaded. The dumb is no ready to interact with javascript. But then for a short time, he can just write it like this. All right, so this should execute once the page loads by. So I'm just going to Debo quickly, and I set a break point on my controller so that we can see when it gets called on what body gets passed to it. Okay, so, no, we're going to roast o r create patient and we're going to watch as visual studio. It's our break point, and we see that course I d is indeed being passed into our partial view on the end result off all of this should be that the quarries run against number two I d. So only those enrollments to come back and voila there. We see that we're running a filter. Based on the selected course on, We're only seeing those students off course. We haven't talked up anything when this value changes. So that is our next mission. Where when it changes, it should actually reload. Know what we need on our drop down is a change event. So, Jake, where makes it just as easy to create the change event just to seeing we that we did a change event here just the same way that we did an event here on our text box. We did an auto complete. So it is a similar pattern when we want drop down list change. So to do that we can just target or elements. So we just say dollar sign on. We know that we're dealing with course I d as our elements on. Then we put on the change event and then inside the change event and just want to put a semicolon on the end at the same time we have a function on. Then in this function, what we need to do is get the current value off course ideas. So we can actually just replicate this where we just get C I. D. On the current value on off. Worse. Once again, this is its own block. This is its own block, so the C I DS won't interfere with each other. All right on, then we need to repeat this whole block off court. Now there's a principle in programming that say's don't repeat yourself. It's an acronym that spells of dry. And the principle is that if you have a block off court that can do something and it is one supposed to be versatile enough to operate in different scenarios, then you shouldn't have it all over the place. So, for no, I'm going to just copy and paste it. But What we aim to do is put this block off board in its own function on. Then we can call it from multiple places without having all off this repeated. But for no, I'm just going to repeat it on. We just test that over click event works. Now, at this point to me want to go ahead and test? And if you do, you may realize that it's not working. And that's because we are invoking. Geek were here, but we are not putting it inside off a Jake. We're block on by Jake. We're block. I mean this functions. Remember that? I said every time we start off with G inquiry, you may the see something like this with dollar sign documents already, or you see this, which is a shorthand. So whatever Jiko record you're about to write needs to go inside off that block. So the Ajax, the event, all of that needs to be inside off that block. Second, just cut this. I can start another block because here's a block for itself. This is just the standard, Jake. Very sorry. Javascript function. These are dollars functions. What is that? J quarry block. And this is a geek wear block someone to put this inside here. And actually, you could just merge all of these into one. So this Jake, we're function block really ends here. And any other G quarry core that we want to put in. We could just make sure that it is kindof self contained. All right, so I'm putting in my course I d on change. Function block on. It is somewhat autonomous to anything else that is inside off this block. And I just align everything so we can see where everything starts and stops. No one. We attempt to debunk this, we will see an improvement in the behavior off our application. Where when we change the drop down list the great reloads. Okay. No. With our page loaded, I'm going to proceed to change, and then we'll see what happens. So I left my break points on the option on when I change the calculus. You see, it hits the auction, and we're getting a new course I d. So the filtering should bring back only persons enrolled in calculus on defy bring back envy. See Donna Tordella programming. I think that one was empty. Then we see our if statement is working no enrollments in this course and we can go ahead and just make sure everything works. So I just add on Ledford on enroll student on Do we see that we still have one more? Just mentum it because this this does not reload. Um, if we change its that I just remove my break points here on change it back to Java programming. Then we see that and let for it was enrolled. So what we need toe happen is that when we click this spot in this greed actually reloads when a successful enrollment occurs. So I'm not going to come out of debug mode. I'm just going to go to my create on really and truly, I just need a few more lines off court to meet that work. No, The first adjustment I'm going to make is to repeat is to reduce the repetition that is all over the place. So we see that we're repeating this block off court here that is loading, argued Andi, where I know where threatened to repeat it once more, So I'm going to create a function on once again because I'll be doing something that is a career like dysfunction needs to be inside off or Jake or block someone to create a function. All right, here. And I'm going to call it's Lord and Rolince. I mean, you can create the function and call it what you realize, and it should receive a part of it. A parameter called C I d tyrant andan. Inside this function, I'm going to take all off this block off, cored on the place. It's so we have our it ups and others invent. So we have C i D, which is expected to be passed in any time this is called on. This will handle our reload. So that means when the pages loaded, we just replace logistical this food out of the page load. So I need to make sure I make a function called here first thing in my Jake worry so that once the pages loaded, this will execute first and I'm passing in C i. D, which is being second from the drop down list, and that is the first reference to it on the second reference to it would be inside off my change function for the dropped on this I can just remove all of this and replace it with one line load enrollments on Once again, we have the C I d. Know what we really want to address is reloading after a successful edition. So I'm just going to copy these two lines. Andi, if you recall over court that handles the successful additions is our UN success added function. So we just look for added on We see the year that we got a dead all right and the results success. So if it is successful, then we want to reload. So we had hold for feeding out those grid seconds. Have the court underneath all of this and at its underneath This commented outline on here we just add that we're getting the course i d. And we're passing it into the phone shown Andi So that should take care off calling the Lord enrollments anytime we want over greed off enrollments to be refreshed. So I'm still in debug mode. I'm just going to save these adjustments and then went toe reload my page. And remember on page Lord its load Sigrid on drop down this change, it loads the grid on upon enrollment and I just put in an enrollment. So that didn't work because of a scoping issues were our function added, which is what is called upon a successful operation from where Ajax form is outside. Off the school off this Jake were blocked on. The funny thing is that if we added to the school off the square block, then the Ajax form will not be able to detect it. So that puts us in a weird position where we're actually going to have to repeat the court , at least for no, just to get this working. So I just reproduce this. I noticed that former Sun added, is invoking its own Duke or block. That's so that we could use the DEA query here. All right, so I'm just going to go tits up there inside of this query function on. We should see an improvement in our behavior. Alright. Someone to attempt to add a student too should open to see sharp. And there we see that we actually get that reload and that student is added real time. All right. And then if we try to add again, then we get our error message. And if we switch. We see that our filtering works. So this is how you can go about developing a nice interactive form and experience for your users. Andi easing. They need to navigate between screens. So I'm going to challenge you, toe, actually add similar behaviour. Toe the elite action. I'm going to do it and I'm going to check in the court so that you have it a reference. But I want you toe, actually, try and do it based on everything that you have learned up to. No. You'll also notice that navigating between these poor selections, this error message does not disappear. So those are a little housekeeping things that you probably want to do to your page. Where on change event, you probably set those displays to know. So I'm just going to copy this quickly and look for my on change event, which it's fear and I'm going to see on change. I want to feed out anything that is under screen. So if there is anything on the screen, just feed it out on If I try that again, will I would have to refresh just to make sure it's working someone to invoke an arrow And then if I moved to another page, you see that it disappears and everything reloads why it's well, all right.