FREELessons: 20Length: 2.3 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript


Hello! And welcome back to MVC for designers.Over the next couple of lessons I want to give you an overview of the MVC environment by talking about views, models, and controllers up close. And in this lesson, I wanna start by talking about views, because views are going to be the most familiar part of the MVC framework to a designer. As designers, we're familiar with working with HTML and CSS, and our view, as we've mentioned before is where our HTML is going to reside. So I've got a bare bones MVC application open in Visual Studio Express, and I don't want you to worry about following along with me just yet. You don't have to open up Visual Studio because we're not going to be editing any HTML yet. Instead I just wanna give you an overview of what the MVC framework looks like in a web application or in a Visual Studio project. And we'll create our own project later, but for now let's just take a quick look at this project that I have open. Now you'll notice that I'm using Visual Studio Express. Even with Express, you can use or create MVC projects. So even with the free version of Visual Studio, you should be able to follow along. So in my solution explorer window over here on the right you can see our file structure for our web application. Now this just has the default name of "WebApplication1", but it will serve our purposes in showing you the MVC framework. Now the great thing about this setup is you can very easily tell where the models, views, and controllers are for our website. They each have their own folder, so we have a models folder, a views folder and a controller's folder. And in this particular lesson I want to take a quick look at our views. So I'm going to expand the views folder, and you'll notice in this default project I have a few folders here, and I can open any of those folders to see a number of different views. Now the first thing that you as a designer might notice about these view files is that they're not HTML files. Instead, they're CSHTML files. And that means that we've got a little bit of C# mixed in with our HTML. Let's take a look, for example, at our register .cshtml view. So I'm gonna double click on that and when it opens up we'll see that it's a simple HTML file. But it also has some code mixed in with it. You'll see that we have a lot of code that starts with this @ symbol, followed by whatever code we're trying to access. Now the code itself is C#, but this particular syntax where we have this at symbol followed by the code, is called razor syntax. Razor syntax allows to very easily insert Any C# code we need into our HTML page. Now remember, this is not a programming tutorial. This is not a course on programming. This is a course for designers on how to get your developers started by entering in whatever HTML they need for your website. So, we're gonna be working mostly with HTML and CSS. Now, we are gonna touch a little bit on this Razor syntax and we will touch a little bit of C# code, but we're gonna keep it really simple. But again, as you can see we have our HTML here, we have an H2 tag and we can see by this razor syntax here that we're pulling in some kind of data dynamically. And this code here will ultimately be replaced by some text. You'll also see this begin form method here. So we're using razor syntax here to create a form on our CSHTML view. So this particular view might be a little bit intimidating just looking at it because it has a lot of C# syntax that you might have never seen before. But we can probably find some more basic straightforward pages. For example, if we just go to About.cshtml, it's just some basic HTML here. Now again, we have a little bit of Razor syntax at the top. But you could erase all of that and just put basic, plain HTML here. Now, as you explore your Views folder, you might see something like this Shared folder here. If you expand that out, you'll see we have a file called _Layout and we'll be talking about this particular type of file later on. But we have layouts and we have partials, we have different types of views. Not every view is going to represent a standalone webpage. We have some partial views that we might be able to reuse over and over again inside some of our other views. But again, I just wanted to show you this views folder to show you just how simple this MVC framework can be as far as locating the files that you're looking for. All of the HTML that you're going to be using again, is gonna be in this views folder. We're going to take a look inside the model, and controllers folder soon. But again, most of the work that you'd be doing would be in the views folder. And then in the content folder, so if we open up the content folder you will see we have a few CSS files here and you can see that Bootstrap is included by default whenever you create a new MVC project in Visual Studio. So those are some of the basics of finding and understanding views in Visual Studio. As we move forward, we'll also talk about models and controllers. And then we'll start creating our own projects using some of these concepts. So thank you for watching, and I'll see you in the next lesson.

Back to the top