Learning .NET Core - Part 1: Setup | David Paller | Skillshare

Learning .NET Core - Part 1: Setup

David Paller

Learning .NET Core - Part 1: Setup

David Paller

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
7 Lessons (36m)
    • 1. Introduction

      2:29
    • 2. Adding a Controller and View

      5:25
    • 3. Adding a Default Route

      4:43
    • 4. Adding a Model Layer

      6:19
    • 5. Making the View Strongly Typed

      6:29
    • 6. Passing Data To the View

      6:02
    • 7. Final Review

      4:54
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

178

Students

--

Projects

About This Class

In this series of classes we are going to build a functional car dealership inventory system using .NET Core, MVC, and Bootstrap 4. 

In this class, part 1, we will simply setup our project.  Our web application will be modeled after the MVC architectural pattern. So we will create some models, a view and a controller.  We will also configure our application to use a default route.

It is recommended that you have some prior programming and HTML knowledge.

Github page for the project: https://github.com/d-paller/Skillshare-CarDealership/tree/master

Meet Your Teacher

Teacher Profile Image

David Paller

Teacher

I'm a full-time .net developer that has a passion for teaching and helping others learn.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

phone

Transcripts

1. Introduction: Hello, everyone. And welcome in this class we're going to be setting up a dot net core NBC Web app. This will be our first part of a couple classes, and this will be the foundation of our entire project. We're going to be building a car dealership inventory system with a focus on doing it right , my right. I mean, using correct patterns, abstraction, unit testing, etcetera. And of course, there are faster ways to make what we're going to make. But we're gonna try our best to make this project maintainable, extendable and clean, which will save time in future development in this first class were simply going to set the project up and make sure it runs properly. To do this, we're going to add a controller, a model of you model and a strongly type of you to display our data as well as setting up routing. But before we begin, you will need to know some html CSS and JavaScript and you'll need to know the basics of object oriented programming. I'll do my best to explain as much as I can as we go along, but obviously I won't be able to hit everything so if at any point I say something or refer to something that you don't know what it is, I really strongly recommend that you pause the video and research. What that ISS And lastly, of course, I recommend you follow along with the video. In my experience, the best way to learn is by doing yourself, and this will make doing the project. Make doing the project later on a lot easier. So that further do, let's jump right in and start by setting up our tools in this class, you will need Visual Studio 2017. To download that, simply visit visual studio dot Microsoft dot com slash downloads, and you can download the community version that won't work just fine. If you already have visual studio, make sure it's up to date and you can do that by clicking on this a little flag and it will say that there's an update available. Go ahead and click on that and update now, and that will start updating and you'll be good to go. And lastly, you want the latest version of .net cores sdk. To download that you simply visit Microsoft dot com slash net slash download and download the latest at the time of this video 2.1 was the latest, So I already have that installed. So let's jump right in. 2. Adding a Controller and View: so as always, our very first step to create this new project will be file new project here. We will select this a s P dot in that core web application and you can find out under dot net core SP. Don't that core Web application going to give it our name? Car? Do you worship and hit? OK, bring up another menu and will select Web application. Also. Quick note. Make sure your version up here is selected to the latest version. This case 2.1 Everything else is OK, It OK and that will build our application. As I stated before, This is an M V c. Ap and what that NBC stands for his model, view and controller and what, all of that. How all of that fits together can be displayed in this picture, even though there may be a few more details that I'll add. So if we start off with the user, this user uses the controller for everything. They see the view. However, all requests go through the controller. His controller manipulates the model for the data, and that data is then passed again to the view and that view is updated However, this kind of points back to the user. This could be kind of confusing. The user does see the view. However, this model is updated, it comes back to controller. The controller actually creates the view and sends the view back to the user. And so if this is more accurately, the flow would be the user uses the controller. The controller manipulates. The model model is sent back to the controller. The controller builds the view and the view is then returned to the user. So everything passes through the controller and you can think of it this way. Think of the controller as thes server in a restaurant. You were the user, the customer. He put a request or an order in to the server. The server then takes that order. A request to the kitchen, some other layer in our application. The kitchen then fills that order, returns it to do the server and the server then brings it back to you. Now in our app that we just created kind of an overview tap. You can go ahead and close that and also there will be this pages folder. We don't need that to go ahead and delete that as well. Permanently deleted. Yes. Quick overview. We have this w w root file and that contains all RCs SJs an external libraries that we will use. So in this case, we have bootstrapped J query. It's good we'll keep all of that. However, we will need to create our NBC folders. So our model folder, Our View folder and our controller folder will go ahead and do that and a new folder and we'll call this controllers and we'll add another folder and we will call this one views, and then we'll add another folder and we will call it models. And this creates the basic structure for our app. Quick will add a controller and make sure it's the empty one and we'll give it a name. We'll just call this home controller, which will be the controller for our home page. Generally, every page has their own controller. However, it doesn't have to work that way. But if it's a complex AP, generally, every page will have its own controller with tone methods in there. All right, so our home controllers created inherits from this controller class has one method in it are index method. It's of Type I action results in the returns of you Now Microsoft NBC is very intelligent as you can return of you, and how it knows which of you to return is by looking at this home controller, the Method name or the controller name the method name, and then it will return the view based on that. So what it does is it looks in views and in views. There should be a folder called home, and in that folder home should be a view called index, which none of that exists. So let's go ahead and add it. So interviews at a new folder and we will call this home and you don't need that controller every see smart enough to know that it's not controller. So you don't include that controller. Just do home, then under home will go ahead and add a view in this view will be called Index, and everything else is okay and hit ad. So build this view and this will be set up correctly to view. However, you cannot run and view the project yet because we need to take care of this thing called routing, and we'll be looking at that in the next video 3. Adding a Default Route : the last time we ended. By creating a home controller and our index view, however, we know we can't see any of those things cause routing isn't set up. Let's go ahead and test that out by hitting the run button. It will take you to this local host right here, which could be different for your machine. And it says nothing could be found. And so how typical routing works and NBC App will be the name of the controller and then the action. And so if we go there also nothing found and this works on other sites to So, for example, have stack overflow pulled up here. Now you have your main site, which in our case is this local host. And then let's just for example, go ahead and sign up here, and then that will create or send you to another route. This route will be slash users slash sign up. And so, for example, if they were using NBC here, go ahead and get rid of all this junk. For the sake of this, this users would be the controller, and the sign up would be the action. However, none of that set up here. And so this home index should take us to this index view, However, right now is doing nothing. All right, Point proved, let's go ahead and stop that and head over to our startup dot CS file. And now here has all the configuration stuff on start up, and most of this is good as is. However, we need to add one thing down here at this app dot use M v C. We need to go ahead and type in route and then a Lambda expression, which I won't go into detail now. But go look up what it is. Basically, it's just like a function do route goes to route dot map route. Now this map route, it takes two parameters, takes a string name, and it takes a string template. We'll go ahead and give this thing a name. It will be default, and that's our default route. And then we'll go ahead and create our actual route, and this is the template of our route. That's what we'll do is open, squiggly bracket, and then we'll do controller equal to home. Close, quickly, bracket, and we'll do a slash. So what we're sitting here is that our first, I guess our first value after our main site name will be our controller and our default route will be set to home. It's a next will do opens quickly bracket and will dio action equal to index. Also here, setting thes second value in our Earl to be the action and our default will be our index. Go ahead and close. That's quickly bracket. Now this isn't necessary. But a lot of people like doing this, and this is kind of the default routes. We'll go ahead and add it, which is an I. D. And so at another slash another opens greatly. Bracket will dio i d. Question mark. And the question mark just means that it's an optional value in the URL, meaning we don't need it and then close quickly bracket close quote and that string and then one last parentheses to finish that off. So we've mapped our default route to controller is equal to home. Action is equal to index with an optional I D parameter, which in this case we won't be using the I D. But that is the default one that is there. Let's go ahead and try running this now, and it should send us to our main page. And here it is, Index. So if we look at our view on we have on here is index and just for sanity, ease sanity, check at a P tag. This works. Whoops. This works. Save that. Come back to our page. Refresh and index. This works. All right, so we've set up our out. Now we can run our app and see our views in the next video. We're going to add models to our view, and we're gonna add a model layer for our whole application. 4. Adding a Model Layer: all right. So last time we looked at routing, Now we're going to set up a model layer in our application and what this will do. This will hold all of our models and in our NBC layer, our view layer or our web layer, we will have view models. So what, we're gonna dio is under solution, right? Click on solution. Then we're gonna go ahead and add a new project under here this list. We're actually going to select a class library. We'll go ahead and call this car dealership dot model. And this will be the models, the data, the classes for our entire application. So anything that other parts of our application need will fit inside of here. So this may not make a whole lot of sense right now, But later on, when we start adding different layers to our application, this will make sense. It's right. Now, let's just create this this class library and call it car dealership dot model. We have this car dealership dot model here and already comes with one class. Let's go ahead and rename this to vehicle hit Enter and it will ask to rename the class one and we want yes, and then automatically change that here. All right, so this vehicle will have. We'll have three properties and visual studio has code snippets. And so for a property do P R O P. Tab tab and that will build your property out for you and we'll do int. And this will be a year of the vehicle. Enter type one of these out public, and we'll go ahead and add string and this will be make. We want gats get and set and then we'll do one more. And this will be a model, the model of the car and get and set. All right, here's our vehicle class. This is things that every single vehicle will share. So then what we're gonna do is add one more class to our model and we will call this our car and under car. What's make sure to make this public? It's one annoying thing about visual studio. When you add a class, it make doesn't make it public. It's under. Do you do that here will create se two properties. We will have a integer and will make that MPG mpg, and we'll also add a car type. However, we're gonna make this an Emam. And Denham is kind of like a class. However, it just holds simple values. So what will Dio under car dealership, right? Click and add a new folder and we'll go ahead and call this Denham hit. Enter add a new class under in, um and call this car types and under car types again make it public again. However, instead of class, what we're gonna do is make this type Denham. This will be an enema of car types and we will make two car types a coupe and a sedan. Now what this does is it creates, too, I guess, easy values to see a coupe which will actually be zero, and then a sedan, which will actually be one. And this later on. When we add a database, this will be very useful. But right now, the sick of this, it's just simple types of something. So car types, we have a coupe and sedan. Maybe we can go ahead and had sports car in here, even though that can kind of fit into both sports car and this will be of two so automatically goes from 0 to 1 to two. Now, if we want this automatically, be one. We can just set this one toe one, and then the rest will follow suit. So coupe is now one. Sudan is now two and sports cars now three. And we'll go ahead and leave this as is. And for readability sake, we'll just go ahead and add these. So when we reference back to it, we can see it. So it's a ball to make sure everything saved. Come back to our car, add one more property and this property will be type car type. The name space isn't imported. So get this red squiggly click on this light bulb and you'll want to be using this car dealership model. You know, click on that. We'll bring that in and then we'll call this type and last thing will do with this car is this car will inherit from vehicle, and so this inheritance will get everything that vehicle has. So now our car has year make and model as well, and this way we can have shared class, and we don't have to write year make model for every kind of vehicle we have. So this inherits from that this car will have those properties as well. In the next video, we're going to create a view model and that view model contain this car class. 5. Making the View Strongly Typed: last time we created this car dealership dot model class library in our solution this time , we're going to need to reference that car dealership dot model from our car dealership. So we come over here to dependencies, right click on dependencies. Click on add reference. Right now, these two projects do not know about each other. Car dealership Web application does not know about car Dealership Top model So if you'd like to use anything from model inside of our car dealership Web application, you won't be able to. So under dependencies, right click add reference and then in reference, click on projects and here will be our car dealership dot model. Go ahead and check that and hit. OK, so now car dealership references, models and so models will be able to be used inside of our car dealership Web application. So next we're gonna create a view model and make our view strongly typed. So what we'll do is under models, right click and add new class it class and will make this called Index View model and it ad Here we have our index view model created. It's already public great, so we'll go ahead and add a property, and I failed to explain what properties are last time. It's basically just part of data. So, for example, a dog has for property and await property. And so if a dog were to be a class, that dog would be called. That dog would have a for property in await property. If you make a specific dog, for example, golden retriever, it would have a for property of, Let's say, gold or long or something like that and then await property. You, let's say 40 to £60 somewhere there. So in our index you model. This view model is a model for a specific view. That's why it's called Index View model. And so this is a model for our index view. So we're gonna do create a property and we will have a car inside of here. Now, this car has not been the name. Space hasn't been added. So once again, click on that little light bulb and will use using car dealership model. Now that car is there and other property will just go ahead and call this car. Now our view models created, and you can also kind of view a view model as a kind of container, and so a view needs several different types of models. So, for example, if we just wanted a car and we wanted a truck in this index view as well do later on, you would need this view model in order to contain both of those. Since one view can only have one class that it is tied to, it could only have one type of class. So let's move on to adding that view or adding that model to our view. So we have this index view model. Now it's come over to our index, and under this view data, we'll do at model and then space. And here we will need to get the name space of our index view model. So one way to do that is to type it in manually or the easy way where we can click on index view model CR name space, copy that move back over the view paste that in there and then under dot models hit dot index view model, and that will make this view strongly typed. And what that means is that this view now has a type this views type is index view model, and now we can reference that view in here. Let's go ahead and delete this. This works. We'll go ahead and add in h three, and we will make this a display. The type of car inside of that index view model. That's what we'll do is an at, and this is razor syntax. This is how to use C sharp inside of views. So the at Capital M model and this is kind of confusing. There's a small model and capital M model after the at the small, and model simply sets the type of the of the view. However, when you use that model inside of our view its capital and model, it's confusing, but you'll get used to it. It's a model dot car dot and we'll dio year space at model Don't car dot make space at model dot car don't model. This will be the year of the car, the make of the car and the model of the car. Then, under this, we'll add the actual information for that car at model again dot car dot and we'll do the mpg and then we will do the They were going small model, small, a model car and then we'll do the type. However it Since this is an Denham, we will need to add a two string method on this to get that string value since technically in in, um is numbers. So if we come back to this in, um, technically, this Denham is all of this 12 and three. So if you're just do that in, um, it would be the number, But since you add the two string, it will get the string value of this. So it's almost like holding two values inside of one, you have a string value and then you have a number value. So we'll come back to this index and this is now we're done setting are strongly typed view up. 6. Passing Data To the View: all right. Last time we made our view strongly typed and added, and added our data to be displayed inside of that view. Now we're going to be inside of our home controller and in our index view or index method, I should say inside of this index method, we will need to create that view model right now. This will not work, since our view in this case are index view requires an index view model. However you come over our controller, our view is not sending any view model. So what we need to do is create that view model and send it to it. So let's go ahead and run that now just to kind of kind of dr at home. So we'll get a no reference exception because model will be null. And we're trying to reference things inside of a null value, which is impossible. So building and we'll come over our index and we'll get a nice a nice one. Handled exception occurred while processing the request object reference not set to an instance of an object, and it'll highlight that line for you at model dot car dot year. And so we've seen that our model is null, and therefore a null object does not have car in that car. Obviously can't have year because the car doesn't exist. So back to our controller inside of our index, we will create a new index, few model and so index view model. Again, This name space hasn't been brought in up in this using, so we'll just use that little light bulb again. Click on that will do. Using car dealership models will have that up there for us. Then we'll just go ahead and call this the view model. Or we can just actually just call it view model. Older equals new index view model Open close. Brent sees my calling that will create our view model So we will be able to send this view model into our view. And we won't get that specific no reference exception again, However, we will get another kind, so we'll go ahead and run this and experiment with that. We passed our view model and however, we will still get in all reference exception. But it won't be because of our view model. It will be because of car cars now. No, we haven't created a car inside of our model and their four year can't exist. Make can exist and model can't exist because cars no no value. So we'll go ahead and create a new car. So car again that won't that name space won't be brought in yet, So we'll hit the little light bulb and will do using car dealership top model So the car car is equal to new car. We'll go ahead and set our view model dot car equal to the car we created. Do a little space there and now this should actually work. However, every value will be the default value, so imagers will be zero. Here we go. Zero bunch of zeros and the strings will just be empty strings and therefore nothing will be displayed. So let's go ahead and add via values to our car. So underneath our car will do ahead. Tech car dot Our make equal to Let's just do Ford and then we will do car dot model equal Teoh. Let's dio focus car dot MPG equal. Teoh I don't know. 31 sounds about right car dot type equal to and here it will give you this which is your model dot Denham Dakar types. We'll go ahead and do click on that, which will give us our car types, and we'll hit 0.1 more time and I'll give you a list of options, which is are three types of cars are possible types of cars. So this is a sedan. And then, lastly, we will do our year and we'll just make this a 2013 14. All right, so now our car has all of these values in it. Go ahead and run this and all of our data should be there. And sure enough, 2014 Ford Focus 31 Sedan. Let's make this a little more see what we're talking about. So before this, at model, that car will do NPG Golan space and then, before this model car type well, dio car type colon. Run this one more time and we'll be able to see what our data actually is. And here we go. 2000 Ford Focus 2014 Ford Focus mpg 31 car type sedan And so we've created a new view model , created a new car model, populated that data, added that data to our car object in our view model, and then pass that view model to our index 7. Final Review: all right. Just to recap everything. We created a web application inside of this web application. We have a controller, We have models and we have views in our home controller. We have one action, which is index. In this index we have, we create a new view model. We create a new car, we give that car values the data or the properties values. Give that card data. We set the view model car equal to that car. And then we return that view model to the view coming over to that view, which again, seeing how NBC takes care of a lot of this forest, we go to our home folder under views home. And then we see a view called Index. Our index view is strongly typed. It takes an index view model. And luckily for us, we did pass it that view model, which is an index view model. In this strongly typed view, we have, uh, header tag, which tells us what paid Ron and then we also have our data that is being displayed. Our model dakar dot year model that car not make etcetera etcetera. And we have our type. That has to be two stringed because of its in, um, we then come over to our models. We haven't index, view model. And again, that view model is a model specifically for a view. This case, our view model, has one property which is a type car. This car lives in this car dealership dot model. In here we have a vehicle which is our base class for all of our vehicles. This has year make and model everything that every single vehicle has. Then we have this car his car implements or inherits from vehicle. And this car class has mpg and it has a car type. This car type is an enema, and Denham is a special kind of class which just contains values. It's kind of like value pairs, so it has a a key, which could be this one. And then it has a value, which is the string value just coupe and sedan, sports car and again to kind of go over this again. If we delete this equals one equals two and equals three. Indexing starts at zero. If you hover over this coop, you can see car types. Coupe is equal to zero, and then sedan is equal to one sports car is equal to two. And if you were to add 300 more it all ago in that pattern, but we don't want that we want to keep everything at 12 and three, and lastly, we set up our default route, set the template to controller action and an optional I. D. We set the controller default equal to home, and then we set the action default equal to index and again with an optional ivy parameter at the end. Now, one quick thing to know with routes, we go ahead and run this. You'll notice that there is no home slash index, and that's because this is our default route. Let me see you smart enough to know that this is equal to home slash index. Those two are equivalent also, every controller if it hasn't index or default view or default action. Rather, you can also leave that off so all three of those are equivalent. Since its default, the default route is home slash index. You can actually just leave that off, and also you can just go to home and leave the index off because because it's the the main action for home. But you could also do that as well, so a little bit confusing at first. But you'll get the hang of it and you'll learn these little nuances as you go along. But all three of these are equivalent, and that's all for this class. In my next class, we'll look at how to add a car to our inventory, will create a simple form and submit a model to our controller. We will also add some styling dar site using boots trump for well at a layout view, which is basically a special kind of view that allows certain elements to be reused on every page without having to write them again. So thanks for joining me, and I hope to see you next time.