Topic: Select class for multiselect does not bind correctly with Asp.Net controllers
Expected behavior:I Expect the multiselect to bind roles to my list of strings in my DTO object
Actual behavior:The inclusion of the "select" class results in the form posting the DTO with the Roles property as null.
Note: Without the select class, this list is properly filled out, so I know the select class is monkeying around somehow. I have tried creating each option in the select list manually, I have tried normal html without the razor-tag-helpers. All result in the same.
Developer tools inspection of the html in chrome also displays the correct parameters which should bind correctly, with and without the class. The inclusion of the aria-wrapper stuff seems to bug out the form binding. Or maybe not.
--Select Tag--
<select class="select" id="@selectId" name="Roles" multiple
asp-items="@(new MultiSelectList(roleManager.Roles?.ToList(), "Name","Name",selectedRoles))">
</select>
--Controller Post--
[HttpPost()]
[Route("update")]
public async Task<IActionResult> Update(UpdateUserDTO userDTO)
{
string json = JsonSerializer.Serialize(userDTO);
--Model--
public class UpdateUserDTO
{
[Required]
[DataType(DataType.EmailAddress)]
public string OldEmail { get; set; }
[Required]
[DataType(DataType.EmailAddress)]
public string NewEmail { get; set; }
public List<string> Roles { get; set; }
}
Furthermore, inspecting with javascript, with and without the inclusion of the select class, returns the correctly selected options:
document.getElementById("@selectId").addEventListener("change", () => {
let x = document.getElementById("@selectId");
var txt = "";
var val = "";
for (var i = 0; i < x.length; i++) {
txt += x[i].text + ",";
val += x[i].value + ",";
}
alert(txt);
});
We're not ASP .Net experts, but it looks like the role binding is going to the native select option. Our select is an overlay thanks to which we could change the appearance of the dropdown. Therefore, choosing an option from our select is not the same as choosing an option in the native select. This is not done by triggering click in the native select option. After selecting an option in our selector, we set the value of the native select.
I suppose that's the problem. Probably ASP will bind roles only after clicking on native select options. But as I mentioned, we don't have much experience with ASP .NET so I might be wrong.
Unfortunately, we do not currently have a workaround for this issue. Would any solution be to identify which option was selected and then you could make the necessary changes by adding some code?
waiiki commented 2 years ago
I ended up grabbing the selected options and concatenating them into a string and sending that to a hidden input field. Super janky workaround, but your multiselect looks amazing so I'm willing to deal with it.
That being said, as someone who paid a few hundred dollars for your pro package, it would mean a lot if your team would look into making your components compatible with ASP .Net (.net 6, ideally). I'd like to be able to recommend your pro framework to friends and coworkers who also use .Net! .Net is a quickly growing community with all the work Microsoft has been pumping into it lately, and I think ensuring compatibility with MVC would go a long way to securing more customers, but that's just my two cents.
Most of your stuff does work as intended, so I do appreciate the hard work put into the framework.
Grzegorz Bujański staff commented 2 years ago
You are right, but to ensure that our library is 100% compatible with each framework, we would have to create a dedicated version for each framework. As we did with Angular, React and Vue.
At the moment, we focus on frontend frameworks and for backend frameworks we are trying to create our library so that it can be used in any backend framework. But it's hard to create a solution that will be able to use 100% of the capabilities of each framework and we are aware that not everything will work as it should and it will require some workaround.
Anyway, I will add a task to check your case and we will check if we can improve something in this case
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Standard
- MDB Version: MDB5 6.0.0
- Device: PC
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No