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

[GSGBen]

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

[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]

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

[GSGBen]

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

[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.

[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.

[mguinness]

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