FREELessons: 20Length: 2.3 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.4 Viewing Your Work

Hello, and welcome back to ASP.NET MVC for designers. Now that we've created our first view, this Index view, I want to talk about how we can actually look at this file in a browser window. How can we test our pages? Well we can't just open up a browser and go to our cshtml file because a browser doesn't know how to read a cshtml file. Instead we have to build our project and view it that way. Now there's a couple of ways we can do that. The most obvious way is we can click up here on this button which, in my case, says Google Chrome, but it's really gonna have whatever default browser you have set up on your computer. We can also click on this dropdown, and it will give us a couple of other options for Internet browsers. And if we click on that, it will open our file. It will first build our project, and then open our file in the new browser window. Let me drag this over onto the screen so we can see it. And there you go, we have our Index page. Now when we do it this way, it actually throws Visual Studio into debug mode. And when we're in debug mode, it won't let us do certain things, and so we have to exit out of debug mode if we want to be able to edit our cs files, or anything like that. And since this course isn't really directed towards programmers, I don't really want to have to worry about using debug mode. So I'm gonna turn that off, and the way we turn that off is over here on the right, you see we have this little Stop button, this little red Stop button under the Help menu. I'm gonna click on that to turn debugging off, and we have a little bit of a problem when we do that. If we go back to our page and try to refresh it, you'll notice that the webpage is no longer available. And a lot of people don't like that behavior, but there is away to turn that behavior off. What's happening now is when we click to stop debugging, it's basically just disconnecting us from that instance of our web server. So what we want to do is we can go back into our project, and then right-click on the Store project. Not the Solution, but the project itself which is just inside the Solution. So we'll right-click where it says Store, we'll go down to Properties, and then on the Web option here, this third option from the top, we're going to scroll down a little bit, and you'll see an option called Enable Edit and Continue. If we turn that off, then we won't see that problem anymore. We'll be able to stop debugging and still view our files. So let's save that, Ctrl+S, that will save our settings for us, and then we can close our settings file. So now, let's talk about an easier way that we can view our work in our browser, with our cshtml file open, I'm gonna hit Ctl+F5, or you can go to your Debug menu, and click on Start Without Debugging. Now if you don't see this Start Without Debugging option here, there's a way to turn it on. But just so we can be thorough, let me show you how you would turn this option on. We can go to the Tools menu, and then go down to your Import and Export Settings. And then you'll go to Reset all settings. We'll click on the Next button, and then you can choose to either save your current settings or just overwrite them, and then click on next. And then from this list here, you would choose Visual C#. And then when you clicked on Finish, that menu option would be available to you. Now I just canceled cuz I've already got it, but again you can get to that by going to Debug, Start Without Debugging, or much easier, you can just hit Ctrl+F5. Once we hit Ctrl+F5 it builds our project, and then it shows us our project in a web browser. And if you look at the URL itself, first it has our local host, but then it has the name of our controller, which is the Home controller, followed by the name of the action or view that we're looking at, which is the Index view. And that's another one of MVCs many naming conventions. It uses the controller name followed by the action name for the route or for the URL. But that's how you can test and view your webpages in an MVC project. Thank you for watching, and I'll see you in the next lesson.

Back to the top