bootstrap-duallistbox | Bootstrap Dual Listbox | Frontend Framework library

In my ASP.NET Core (.NET5) project, I use Bootstrap Duallistbox (bootstrap4-duallistbox@4.0.2). In the Razor page, I have a model that include Departments field as a List and in the page, I wrote the following code

I am using Bootstrap Dual Listbox plugin. Functionality works perfectly but I would like to have the selection buttons to be in the middle of the two boxes.

This is how it is now:

This is how I want it to be:

I'm not finding any properties within the plugin that allows me to do this. What can I do to modify the UI to make it look like in the picture above?

Jfiddle: https://jsfiddle.net/264dLepx/2/

HTML:

I'm working on an ASP.NET Core 2.2 MVC app and am trying to implement Bootstrap Dual Listbox plugin for role selection. I have _UserEditorPartial.cshtml view that can be used to assign roles to a user (the listbox on the right would contain roles assigned):

(The partial has more editable fields, but I think those are irrelevant)

Now, the partial contains data associated with the user I had selected on the parent page. When I select the user, I just pass UserID to ViewUserEditorPartial and query the database to retrieve the whole list of roles available, marking the IsAssigned property to true if the user belongs to the role. So now, I have a list of roles and I know which role belongs to the user.

What I'm struggling with is figuring out how to make sure that the roles belonging to the user end up in in the listbox on the right. If the user belongs to Role2 and Role4, I want my view to be generated like this:

I've found this solution but it's not obvious to me how the two listboxes are correctly populated. I'm thinking after loading the partial I could probably do something with JavaScript, where I separately retrieve the List with AJAX and, depending on the value of IsAssigned property for each role, generate the tag in the correct listbox. But I'm wondering is there a better approach?

Also, I'll implement the ability to create users and assign them roles using this solution that I found.

Models:

I am using ASP.NET core 2.1 for my web app. I have multiple lists in one of the views, each has thousands of items to be shown to the user and I am using Bootstrap Dual List Box to display the lists (http://www.virtuosoft.eu/code/bootstrap-duallistbox/). Once the user hits submit, I write the selected items to the database. My questions is: if user goes back to the same view to edit his selections, how can I populate the previously selected items (retrieved from the database) in the right box maintaining the same functionality of the dual list box

I am building a web app using .NET core 2.1. In one of the views there are multiple select lists, each contains thousands of items for the user to choose from so I decided to use bootstrap dual list (https://www.virtuosoft.eu/code/bootstrap-duallistbox/). I have 2 issues with this setup: 1- When I hit the submit button, the model coming to the post action method does not contain the items selected by the user in the dual lists (The items in the right hand side of the list) 2- I need to save the items selected by the user so he can have the same list each time he logs in the app (The original not selected list is populated from the database with all the items shown regardless to the user selections from last time he used the app) Here is my code:

ViewModel.cs: