Simple data manager application leveraging HTML on top of ASP .NET WebApi and SQL Server database, developed with Visual Studio and as little code as possible.
-
Initiate creation of a new Visual Studio project of type ASP .NET Web Application
-
Start with Empty template and Web API folders and core references
-
Open Solution Explorer in Visual Studio to see and manage the source code files
-
Add new SQL Server Database in App_Data folder from Solution Explorer
-
Set Departments table name in the T-SQL script, add columns, and set Id column (primary key) as identity column
-
Initiate adding of a new foreign key to Employees table to create a relation between employees and departments
-
Set Employees.DepartmentId column as foreign key to Departments.Id column
-
Show table data for Departments and Employees tables from Server Explorer
-
Enter some test data for Employees table, using DepartmentId values from actually created department rows; DepartmentId is nullable indicating that department relationship is optional for employees
Create data model for the organization database (mapping database tables to middle code data entity objects)
-
Add new ADO .NET Entity Data Model in Models folder from Solution Explorer
-
Set MyOrganizationModel as the Entity Framework data model name
-
Use EF Designer from database as the database already exists
-
Select database tables that you want to create data model objects for
Create WebApi controllers using the existing data model classes to expose get and update actions for your data entities (and eventually database) on HTTP as /api/* URLs
-
Build the Visual Studio project to ensure data model is compiled
-
Initiate adding of a new controller in Controllers folder from Server Explorer
-
Select Web API 2 Controller with actions, using Entity Framework
-
Select MyOrganizationEntities as data context class and then Employee as model class to generate controller for
-
Open Nuget package manager to add frameworks to help with client side Development
-
Use Browse to search for, then select and install AngularJS.Core package (or another client side framework package that you would like to use)
-
Initiate adding of a new HTML Page in the project folder from Server Explorer
-
Write HTML code with a list item to display employee information as a template definition
-
Run the app to see the template itself without actual employee values
-
Initiate adding of a new JavaScript code file in Scripts folder from Server Explorer
-
Write an Angular module with a controller that loads actual employee values using HTTP from WebApi using /api/ControllerName URL
-
Update HTML code to load the Angular script, app.js script, and initialize the Angular app module and controller, then repeat generating list items for each employee
-
Run the app again and use browser developer tools (F12) to notice a circular reference serialization error on the server side
-
To resolve the issue caused by employee data linked to department that is linked back to employee data go to Entity Framework data model and select False for its Lazy Loading Enabled property
-
Run the app again and see base employee data is loaded successfully; note, though, that department data is not available (since related department data for employees hasn't been loaded anymore)
-
To resolve the issue you may use a separate data transfer object (DTO) as model; initiate adding a new class in Models folder from Server Explorer
-
Write very simple code to define EmployeeDto class and its properties, mapping to fields to be displayed on the client side, including DepartmentName
-
Update EmployeesController code to return EmployeeDto objects instead of Employee entities for the GET verb
-
Update HTML code to use DepartmentName field of the employee DTO
-
Run the app again and see full employee data is loaded and displayed correctly, including department names; some employees may not have a department
-
Update HTML code with input elements to support new employee field entering, and an Add button linked to a new addNewEmployee function to be defined in JavaScript code
-
Update JavaScript code to support editing fields for and adding a new employee, and reinitializing the employee list afterwards
-
See the new employee created and his or her information displayed in the list of employees