FREELessons: 20Length: 2.3 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.3 Basic Pages

Hello, and welcome back to ASP.NET MVC for Designers. In this lesson, we're gonna take our project and create our first basic webpage or view in MVC. So let's open up our ProjectFiles folder. I want to take the project we ended with in our last video when we created our first project, the one that's stored in this Store01 folder, and I wanna make a copy of that. So we'll just copy and paste it, and we're gonna call this new folder Store02. So all the changes that we make in this lesson will be stored in this Store02 folder. So I'm gonna go into that folder. And when we're opening up a project in Visual Studio, we're gonna be opening up the solution file, or the .sln file. So we're gonna open up this Store.sln file, I'm gonna double-click on that to open it, and then we'll open it up in Visual Studio. And I can get rid of this other version of Visual Studio I've got open, and we can see our project. Now the way MVC is set up, we can't start just by creating a webpage. We can't just create an index.html page and expect everything to work to the way we want it to. With MVC, we need a controller with an action in it that points to the view that we want to use. So before we create a view or a webpage, we need to create a controller for that. And your controllers are usually grouped by basic functionality. So you might have a home controller that has maybe an index page and an About Us page, maybe a Contact Us page in it. Then you might have a shopping controller,which has all of the views in it or all of the actions or pages that you would need for a shopping cart system. So you would have your product pages in there, your checkout pages, your shipping pages, your payment pages, things like that. If you were running a social media site like Facebook, you might have an enrollment controller, where you might have pages and forms created for enrolling as a new member of the site. So, again, your controllers are usually grouped together by function. So we're gonna create a home controller, and in that home controller we're gonna create an index view, which will be the homepage for our application. So I'm gonna right-click over here in the Solution Explorer, and if you don't see your Solution Explorer, you can go to the View menu, and it should be the first option here. In that menu you can find Solution Explorer there, or you can hit CTRL+W+S. But in your Solution Explorer, right click on your Controllers directory, and then we're gonna go down to the Add option, and on the flyout menu, we're gonna add a new controller. So we'll click on Controller, and it gives us a number of options. I'm just gonna select the Controller- Empty option and click on Add. Then it asks us what we want to name this controller. And the MVC naming convention has the name of controller itself followed by the word controller. So, I'm gonna call this HomeController and click on Add. So, this does a couple of things for us. First of all, it creates a C# file called HomeController.cs. And in it, we have code for the controller itself. It also creates, if you'll notice, in the Views directory, a new directory that matches the name of our controller, so since we called this HomeController, it called this view directory Home. Now you'll notice there are no views in that directory yet, but we're gonna take care of that right now. So in our HomeController.cs file, you'll notice it automatically created an action for us called Index. And this action is basically just a method or a function within our controller. And again, by default, when you create a controller, it's gonna create an action called Index. And this action is going to be associated with a view. You'll notice inside this action the only thing it's doing is returning a view. So let's create that view. The way we create it, is we simply right click on the name of the action, which is Index, and then we'll go up to the very top to the second option and click on Add View. As you can see, by default, it names it Index, which was the name of that action. I'm gonna leave it on Empty (without model), and we're not gonna create it as a partial view. It's gonna be a full view. And I'm gonna leave Use a layout page checked. And we'll talk about layout pages later on. But for now we're gonna leave that checked and click on Add. So after we add our view, you'll notice a couple of things happen. First of all, in our home folder we now have a file called Index.cshtml. This index file is the HTML file that we're gonna be using. Now remember, it's called CSHTML, which means that we can incorporate C# with it, and we can already see, by default, a little bit of C# up here using this Razor syntax, which starts with the @ symbol here. And here, we're just setting something called ViewBag.Title to a value of Index. And then we have an h2 tag with the title of the page title in it as well. Another thing you'll notice is that we now have a Shared folder in our Views folder. And in that Shared folder we have a file called _layout.cshtml, and if we click on that we can see that it contains more HTML, and again we'll talk more about this layout file later. For now, I just wanted to point out that it was there. Another very important thing that you'll see is that a new folder or directory called Content has been added to our project and inside that content directory, we have some Bootstrap CSS files, as well as a default Site.css file. Now, Bootstrap is a CSS and JavaScript framework created by Twitter which allows us to very rapidly create and design a site using HTML and CSS. It provides a bunch of default CSS classes that we can use to lay out our content very, very easily. And we'll talk more about Bootstrap soon. But it's important to point out that Bootstrap comes with MVC projects by default after you create your first view, because this content folder wasn't there before, but when we created our view it suddenly showed up. You'll notice this Scripts folder also now has some Bootstrap files in it. So now that we know how to create our first index or our first view in MVC, we need to know how we can actually look at that view in the browser, and we'll talk about how to do that in the next lesson. Thank you for watching and I'll see you then.

Back to the top