Populate SweetAlert2 Html Select Input Items With Server Side Asp-Items

Question

I have an MVC Core application. In one of the views there are two select elements in the sweet alert's html part.

I put Users attribute into them. But when I open sweet alert, dropdown has just one element. Setting asp-items to Model.Users does not work. It does not show the List items which comes from controller to view.

Styles and scripts in the layout:

<link href="~/Content/assets/global/plugins/bootstrap-sweetalert2/sweetalert2.min.css" rel="stylesheet" />
<script src="~/Content/assets/global/plugins/bootstrap-sweetalert2/sweetalert2.all.min.js"></script>
<script src="~/Content/assets/global/plugins/bootstrap-sweetalert2/promise.min.js"></script>

SweetAlert2 code:

Swal.fire({
            title: 'Update Confirm Replacement',
            html:
                '<hr />' +
                '<h4 style="font-weight:bold;">Valid Date Format: gg.AA.yyyy SS.dd.ss</h4>' +
                '<select class="swal2-input edited" id="drpUserInput" asp-items="@Model.Users"><option disabled value="' + userId + '" selected>' + userName + '</option></select>' +
                '<select class="swal2-input edited" id="drpReplacedUserInput" asp-items="@Model.Users"><option disabled value="' + replacedUserId + '" selected>' + replacedUserName + '</option></select>' +
                '<input type=\'text\' class="swal2-input edited datepicker" id="startDateInput" value="' + startDate + '" required>' +
                '<input type=\'text\' class="swal2-input edited datepicker" id="endDateInput" value="' + endDate + '" required>',
            showCancelButton: true,
            cancelButtonText: "Cancel",
            confirmButtonText: '<i class="fa fa-thumbs-up"></i> Save Changes',
            allowOutsideClick: false,
            closeOnClickOutside: false,
            closeOnConfirm: true
        });

I'm trying to use SweetAlert2 as an alternative for BootStrap Modal. Because I had lots of problems with modals and I don't want to use them again. So, please help me to achieve this.

Answer 1

I found the solution and writing a simplified version for everybody who faces this problem.

In server side define list elements in order to use them in script side.

@{
    var usersTextArray = Model.Users.Select(s => s.Text).ToList();
    var usersValueArray = Model.Users.Select(s => s.Value).ToList();
}

Then in script side:

// Get server side variables
var usersTextArray = []; // it will contain user names
var usersValueArray = []; // it will contain user Ids

@foreach (var text in usersTextArray)
{
    @:usersTextArray.push("@text");
}

@foreach (var value in usersValueArray)
{
    @:usersValueArray.push("@value");
}

// Create string for select options
var options = "";

for (let i = 0; i < usersValueArray.length; ++i) {

    var optionTag = "<option value=\"" + usersValueArray[i] + "\">" + usersTextArray[i] + "</option>";
    options = options.concat(optionTag);
}

Swal.fire({
    title: 'Select a user:',
    html: '<select class="swal2-input edited" id="drpUserInput">' + options + '</select>'
    showCancelButton: true,
    cancelButtonText: "Cancel",
    confirmButtonText: '<i class="fa fa-thumbs-up"></i> Save Changes',
    allowOutsideClick: false,
    closeOnClickOutside: false,
    closeOnConfirm: true,
    preConfirm: () => {

                // Get selected value from dropdown
                var drpUserIdInput = $('#drpUserInput').val();
                
            }
});