使用服务器端 Asp-项目填充 SweetAlert2 Html Select 输入项目

Question

我有一个 MVC 核心应用程序。在其中一个视图中，甜蜜警报的 html 部分有两个 select 元素。

我把用户属性放进去。但是当我打开 sweet alert 时，下拉菜单只有一个元素。将 asp-items 设置为 Model.Users 不起作用。它不显示来自控制器查看的列表项。

布局中的样式和脚本：

<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 代码：

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
        });

我正在尝试使用 SweetAlert2 作为 BootStrap 模式的替代品。因为我有很多模态问题，我不想再使用它们了。所以，请帮我实现这个目标。

Answer 1

我找到了解决方案并为遇到此问题的每个人编写了一个简化版本。

在服务器端定义列表元素以便在脚本端使用它们。

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

然后在脚本端：

// 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();
                
            }
});

使用服务器端 Asp-项目填充 SweetAlert2 Html Select 输入项目

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

html

javascript

model-view-controller

jquery

sweetalert2