I ran through an ASP.NET MVC tutorial on the Microsoft ASP.NET website as a bit of a refresher for me. I both typed out the code in the tutorial and created something extra using that tutorial to make sure I could think for myself a bit. Here’s Part 1 of that tutorial.
I used Visual Studio 2013 Professional Update 4, courtesy of the Dreamspark program. I downloaded Visual Studio 2013 Community Edition on my Surface Pro 3 and it seems to be able to do the same stuff.
This MVC tutorial focuses on the use of Entity Framework to work with data by building a project called ContosoUniversity. The sample app simulates a record of students and faculty at a university, along with course enrollments.
I have easily gotten into a trap where I follow a tutorial, then mindlessly type the code out, so I would get the concepts but not exactly how to do it on my own.
This time, I both hammered out the tutorial code and, in the same project, created my own thing. It’s a fictional baseball team and player database. In this case it’s just a list of teams and a list of players along with the team that player is on.
My comments work best if you read the tutorial along with them.
Create an MVC Web Application
In Visual Studio, I created an MVC Web project. Instead of ContosoUniversity, I named it TeamRoster.
There is an “ASP.NET Web Application” and an “ASP.NET MVC5 Web Application” project. Oddly, the latter is for a mobile project. For this tutorial I’m supposed to use the one without “MVC5” in the title, so I used that one.
Set Up the Site Style
When the project is created and you hit CTRL+F5 to run it, here’s how it looks:
The first thing to do is setup the top navbar menu. This is where I learned my first bit of Razor Syntax.
The main shared layout file is in ViewsShared_Layout.cshtml, so this is the file we’ll edit. The section with the @Html.ActionLink tags is responsible for the links in the navbar. @Html.ActionLink takes three arguments as shown here:
@Html.ActionLink("About", "About", "Home")
The first argument is the link text, so “About” will be the link on the webpage. The second argument is the method inside the controller that clicking this link will run, which is the About() method.
The third argument is the controller that method needs to be in. Due to the naming conventions in ASP.NET MVC, putting “Home” here means the application will look for a controller called “HomeController.cs”. There’s already a HomeController that the application created by default.
Adding Links to the Top Navbar
The tutorial added four extra tags, Students, Courses, Instructors and Departments, which created four extra links in the navbar. I added two extra: Teams and Players, since I want separate pages to list each. This is how my navbar looked in ViewsShared_Layout.cshtml:
<ul class="nav navbar-nav"> <li>@Html.ActionLink("Home", "Index", "Home")</li> <li>@Html.ActionLink("About", "About", "Home")</li> <li>@Html.ActionLink("Students", "Index", "Student")</li> <li>@Html.ActionLink("Courses", "Index", "Course")</li> <li>@Html.ActionLink("Instructors", "Index", "Instructor")</li> <li>@Html.ActionLink("Departments", "Index", "Department")</li> <li>@Html.ActionLink("Teams", "Index", "Team")</li> <li>@Html.ActionLink("Players", "Index", "Player")</li> </ul>
This setup creates the following Navbar when we Build the solution and hit CTRL+F5 to run it:
When the “Teams” link is clicked, instead of looking for an HTML file like “Teams.html”, the TeamRoster application will look for the Index() method inside a controller class file called TeamController.cs. This controller doesn’t exist yet, so clicking the link would bring up a 404 error page like just like this one:
To explain why the requested URL is “/instructor” when clicking the Instructors link would detour us into a discussion on routing, which is something I’ll learn more about later; it’s not explicitly covered here.
Next Section: Creating the Data Model and Database Connection
My next post runs through creating the Data Model, and using it to create the database.