Как сохранить изменения в базе данных для перетаскивания списков с Ajax в Asp. Net MVC5 - PullRequest
Новая
       26

Как сохранить изменения в базе данных для перетаскивания списков с Ajax в Asp. Net MVC5

1 голос
/ 20 февраля 2020

Я пытаюсь реализовать функцию Dragula Drag and Drop в той части моего приложения, которая позволяет администратору назначать пользователей для определенных ролей. .Cs html реализован и отображается правильно, но мне не удается понять, как написать вызов Ajax, чтобы я мог передать параметры своему методу в контроллере, который использует вспомогательный класс для добавления и удаления. Можно ли передать параметры в ajax $ .post (url), который получен из места, где он был удален? Ниже должен быть указан соответствующий код. Я также понимаю, что Viewbags - не лучший способ сделать это, но если я смогу заставить его работать, я напишу модель представления и вместо этого передам данные.

.cs html Код

их 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 должны go, я считаю, после .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 поля, и в идеале, когда пользовательская карта сбрасывается в контейнер драгула, ее идентификатор и роль, связанная с драгулой, должны быть отправлены на почту. и их роль будет изменена, возвращая сообщение. Это не та функция, которая будет активно использоваться, поэтому мне не нужны веб-сокеты, но я не могу понять, как ее реализовать. Любая помощь будет принята с благодарностью!

1 Ответ

0 голосов
/ 22 февраля 2020

Пройдя гораздо дольше, чем мне хотелось бы признать, я наконец-то понял это. На всякий случай, если это поможет кому-то еще в будущем, мне пришлось поменять контроллер, чтобы он принимал массив. В конечном итоге это выглядело так до Abstraction. 

[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. Я уверен, что это не самое элегантное решение, но оно функционально и быстро.

...