CST8256 Web Programming Lab 8

This is a practical assignment for Algonquin College's CST8256 Web Programming Language I course. Students are tasked with completing Lab 8, focusing on understanding and utilizing Razor syntax, ASP.NET MVC layout pages, model and ViewBag for object passing, tag helpers, and model data binding. The lab involves creating and modifying CRUD operations for entities (Students, Employees, AcademicRecords), implementing a top menu navigation system using ViewBag, and enhancing the AcademicRecords functionality to include inline grade editing and improved error handling for duplicate record entries. The assignment requires students to utilize provided resources (_ACLayout.cshtml, AC.png, TopMenuItem.cs) and modify existing code to meet the specified requirements. The goal is to build a functional Academic Records Management System with improved user interface and data handling.

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