Lab 8: Understanding Razor Syntax and ASP.NET MVC

This assignment requires the use of Razor syntax to understand and complete Lab 8. The objective is to use ASP.NET MVC layout pages, model and ViewBag to pass objects from controllers to views, and asp tag-helpers. Additionally, model data binding must be used to pass objects from views to controllers. The lab solution should include CRUD code for entities, a generated MVC controller with views using Entity Framework for students, employees, and academic records. The top menu should be set up in the _ACLayout page, and the views of each controller should not have duplicate top menu items. The AcademicRecords controller and its views must be modified to make it more user-friendly, including deleting the Details and Delete views, modifying the Create view to display course code and student number titles in dropdown lists, and adding inline editing of grades.

Algonquin College, School of Advanced Technology
CST8256 Web Programming Language I
Lab 8
Objective
1. Understand and use Razor syntax
2. Use ASP.NET MVC layout pages.
3. Use model and ViewBag to passing objects from controllers to views
4. Use asp tag-helpers
5. Use model data binding to passing objects from views to controllers.
Due Date
See Brightspace for the due date. To earn 5 points, you are required:
1. Complete the lab as required.
2. Demonstrate your lab work during the lab sessions.
Preparation
1. Download Lab8Resources.zip from Brightspace. Unzip the files to get the following
files:
 _ACLayout.cshtml – A layout to be used for all pages in this lab
 AC.png – A logo required by _ACLayout page
 TopMenuItem.cs – The object model for the Top Menu in _ACLayout
2. Continue working on your lab 7. Open lab 7 solution/project.
 Add _ACLayout.cshtml to the folder Views > Shared by right click Shared
folder and select Add > Existing Item …
 In the same way add AC.png to the folder wwwroot > images
 Create a subfolder MenuModel inside Models folder and add TopMenuItem.cs
to the folder.
CST8256 Web Programming Language I
Page 1

Algonquin College, School of Advanced Technology
3. Generate CRUD code for entities
In the same way as lab 7, generate MVC Controller with views, using Entity
Framework for entity Students, Employees and AcademicRecords.
After completion, the lab solution should look as following:
CST8256 Web Programming Language I
Page 2

Algonquin College, School of Advanced Technology
Requirements
The first thing you do with a generated code is to clean it up; remove the parts you do not
need. For Home controllers and associated views, we only need the Index action and its
associated Index view. You can delete the other generated actions and views. Function as
landing “page”, the Home/Index view generally servers as the introduction page to the
application and provides links to the other functions of the application. For simplicity,
you can replace the content of Home/Index view with the following:
<h1>Academic Records Management System</h1>
1. Use _ACLayout page
To use _ACLayout page in a view, you can put the following code block at the
beginning of the View.
@{
Layout = "_ACLayout";
}
Hint:
If all views in a project use the same layout (such is the case for most web
applications), you can put the above code section in _ViewStart.cshtml. Razor
Engine will run the code in _ViewStart.cshtml first before interpreting any view in
the project.
2. Set up Top Menu
_ACLayout receives a list of TopMenuItem objects via ViewBag.TopMenu.
TopMenuItem class (in Models/MenuModel folder) defines a menu item on top
menu bar as:
public class TopMenuItem
{
public string AspArea { get; set; }
public string AspController { get; set; }
public string AspAction { get; set; }
public string DisplayText { get; set; }
}
The property names are self-explanatory, they specifies the menu display text, the
controller and the action the menu item links (you can ignore AspArea property).
CST8256 Web Programming Language I
Page 3

Algonquin College, School of Advanced Technology
Besides the ACLayout’s built-in menu items, the views of the Home controller, the
top menu should have the following items as shown below:
 Employees – Links to Employees controller’s Index action
 Students – Links Students controller’s Index action
 Courses – Links to Courses controller’s index action
 Student Records – Links to AcademicRecords controller’s index action
The views of the Employees controller should not have top menu item Employees,
the views of the Students controller should not have top menu item Students, and so
on and so forth.
Hint:
Inside each sub-folder in Views folder, you can create a _ViewStart.cshtml. After
completing the code in the common _ViewStart.cshtml, Razor engine will run the
code in a sub-folder’s _ViewStart.cshtml before interpreting the views inside the
sub-folder.
So, you can put the code to setup the Top Menu items in a sub-folder’s
_ViewStart.cshtml so that the views in the sub-folder, that is, the views of a
controller, can all have the same top menu. One such example is the
_ViewStart.cshtml inside Views/Home sub-folder:
After completion, your Views folder should look like:
CST8256 Web Programming Language I
Page 4

Algonquin College, School of Advanced Technology
3. Student Academic Records
When dealing with a model involving only one single entity, such as Employees or
Students, Microsoft Code Generation tool can do a reasonably good job to generate
Controller and Views for creating, reading, updating and deleting (a.k.a CRUD) of
the model entity. However, for a model involving multi-entities, such as
AcademicRecords, the generated Controller and Views for the entity’s CRUD leaves
much to be desired.
We will modify the AcademicRecords controller and its views to make it more user
friendly.
 Delete Details and Delete views from Views/AcademicRecords folder and
related methods in AcademicRecordsController class.
The generated code dose not work for these two actions since in case of a table
with complex primary key, there is no single id to identify a row.
CST8256 Web Programming Language I
Page 5

Algonquin College, School of Advanced Technology
 Creating Academic Records
The generated AcademicRecords/Create view displays the course codes and
student numbers in the dropdown lists. We want to display the course code - title
and student number – names in the dropdown list, instead:
When inserting an academic record into database, the generated code does not
check for duplication. The user will get an exception page when the academic
recorder of a student for the course already exists in the database. You should
check the existence of the academic record for a specified student Id and course
code, and in such case, display an error message as:
CST8256 Web Programming Language I
Page 6

Algonquin College, School of Advanced Technology
Hint:
The generated Create actions use instances of class SelectList to pass a list of
items to display in the dropdown list. Google SelectList, you will find out how to
change the display texts to course titles and student names.
 Inline Editing of Grades
Instead of displaying academic records in AcademicRecords/Index view and let
the user to edit each student’s grade on a separate page, you will combine the
AcademicRecords/Index view and AcademicRecords/Edit view into one view
(you can name the new view either Index or Edit) and allow the user to change
grades inline as shown below:
The view also has the following features:
o It displays course code - title and student number - name in the list.
o The column header Course and Student are clickable. When the user
clicks the column header Course, the view displays the academic
records in the list ordered by course titles. When the user clicks the
column header Student, the view displays the academic records in the
list ordered by student names.
CST8256 Web Programming Language I
Page 7