Data table modal buttons not working integrated into an in asp.net core 6 project

[GSGBen]

This is strange, I swear I had this working last week and now it's not. I've added the project to a new solution created from a basic Asp.net core 6 Razor Pages web template. I've made all the required changes to get /IdentityManager/Home/Users working and it successfully shows any existing users in the database. However pressing any of the New, Edit, Delete, Password buttons doesn't show a modal. Same with the roles. Nothing happens.

There are no errors in the browser console, and from looking through the code popping up the modal shouldn't trigger any API calls - that should only be on submit (also nothing in Sources).

Any pointers on where I should look to troubleshoot this?

[mguinness]

It might be related to Bootstrap version, the new web template is probably using Bootstrap 5 versus Bootstrap 4 in this project.

Update: It looks like the attributes data-toggle & data-target need to be changed to data-bs-toggle & data-bs-target.

[GSGBen]

Still no luck after that unfortunately. Testing further it seems that $('#userModal').modal({ backdrop: 'static' }); works to show the modal in asp .net core 5 (Bootstrap 4) but doesn't work in asp.net core 6 (bootstrap 5).

[GSGBen]

Looks like I can get it to show with

var userModal = new bootstrap.Modal(document.getElementById('userModal'));
userModal.toggle();

The submit button works to submit, but neither it or the X button close the modal.

[mguinness]

Yeah, looks like you need data-bs-dismiss instead of data-dismiss, see Migrating to v5 for required changes.

[GSGBen]

Sweet, thanks. That got the close working. I might put all the changes into a pull request later but not sure how you want to handle bootstrap 4/5 compatibility for older projects. For any other users coming across this, the fixes so far are:

• Find+replace the following in all code:

find	replace
data-toggle	data-bs-toggle
data-target	data-bs-target
data-dismiss	data-bs-dismiss

• At the bottom of Users.cshtml and Roles.cshtml are two large inline scripts that define some table actions. At the top of that script block in Users.cshtml add

var userModal = new bootstrap.Modal(document.getElementById('userModal'));
var editModal = new bootstrap.Modal(document.getElementById('editModal'));
var pwdModal = new bootstrap.Modal(document.getElementById('pwdModal'));

• Search down for references to .modal(). Replace them with either .show() or .hide() on the objects you just created above. E.g. userModal.show(); in the New button
• Repeat in Roles.cshtml for the two modal types there

The only remaining issue seems to be that claims are showing as undefined in the edit dialogue (e.g. the initial Name claim), but show fine in the table.

[GSGBen]

And the fix for that is changing value.Key to value.key and value.Value to value.value in Users.cshtml.

[mguinness]

Thanks for outlining these changes, I've linked to this issue in README.

[GSGBen]

Someone asked to see the changes fully apply so I've extracted out an example template here: https://github.com/GSGBen/IdentityManagerUI-NetCore6-Template.

[t1fra]

Just in case somebody prefers this one over your new Blazor Project. The Undefined issue happens as well on Role Claims. Same solution as for User Claims.

Changing value.Key to value.key and value.Value to value.value in Roles.cshtml.