I’m stuck on a problem and I was wondering if you could help me.
I have an ASP .NET MVC system, and I have a widget screen with the function of editing a widget.
The call to edit a widget is in a PartialView, I can bring up all the fields filled in by the user, but in my select id=garagens-sel which I use select2, I have an array with 3 garages, but I can’t show it these 3 garages in my select2 box selected. I’ve tried several things but I still can’t show these garages on the screen. But if I look at the inspect element in the browser, I can see the 3 garages with their ids in the value and with the selected property applied.
My EditarCard.cshtml:
<div id="selecao-garagens" style="flex-direction: column; gap: 8px">
<label class="custom-label">Garagens (para considerar todas as garagens, não selecione nenhum item)</label>
<select id="garagens-sel" name="garagens-sel" class="select2 form-control select2-multiple" multiple >
@foreach (var item in ViewBag.Garagens)
{
List<Guid> garagensSelecionadas = Model.GaragensSelecionadas != null ? ((List<Guid>)Model.GaragensSelecionadas) : new List<Guid>();
<option value="@item.ID" @(garagensSelecionadas.Contains(item.ID) ? "selected" : "")>@item.Nome</option>
}
</select>
<label class="custom-label" style="display: flex; gap: 4px; align-items: center;">
<input id="considerar-ativos" type="checkbox" style="width: 20px; height: 20px;" @(Model?.SomenteAtivos == true ? "checked" : "") />
Considerar somente ativos
</label>
</div>My JS:
$(document).ready(function () {
...
const widget = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model));
console.log(widget);
$('#garagens-sel').select2({
multiple: true,
closeOnSelect: false,
placeholder: 'Selecione',
});
$('#eventos-sel').select2({
multiple: true,
closeOnSelect: false,
placeholder: 'Selecione',
});
if (widget) {
...
$('#garagens-sel').val(widget.GaragensSelecionadas).trigger('change');
$('#eventos-sel').val(widget.EventosSelecionados).trigger('change');
$('#considerar-ativos').prop('checked', widget.SomenteAtivos);
const iconeClasse = widget.Icone.split(' ').filter(cls => cls !== 'float-right').join(' ');
$('.selecao-icone i').each(function() {
const iconClasses = $(this).attr('class').split(' ').filter(cls => cls !== 'float-right').join(' ');
if (iconClasses === iconeClasse) {
$(this).parent().addClass('selecionado');
}
});
}
.....
}This is the PartialView call that is on my other html page:
Home.cshtml:
<aside id="sidebar_novo_widget" style="padding: 32px;">
</aside>
$('.edit-card').on('click', function () {
var widgetId = $(this).data('id');
defaultSidebar.hide();
createWidgetSidebar.show();
$('#sidebar_novo_widget').empty();
$('#sidebar_novo_widget').append(`
<div style="display: flex; align-items: center; height: 100%;">
<img id="loading" src="/images/Spinner-1s-60px.gif" class="transparent" height="60" width="60" style="margin:auto" />
</div>
`);
$.ajax({
url: `/Dashboard/EditarCardView/${widgetId}`,
method: "GET",
success: function (response) {
$('#sidebar_novo_widget').empty();
$('#sidebar_novo_widget').append(response);
}
});
});If you need any further information please let me know. Thank you very much!