1-Description
I have implemented a select2 filter for a dropdown list in my project.
(Tools used: Bootstrap 5 & .Net 7.0 Core)
When I choose a client name and click submit, an error occurs stating that the 'clientId' is null (indicating no client id has been selected).
2-Inquiry
What could be the issue with this code?
3-Full Code
<div class="col-md-12">
<!-- Modal -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document" style="max-width:500px;position:relative;">
<div class="modal-content">
<form id="Create" method="post" asp-page-handler="Create">
<div class="modal-body">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group p-0">
<label asp-for="Presentation.PreDate" class="border-0 m-0" style="max-height:20px;font-size:70%;">Date</label>
<input asp-for="Presentation.PreDate" class="form-control font-weight-bold fw-bold text-primary" style="font-size:80%;"
id="predate" type="text" readonly />
<span asp-validation-for="Presentation.PreDate" class="text-danger"></span>
</div>
<div class="form-group p-0">
<label asp-for="Presentation.NdeId" class="border-0 m-0" style="max-height:20px;font-size:70%;">Client</label>
<br>
<select asp-for="Presentation.KliId" class="form-control text-primary font-weight-bold fw-bold form-select client" name="client" asp-items="ViewBag.KliId"
data-placeholder="--- Client ---" id="client" style="font-size:80%;">
</select>
</div>
<partial name="_BtnSavePopupPartial" />
</div>
</div>
</div>
</div>
</div>
</div>
Javascript Section
<script type="text/javascript">
$('.client').select2({
width: '100%',
dropdownParent: $('#addModal')
</script>