Workshop: Building an Enterprise

Application with ASP.NET Core MVC

Web APP Theme: SIDJEME

Lab12: Improving the Application's Performance

Exercise 1: Making Web App more responsive using AJAX
Scenario
In this exercise, you will add features to the session validation page by using jQuery ajax and
jQuery unobtrusive ajax.

Task 1: Loading view in bootstrap Modal using jQuery ajax

1. Open Visual Studio 2019 and in the Get Started Window, select Open Project or Solution
o Location: [Root Repository] \SIDJEME Labs\SIDJEME\SIDJEME.sln
2. Build the solution and ensure there are no errors.
3. Run the application.
4. In the main menu click the Sessions link.
5. In the Validation Sessions list, edit any session from the row edit icon button.
6. At the bottom of the Edit session view, note the presence of section that shows all projects
associated or planned with this validation session.
7. You will modify the “link project” button to toggle a modal popup, allowing the end user to link
an existing project with this session.
8. Stop debugging.
9. In the Ansej.Sidjeme.Web project, open the _Layout.cshtml view under Views/Shared folder.
10. At the bottom of the _Layout view and just above the first <script> tag, notice the presence of
bootstrap modal html tags as following:
<div class="modal" tabindex="-1" role="dialog" id="modal">
<div class="modal-dialog" role="document">
<div class="modal-content">

</div>
</div>
</div>

Note that the modal div has an id with “modal” value. Remember this id, you will use it later
when toggling modal popups.
 11. Under Views/SessionValidation folder, open the Edit.cshtml view.
12. Locate the /*TODO: Add data attributes to toggle a modal popup to link project with
validation session */ comment and add data attributes to the button element as following
o data-toggle: modal
o data-target: #modal
o data-url: use @Url.Action helper to generate url for AddSessionValidationDetails
action in the SessionValidationController with route sessionValidationId having
value from Modal.Id.
13. in the scripts section, locate the portion of code that register an event handler for the
shown.bs.modal event :

$('#modal').on('shown.bs.modal', function (e) {…})

Note: The event occurs when the modal popup is shown.

14. Review the event handler code, and how jQuery ajax is used to get the
_AddSessionValidationDetails view by using the data-url attribute in the modal toggler button.
15. Note how the modal popup content is set to the response of the ajax request.
16. Also, note the call to the addSessionValidationDetailsPopupShown javascript function, which
initializes the plugins in the modal popup like jquery validation and autocomplete.
17. Note that the autocomplete plugin uses a remote source, in this case an API REST service, you
defined in the ProjetController in the Ansej.Sidjeme.Api project.
18. Review the code of the addSessionValidationDetailsPopupShown function.

Task 2: Using unobtrusive ajax in actions and forms

1. Under Controllers folder, open SessionValidationController.cs file.
2. In the SessionValidationController, review code of the following actions:
o SessionValidationDetails (Get): returns _ SessionValidationDetails.cshtml partial view,
which shows list of projects linked with the validation session as tabular data.
o AddSessionValidationDetails (Get): returns _AddSessionValidationDetails.cshtml
partial view, shown in the modal popup when clicking the Link project button in the Edit
SessionValidation view.
o AddSessionValidationDetails (Post): invoked when posting form in the
_AddSessionValidationDetails view from the Modal popup.
o EditSessionValidationDetails (Get): returns _EditSessionValidationDetails.cshtml
partial view, shown in the modal popup invoked when clicking the edit button icon from
the _SessionValidationDetails list.
o EditSessionValidationDetails (Post): invoked when posting form in the
_EditSessionValidationDetails view from the Modal popup.

Note: Remark how the ResultatSessionValidation enum is returned as SelectList in the

EditSessionValidationDetails action to be rendered in <select> element.

3. Right click the SessionValidationDetails action, then select Add View.

4. In the Add MVC view window, use the following options to create the view then click Add:
o View name: _SessionValidationDetails
o Template: List
 o Model: Ansej.Sidjeme.Domain.SessionValidationDetails
o Create as a partial view: checked
5. In the Generated _SessionValidationDetails view, change the content as following:
o The table must have three columns: ProjectId, Result and actions
o In the table body cells, set <td> content to: @item.Projet.Numero,
@localizer[item.Resultat.ToString()] for the first tow cells.
o For the actions <td> content:
 Set the focus in the <td> content,
 In the Visual Studio Edit menu, select Insert File As Text… item
 In the Insert File window, select Text Files for file extension, then select the
SessionValidationDetails_Actions.txt file.
6. Review the actions added for edit and delete SessionValidationDetails.
7. In the delete action tag <a>, note the presence of data-ajax attributes, these latter are used by
the jquery.ajax.unobtrusive library provided by Microsoft to configure ajax actions or forms.
8. Review the jquery.ajax.unobtrusive.js file under the wwwroot/lib/jquery-ajax-unobtrusive
folder.
9. Under the Views/Shared folder, notice the _ajax.script.cshtml partial view, this one references
the jquery.ajax.unobtrusive library bundle configured in the bundleconfig.json.
10. Open the Edit.cshtml view under Views/SessionValidation folder.
11. Locate the /*TODO: Embed _SessionValidationDetails partial view and pass
Model.Details as model*/ comment, just after the comment embed the
_SessionValidationDetails view using the <partial> tag helper.
Note: Do not forgot to pass Model.Details to the <partial> tag helper model property.
12. Locate the /*TODO: Import unobtrusive ajax script* comment, just after the comment
import the jquery.ajax.unobtrusive script using the <partial> tag.
13. Open _AddSessionValidationDetails.cshtml view under Views/SessionValidation folder.
14. In the view content, locate the <form> element and see how ajax is configured by using data
attributes.
For example, the data-ajax-success represents the script to be executed after the ajax
requests successes in this case the name of a JavaScript function is specified. The function is
defined in the scripts section at the bottom of the Edit.cshtml view.
15. Open _EditSessionValidationDetails.cshtml view under Views/SessionValidation folder.
16. In the view content, locate the <form> element and see how ajax is configured by using data
attributes.
Note that the <form> element contains a <select> tag containing ResultatSessionValidation
enum items to specify the result of a validation session.
17. Locate the scripts section at the bottom of the Edit.cshtml view and review the code of the
addSessionValidationDetails JavaScript function. The data parameter represents the
response returned by the AddSessionValidationDetails action in the
SessionValidationController.
18. Locate the //TODO: Add deleteSessionValidationDetails javascript function as
callback for the delete ajax action comment just after it, create a JavaScript function
 named deleteSessionValidationDetails. This function represents the ajax success call back
defined in the delete action in the _SessionValidationDetails.cshtml list.
Note: Review the DeleteSessionValidationDetails action defined in the
SessionValidationController to see different responses returned by the action.
19. In Ansej.Sidjeme.Business project, open SessionValidationBusinessService.cs file.
20. In the SessionValidationBusinessService class locate the comment //TODO: Add business rule
to check if the project is already added to the session. Just after, add a business rule
as described in the comment to ensure the same project is not added more than one to a
validation session.

Task 3: Running the application and testing partial rendering using ajax
1. Build the solution and ensure there are no errors.
2. Run the solution.
3. In the Application main menu, click Sessions.
4. In the Session validation list, edit any session. In the edit view press F12 to show the developer
toolbar; select the network tab.
5. In the Session details section, click “Associer projet” button and ensure a modal popup is shown
and that the content of the modal is set from the response of the XHR request (ajax request),
you can confirm that in the network tab of the developer toolbar.
6. In the modal popup, without filling any field submit the form and note that the jQuery validation
works correctly.
7. Type at least three characters (Ex:20/) in the Project input and ensure that the autocomplete
works correctly.
8. Submit the form and ensure that the selected project was linked correctly to session and that
the list was refreshed partially without refreshing the all page.
9. From the linked projects list, edit the added project, change the result and click save.
10. Confirm the list was refreshed asynchronously.
11. In the Session details section, click “Associer projet” button to link a new project to the
validation session.
12. In the project field select the same project and submit.
13. Make sure that the business message is displayed in the modal and that the modal has not been
closed.
14. In the linked projects list, click the delete icon button, ensure that the confirm message was
displayed as configured in the data-ajax-confirm attribute.
15. In the confirm dialog, click Ok and ensure that the project was deleted and that the list was
refreshed.
16. Close the browser.
Exercise 2: Improve Web App performance using Caching
Scenario
In this exercise, you will add explore different techniques to improve your pages response time
using Asp.Net Core caching options.

Task 1: In memory caching

1. Open Visual Studio 2019 and in the Get Started Window, select Open Project or Solution
o Location: [Root Repository] \SIDJEME Labs\SIDJEME\SIDJEME.sln
2. In the Ansej.Sidjeme.Api project, open the Startup.cs file.
3. In the Startup class locate the comment //TODO: Register Memory Cache Services, just after
the comment register the memory cache services using the AddMemoryCache extension
method.
4. Under the Controllers folder, open ActiviteController.cs file
5. Locate the //TODO: Import Microsoft.Extensions.Caching.Memory namespace comment and
import the asked namespace.
Locate the //TODO: Create a private readonly field named _memoryCache of type
IMemoryCache, just after it declare a private readonly field of type IMemoryCache named
_memoryCahe.
Initialize the field in the constructor by adding a constructor parameter of type IMemoryCache
named memoryCache as described in the //TODO comments.
In the ActiviteController class, review the Activites property implementation and how it uses
the _memoryCache.GetOrCreate method to initialize the cache item with a key named
Ansej.Sidjem.Domain.Activite (typeof(Activite).FullName).
6. Note that the cache item absolute expiration is set to 2 minutes after its creation.
7. See how the cache item is initialized by getting all activities with their default load properties.
Locate the DataTable action and see how it overrides the GenericReferentielApiController
base class behavior by using the _memoryCache rather than the _referentielBusinessService to
get, filter or page results.
Important: notice that in the where predicate uses ToLower() method when comparing strings,
and that because the comparison is between objects in memory not in SQL Server.
8. Build the solution and ensure there no errors.
9. Run the solution.
10. Launch SQL Server profiler tool and create a new Trace to see all queries sent to SQL Server.
11. Return the Application and select Référetiels > Activités from the main menu.
12. In the SQL Server profiler, confirm that a query to get all activities is captured.
13. Return the “Activités” list, try to filter, page or order the results in the datatable and see that
there no SQL queries sent which confirms the use of the Cache.
14. Wait 2 minutes, and try to filter, page or order your datatable results, you will see that another
SQL query is captured and that because the duration of you cache item is set to 2 minutes.
15. Close the browser and stop debugging.
Task 2: Response cache
1. In the Ansej.Sidjeme.Web project, open the Startup.cs file.
2. In the Startup class locate the comment //TODO: Register ResponseCaching services, just
after the comment register the response caching services using the AddResponseCaching
extension method.
3. In the Configure method, locate the comment //TODO: Enable ResponseCaching middleware,
just after the comment enable the asked middleware.
4. Under the Controllers folder, open HomeController.cs file.
5. In the HomeController class, review the Index action implementation, it uses
DashboardViewModel object to render a mini dashboard containing some aggregations on six
entities (Projet, Promoteur, SessionValidation, Activite, Wilaya and Commune).
6. Review each Count aggregation used to generate the view model.
7. Note that each time a user accesses the home page (Index), all aggregations will be re-executed
in data store and returned.
8. For optimizing application performance, you will cache the Index response using the response
caching technique.
9. Locate the //TODO: Add ResponseCache attribute with Duration = 120 seconds comment
above the Index action, just after the comment and above the Index action add a
ResponseCache attribute, and configure the cache duration to 120 seconds (2 minutes).
10. Under the Views/Shared folder, open _SelectLanguagePartial.cshtml view.
11. Locate the /*TODO: Disable default antiforgrey */ comment and disable the default
antiforgrey in the form by setting the asp-antiforgrey property to false in the form element.
Important: Keeping the default behavior of the Default antiforgrey will disable the response
caching feature.
16. Build the solution and ensure there no errors.
17. Run the solution.
18. In the application home page, note how the dashboard display the count of each entity
according to the predicates defined in the Index action implementation.
19. Try to add a session, an activité or a commune, return the Home page before the two minutes
pass and confirm that the count values are not updated, that because the index action was not
executed but the response was returned from cache.
20. In the browser press F12, and select the Network tab, re-execute the step 19 refresh the home
page un confirm that the response was returned from the cache in the network requests
captured.
21. Close the browser and stop debugging.