如何在 Asp.Net MVC5 中使用 Ajax 將數據庫更改保存到拖放列表

Question

我正在嘗試對我的應用程序的一部分實施 Dragula 拖放功能，該功能允許管理員將用戶分配給某些角色。 .cshtml 已實現並正確顯示，但我無法弄清楚如何編寫 Ajax 調用，以便我可以將參數傳遞給控制器​​中的方法，該方法使用輔助類來添加和刪除。 是否可以將參數傳遞到從放置位置派生的 ajax $.post(url) 中？ 下面應該包括所有相關代碼。 我也明白 Viewbags 不是做到這一點的最佳方式，但如果我可以讓它運行，我將編寫一個視圖模型並通過這種方式傳遞數據。

.cshtml 代碼

其中有 4 個，一個用於 3 個可分配的角色，一個用於未分配給任何角色的角色。 他們目前正在正確填充。

<div class="col-3 h-100">
    <div class="bg-secondary p-4">
        <h6 class="card-title">Developers</h6>
        <div id="dragula-developers" class="py-2">
            @foreach (var user in ViewBag.Developers)
            {
                <div class="card rounded mb-2">
                    <div class="card-body p-3">
                        <div class="media">
                            <div class="media-body">
                                <h6 class="mb-1">@user.FirstName @user.LastName</h6>
                                <p class="mb-0 text-muted"> @user.Email </p>
                            </div>
                        </div>
                    </div>
                </div>
            }

控制器方法

public JsonResult ManageRoles(string id, string role)
        {
            var message = "User Not Assigned To Role";
            if (id != null)
            {
                userRolesHelper.RemoveUserFromRole(id, role);
                    
                if (!string.IsNullOrEmpty(role))
                {
                    userRolesHelper.AddUserToRole(id, role);
                    message = "User Assigned To Role Successfully!";
                }
            }
            return Json(message);
        }

最后，我相信在 .on('drop') 之后，我的 ajax 應該去的地方是我的 Dragula 腳本的骨架。

(function ($) {
            'use strict';
            dragula([document.getElementById("dragula-noRole"), document.getElementById("dragula-submitters"),
            document.getElementById("dragula-developers"), document.getElementById("dragula-managers")])
                .on('drop', function (el) {
                          console.log($(el));
                })
        })(jQuery);

有 4 個盒子，理想情況下，當用戶的卡片被放入 Dragula 容器中時，他們的 id 和與 Dragula 相關聯的角色將被發送到帖子中，他們的角色將被更改，返回一條消息。 這不是一個會大量使用的功能，所以我不應該需要 websockets，但我不知道如何實現它。 任何幫助將不勝感激！

Answer 1

在比我願意承認的時間長得多之后，我終於弄明白了。 以防萬一它在未來對其他人有幫助，我不得不更改我的控制器以接受一個數組。 在抽象之前，它最終看起來像這樣。

[HttpPost]
    public JsonResult ReassignToDev(Array userIds)
    {
        var message = "";
        if (userIds == null)
        {
            message = "No Users to Change Roles Of";
        }

        if (userIds != null)
        {
            foreach (var user in userIds)
            { 
                userRolesHelper.RemoveAllRoles(user.ToString());
                userRolesHelper.AddUserToRole(user.ToString(), "Developer");
                message = "Role Change Successful";
            }
        }

        return Json(message);
    }

我的 ajax 調用最終看起來像這樣：

 var developerIds = new Array();
        $('.developer .hidden').each(function (i) {
            developerIds.push($(this).text());
        })
        console.log(developerIds);
        $.ajax({
            type: "POST",
            url: '@Url.Action("ReassignToDev", "Admin")',
            dataType: 'JSON',
            data: { userIds: developerIds },

            success: function (response) {
                alert(message);
            },
            error: function (response) {
                alert(message);
            }
        });

4 種不同的方法和 4 種不同的調用，通過觸發 ajax 請求的按鈕單擊提交。 我敢肯定，這不是最優雅的解決方案，但它功能強大且速度快。