3.6 Linking Views

Hello, and welcome back to ASP.net MVC for designers. In this lesson I want to talk about creating links between views in MVC. So we're going to start with the Store03 app that we ended with in the last lesson. I'm going to make a new copy of that so that we don't save over those changes, and I'm going to call this new copy Store04. I'm gonna jump into Store04, and open up that solution, and that will give us another instance of Visual Studio, so I'm gonna close this first instance that I had open. And here we go. So we have a view right now in the home controller, and I'm gonna create another controller for shopping. I'm gonna right click on the Controllers folder. We are going to go to add, controller, and we're going to do an empty controller up here and click on add. So we are going to call this controller "Shopping". Click on add, and then in our shopping controller, as you can see it has the default index action. We are going to create a view from that, so lets right click on the word index, and click on add view. So we're gonna call this "Index" and we'll leave all the rest of the default settings as they are and click on add. And that will create our view, and if we look down at our views folder, we can now look inside shopping and we see index.cshtml there. I'm gonna go into that index.cshtml and inside our H2 here, I'm just going to add shopping, and then we'll create a paragraph here with some random text. And now, let's save our file. So, let's jump back into our other index.html file, which is inside the home folder. We're gonna open up that one and I'm gonna create a link to our shopping index view. And let's put that link, let's just create it here at the beginning of this first paragraph. I'm gonna put an anchor tag here, "href=", and I'll fill that in in just a second. And then we'll take our closing anchor tag, I'm gonna cut that and then move it over here a little bit. So now we have a few words here that are all going to be linkable. And for this particular href, I want to link to the shopping controller to the index view within that shopping controller. We talked a little bit about how routes work in a previous video. And again, the way it works is you first include the controller. So I'm gonna type forward slash and then the name of the controller I want to access, which we called shopping. And then let's go ahead and capitalize that. And then I'm gonna type a forward slash, and then the name of the action we want, which is index. So let's see if that works. Let's save our view, and then let's hit control F5 to view our site. I'm gonna bring that window over and here we go. Now we have a link here, and if we click on that link, you'll see that it takes us to the shopping index page. That's one way we can create a link. There's actually another way that we can do that, using Razor syntax. Now when we use a Razor statement we're actually using C sharp code, but the syntax itself is called Razor syntax. And with Razor syntax we always start it with an @ symbol. So, instead of all this here, instead of writing out the href tag itself, I'm going to get rid of that, and then I'm gonna type @ and then Html with a capital H dot action link, and then we need a set of parentheses. Well, what we're gonna gonna do is we're gonna take this link text here. This is the text we had inside that link, I'm gonna cut it. And then inside this action link, I'm gonna start by pasting that inside parenthesis, or I'm sorry inside quotation marks. And then after that we're going to include the name of our action we want to point to. And the name of our action we want to point to is index. The problem is now we need to be more specific, because right now we're using the home controller for this particular index page that we're on, but the index page that we're linking to is using the shopping controller. So after our action here, I'm type comma space and then in another set of quotation marks we type in the name of the controller that we want to use, which is called shopping. Then I'm gonna get rid of this closing anchor tag, and we're good to go. Now you'll notice that not necessarily everything after the @ symbol is recognized as a piece of code. Razor syntax is very smart about knowing what's code and what's not. So once we get to the end of this block of code here, it just treats the rest of that line as plain html text. So again Razor, syntax is very, very smart in understanding what's code and what's not code. So let's save that file, and let's view it in the browser again. Now since I've just saved changes to a cshtml file, I can just refresh the page that I had open in my browser window. If you make changes to a CS file on the other hand, such as a controller file or a model file, then you'll actually have to rebuild the project. But again, since we just made changes to a cshtml file, we can just go to our browser and refresh the page. And I don't actually want to refresh, I want to go back to the home page. I'm going to change shopping in the URL to home or you could just hit the back arrow to go back to where we were before. And just to make sure we have the latest version I'm going to refresh. And then we have our link here. As you can see, if we click on that link, it does the same thing that it did before. The only difference is the way that we created it. We created it in Razor Syntax instead of spelling out the link ourself in HTML. Now there is another method that's very similar to this HTML action link and it's called url.action. And the difference is, this HTML action link creates the entire A tag or anchor tag for us. The url.action method on the other hand just returns the URL itself. So if we wanted to use url.action, and let's do this in column two here, we would actually have to create the anchor tag ourselves. So let's go ahead and do that. And we'll need to put the opening and closing quotation marks here, and then we'll close that off. And then we'll take this closing anchor tag, and we'll move it down a few words, paste it there. And then for the href here, we would use our Razor syntax again, but this time we would use url.action, and then inside the parentheses, we're basically going to put the same thing. So the first thing we're gonna put is the action we want, which is index, and the second thing we're gonna put is the controller, which is the shopping controller. Now you'll notice I'm not spelling out shopping controller, even though it's called shopping controller up here in our CS file. It knows that it ends with controller. We just need to put whatever comes before the word controller. So we're putting the word shopping there. Now you'll notice that the url.action doesn't have the text link in it because remember we've built out this anchor tag ourselves. So the text for our link is already right here. We don't need to include it in this method. Instead, this method just needs the action and the controller. So, let's save that. And let's refresh our page, or actually go back to the home page and then refresh again. And then you'll notice our link on the right. We can click on that and it will take us to the shopping page as well. So those are a couple of different ways to create links in asp.net MVC. And again all of the changes we made in this lesson, are now stored in the Store04 folder in your project files folder. Thank you for watching and I'll see you in the next lesson.