Watch videos with subtitles in your language, upload your videos, create your own subtitles! Click here to learn more on "how to Dotsub"

Understanding Models, Views, and Controllers

0 (0 Likes / 0 Dislikes)
  • Embed Video

  • Embed normal player Copy to Clipboard
  • Embed a smaller player Copy to Clipboard
  • Advanced Embedding Options
  • Embed Video With Transcription

  • Embed with transcription beside video Copy to Clipboard
  • Embed with transcription below video Copy to Clipboard
  • Embed transcript

  • Embed transcript in:
    Copy to Clipboard
  • Invite a user to Dotsub
[ASP.net] [www.ASP.net] [Stephen Walther] Hi, my name is Stephen Walther, and in this video I'm going to be giving you an overview of ASP.net and MVC applications. My real goal is to explain the three letters, MVC. I want to explain the different parts to the model, view, controller application. So I want to explain what models are, what views are, and what controllers are. So I really want to give you a sense of how all these things work together and how an MVC application differs from an ASP.net web forms application or even an active server pages application. So let's start by creating a new visual studio project. We'll create an ASP.net MVC application visual studio. Let me switch over to visual studio. I'm going to go to File, New Project, and I'm going to select Visual Basic over here on the left. I could, of course if I wanted to, use C sharp as my language. Then over here on the right, I'm going to select the ASP.net MVC web application template. The default name of MVC application 1, not the best name in the world, but I'm going to stick with it since this is just our throw-away application. Click OK. The next thing it's going to ask is whether I want to create a project for creating unit tests for my new MVC application. I'm just going to select No, because we're not going to be using unit tests. And there we go, go over here to Solution Explorer, you're going to notice that we get a bunch of default folders, and some default files. So what's going on here? Again, you'll notice that we get a folder that corresponds to each of the letters in MVC. We get a models folder, a views folder, and a controllers folder. So what's going on with those folders? The best way to kind of get a handle on what's going on in the content of these folders, is to run an MVC application. Fortunately for us, we get a default MVC application when we create a new MVC application in Visual Studio. If you open up the controllers folder, you notice that we get a default controller. And if we open up the views folder, you notice that we actually get a subfolder with some views in it. So we can go ahead and run this and we'll get a very, very simple sample application. So I'm going to go ahead and hit Run. It's going to ask me whether I want to go into debug mode, I'm going to click OK. And it's opening up a browser. And there we go, we get our sample MVC application. Now this is an insanely simple application we get, that only consists of two pages. It consists of this homepage right here, that's what we're seeing by default, And if you click About Us, you get this about page right here. So that's it in terms of the application. The important thing to notice about the sample application is the URL, the address bar in your browser. If I click on Home, notice that the URL is /home, it's going to some content at /home. If I click on about, the URL says /about. Okay, so let's close down the browser. Let's try to find the Home and the About content. So I'm going to go over here to the Solution Explorer window, I'm looking for /about. I'm not finding it. It's nowhere to be found. So what's going on, why can't I find /home or /about within my solution files? This points to a really critical difference between an ASP.net web forms, or active servers pages classic application, and an ASP.net MVC application. So in an ASP.net web forms application, or, for that matter, an ASP classic application, a URL corresponds to a page on disk. In other words, if you type in a URL into your browser and you hit Enter, there better be a page that corresponds to that URL on your web server or you're going to get back an error, you'll get back a 404 error. That's not how it works in an ASP.net MVC application. In an ASP.net MVC application, a URL corresponds to something called a controller action. So you type in a URL, you hit Return, it's not a page that's requested from the server. What happens is a particular method of a particular class get invoked. And so some application logic runs. One way to think about this is an ASP.net web forms application, or active server pages app, a classic application is kind of content centered, it's all concerned about what content you get back when you type in a certain URL. And ASP.net MVC application, on the other hand, is more logic centric. It's more concerned about what kind of logic to invoke on the server when you type in the URL. Business logic might do something like it might return some HTML content back to the browser, but it could do anything you want. It could throw back an error message, it could redirect you to some other kind of logic that runs on the server. But it's logic that runs, it's not content that's returned. So how does a URL get mapped over to a certain bit of logic and an ASP.net MVC application? That's where something called URL routing comes in. URL routing is responsible for mapping a URL to a particular controller action. So let me explain how that works. I'm going to switch back to Visual Studio. Let me double-click on this global .asax file here. Let me show you what's going on inside of that. The global .asax file contains all of the application life cycle events. One of those events is the application start event, that event is raised right when your application starts up. You'll notice inside of this global .asax file, this method called register routes is called— and register routes, what that does, is it sets up somethiing called a route table for your MVC application. What the route table does is, it's responsible for mapping URLs to particular controller actions. And you'll notice that they give you a default route inside of here, this guy right here, in fact, it's actually named Default. So by default they're going to assume that if you type in your URL, that your URL is going to have 3 parts. The first part is going to be the name of the controller, the second part is going to be the name of an action, and the third part is going to represent an ID. And they also give you default values for these three parts. So if you don't type in the name of a controller, it's going to default to Home. If you don't type in the name of an action, it's going to default to the Index. And finally, if you don't type in an ID, it's just going to default to an empty screen. So let's switch back over here for a second. So we were looking for that page called Home before, it doesn't exist. If you type in just /home, what happens is, by default, that turns into /home/index and then there's an empty string because there's no ID there. If you type in /home/about, that gets mapped over to the home controller and the about action when the home controller gets called. If you typed in something like /MyController/DoSomething/34, what would happen is it's going to go to a controller called My Controller, it's going to call the Do Something method on that controller, and it's going to pass over to a parameter with the value of 34 named ID into it. So let's take a look now at the controllers to see what a controller looks like generally. We get the one controller by defaults in our sample application, the Home controller. So I just opened it up over here, it is in the controllers folder. All the controllers that you create will be in the controllers folder. And you notice that the home contoller has 2 functions inside of it. It has an index function and it has an about function. That's good, because the index function is what gets called when you do /home/index, the about action is called when you type into your browser /home/about. So that's how it works. What both of these functions do, is they both return a view. So we talked about controllers, and controllers often what they do internally is the controller action just returns a view back from it. So how does this work? If you just say return view, the name of the view is inferred from the name of the controller action. So what's going to happen here is the MVC framework is going to look for a view called index, because that's the name of the action, in a folder called home, because that's the name of the controller. So we do have that. If I go over to my solution explorer window again, and expand out this views folder, you notice that there is a home subfolder that corresponds to the name of the controller. And inside that home subfolder, you have 2 views called about and index, which is good, because we're returning a view both from the index action and from the about action. And these are the views that get returned. It's all mapped by convention, it all has to follow that convention, of how you lay out these different files within your solution. All right, so what's a view look like? Well, this shouldn't be surprising if I open up a view, you notice that it's just HTML. Inside of here we have normal HTML tags. This contains all of the content that you want to display to the user, so normally it just contains some HTML content inside of it. All right, at this point we've managed to talk about controllers and views. And you remember what a controller is responsible for doing is firing off some logic when a request is made from a browser. [fires off some logic in response to a browser request] And a view contains the HTML mark up and contents that is returned to the browser. So the only thing left in this MVC stuff is what's the model? So we've talked about the view and the controller. So where does the model come in? The idea of the model is, the model is supposed to consist of all your logic, all your application logic, all your database access logic, all of that stuff goes into the model. So the model really consists of a bunch of classes. Another way of explaining that is over here in our controller, these controller functions right now are really, really small. We don't have a lot of logic going on inside the index function or the about function. That's the way it's supposed to be. You always want your controller actions to be very, very skinny. They should only contain the minimal amount of logic to be able to decide which view to show or what kind of response to perform in response to a browser request. You want to put all of your application logic, all of your data access stuff, all that kind of stuff into a bunch of classes that you stick inside your models folder. Then you can call out to those classes within your controller method. So the general way of explaining that is just to say that controllers should be skinny.. Models should be fat. All your application logic in general should be pushed over into your model. So model consists of business logic, data access logic, all the logic that makes up your application. So that's the MVC, that's the model, view, and controller. So this was a very, very high-level overview of the different parts of an ASP.net MVC application. But I hope it gives you enough to sort of get started understanding what's going on with the different parts of an MVC application. [www.ASP.net]

Video Details

Duration: 13 minutes and 4 seconds
Country: United States
Language: English
License: All rights reserved
Genre: None
Views: 5
Posted by: neudesicasp on Sep 16, 2013

Confused about Models, Views, and Controllers? In this tutorial, Stephen Walther introduces you to the different parts of an ASP.NET MVC application. For additional information about this video, read the "Understanding Models, Views, and Controllers" tutorial (C#, VB).

Caption and Translate

    Sign In/Register for Dotsub to translate this video.