Creating A View
So it is time to dig into the creation of an actual page. We will create a simple view. This is rather straightforward.
Step 1: Create the View
First step is to create a view. In this case we will create one of the pages you will see on the site. Since we are just creating a simple view, it won't really do much. We are going to create the zoo page that you will find here, called "Look at the Monkey".
So I created the view by right-clicking on the Views > Zoo folder and chose Add > View. I got this dialog:
In this case I left everything with their default values except the name, which I called LookAtTheMonkey. There are some nice options there, but they will have to wait for another time. Of course I clicked "Ok" when done. Yay. My new view was in solution explorer.
Step 3: Create a Controller Action for the View
So now I have my view. I now need to tell its controller to return it when visiting the proper url. So I go to my "ZooController" and added the following:
public ActionResult LookAtTheMonkey()
{
return View();
}
Now that this is done, if you go to "/Zoo/LookAtTheMonkey" you will get a rather bland page...but a page nonetheless.
Step 3: Customize Your Page
Before we start the page, as we just said, is rather bland. Here is what is there:
Because I am using a MasterPage, there are placeholders for content in place of a the expected Html (if you are unfamiliar with masterpages, take a look at this msdn article. There are lots of resources on the web about them as they are not new to MVC). The top content area is for the head tag and has a title Html node. As you can see, it uses the name of the view file that was created. Often the name will need to be tweaked, as in this case. At the very least it needs spaces between the words.
It also by default creates an header 2 tag with the view file name. Like the other, it needs to be changed. After that is another content widget to put content in the sidebar. We will put something there in a second.
After the title changes, some content needs to be added. So I downloaded an image of a monkey for the page and added a little sample text as well. You can view the final result at the look at the look at a monkey page. If you download the code you can see that there is no funky code in the LookAtTheMonkey.aspx view. Inside the content tags it is just plain ol' Html.
Speak Your Mind!
Have something to say? Find a grammatical mistake? Think I said something incorrect? Don't like my perspective? Hate my color scheme? Whatever it is, you can let me know. I would appreciate it if you did.
