如何在 Asp.Net MVC5 中使用 Ajax 将数据库更改保存到拖放列表

Posted 2023-05-09

【中文标题】如何在 Asp.Net MVC5 中使用 Ajax 将数据库更改保存到拖放列表

【英文标题】：How To Save Database Changes to Drag and Drop Lists with Ajax in Asp.Net MVC5

【发布时间】：2020-06-04 09:22:29

【问题描述】：

我正在尝试在我的应用程序部分实现 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);
        

最后我相信我的 ajax 应该去的 Dragula 脚本的基本框架，在 .on('drop') 之后。

(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，但我不知道如何实现它。任何帮助将不胜感激！

【参考方案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 请求的按钮单击提交。我敢肯定，这不是最优雅的解决方案，但它既实用又快速。