none
Ergebnis von jquery sortable in Datenbank speichern RRS feed

  • Frage

  • Hallo Leute,

    ich verwende ASP.NET Core

    Mit jquery sortiere ich die einzelnen Zeilen einer Tabelle

    Das Sortieren funktioniert soweit ohne Probleme.

    Jetzt möchte ich aber diese Sortierung in der Datenbank abspeicher.
    Dazu habe ich in der Datenbank das Feld "Sort" als int definiert.
    Als Primärschlüssel wird das Feld "ID" verwendet

    Habe dazu in der Seite "Details.cshtml" folgenden Code verwendet:

            $('#sortTable tbody').sortable(
                {
                    opacity: 0.7,
                    revert: true,
                    scroll: true,
                    cursor: 'crosshair',
    
                    update: function (event, ui) {
                        var itemIds = "";
                        $("#sortTable").find(".taskSingleInline").each(function () {
                            var itemId = $(this).attr("data-taskid");
                            itemIds = itemIds + itemId + ",";
                        });
    
                        $.ajax({
                            type: 'POST',
                            url: '@Url.Action("ChangeSort", "ProdukteArtikelRelation")',
                            data: { itemIds: itemIds },
                            success: function (data) { },
                            error: function (xhr, status, error) { },
                        });
                        alert(JSON.stringify(itemIds));
    
                    },
    
                    start: function (e, ui) {
                        $("<p />", {
                            id: "info",
                            html: "Country of <B>" + ui.helper.text() + "</b> is Active Currently",
                            css: {
                                clear: "both"
                            }
                        }).appendTo("body");
                    },
    
                    stop: function () {
                        $("#info").remove();
                    }
                });

    In "itemIds" wird die neue Reihenfolge anhand der ID´s gespeichert.
    Diese wird mir auch korrekt mit:

    alert(JSON.stringify(itemIds));

    angezeigt.
    zB: "42,36,8,12,25"

    Jetzt möchte ich dazu passend die Einträge im Feld Sort ändern.
    Dazu habe ich im Controller "ProdukteArtikelRelationController.cs" folgenden Code implementiert.

            [HttpPost]
            [ValidateAntiForgeryToken]
            public async Task<IActionResult> ChangeSort(string itemIds)
    
            {
                int count = 1;
                List<int> itemIdList = new List<int>();
                itemIdList = itemIds.Split(",".ToCharArray(), StringSplitOptions.RemoveEmptyEntries).Select(int.Parse).ToList();
                foreach (var itemId in itemIdList)
                {
                    try
                    {
                        var p = _context.ProdukteArtikelRelation.Where(x => x.Id == itemId).FirstOrDefault();
                        p.Sort = count;
                        _context.Update(p);
                           await _context.SaveChangesAsync();
                    }
                    catch (Exception)
                    {
                        continue;
    
                    }
                    count++;
                }
                return View();
            }

    Wie ihr euch denken könnt funktioniert das Ganze leider nicht.

    Ich habe das vor Ewigkeiten einmal mit ASP Classic realisiert und versuche jetzt die Applikation auf ASP.NET umzuschreiben.
    Meine .NET Kenntnisse sind eher überschaulich und ich stolperer mehr oder weniger durch den Code.

    Ich habe das Beispiel ursprünglich aus https://www.youtube.com/watch?v=23pcCRvysX0 übernommen und soweit angepasst damit ich zumindestens einmal keine Fehlermeldungen bekomme.

    Hat von euch einer eine Idee wo ich da schrauben muss damit das Ganze funktioniert?

    Danke für Eure Hilfe.
    Paul

    Dienstag, 29. Januar 2019 00:38

Antworten

Alle Antworten

  • Hallo Paul,

    versuche es mal so in der Art:

    <button onclick="clickMe()">
        Click me
    </button>
    
    <script>
    
        function clickMe() {
    
            var o = '0, 1, 2, 3';
            
            $.ajax({
                type: 'POST',
                contentType: "application/json; charset=utf-8",
                url: 'Home/ChangeSort',
                dataType: 'json',
                data: JSON.stringify(o)
            });
        }
    
    </script>

    [HttpPost]
    public async Task<IActionResult> ChangeSort([FromBody] string ids)
    {
        var la = 123;
        await Task.Delay(100);
    
        return Ok();
    }


    Gruß Thomas
    13 Millionen Schweine landen jährlich im Müll
    Dev Apps von mir: UWP Segoe MDL2 Assets, UI Strings

    Dienstag, 29. Januar 2019 03:12
  • Hallo Thomas,
    das hat mir für die Fehlersuche weitergeholfen.

    So wie es aussieht wird bei mir "itemIds" nicht übergeben.

    Habe jetzt folgenden Code

    "Details.cshtml"

                        $.ajax({
                            type: 'POST',
                            cache: false,
                            url: '@Url.Action("ChangeSort", "ProdukteArtikelRelation")',
                            contentType: "application/json; charset=utf-8",
                            data: JSON.stringify(itemIds),
                        });




    "ProdukteArtikelRelationController.cs"

            public async Task<IActionResult> ChangeSort(string itemIds)
            {
                int count = 1;
                List<int> itemIdList = new List<int>();
                //itemIds = "1,11,2,4,3,6,9,8,10,5,7,";
                var checkitemIds = itemIds;
                itemIdList = itemIds.Split(",".ToCharArray(), StringSplitOptions.RemoveEmptyEntries).Select(int.Parse).ToList();
                foreach (var itemId in itemIdList)
                    {
                    try
                        {
                        var p = _context.ProdukteArtikelRelation.Where(x => x.Id == itemId).FirstOrDefault();
                        p.Sort = count;
                        _context.Update(p);
                        await _context.SaveChangesAsync();
                        }
                    catch (Exception)
                    {
                        continue;
                    }
                    count++;
                    }
                var message = "itemIds: " +checkitemIds;
                return Ok(message);
            }

    Wenn ich "itemIds" fix im Code implemetiere (oben mit // deaktiviert), funktioniert die Sortierung ohne Probleme.
    In "message" wird mir dann auch diese fixe Zuordnung angezeigt.

    Wenn ich die fixe Zuordnung deaktiviere, bekomme ich eine "Internal Server Error" Fehlermeldung.
    "message" ist dann leer.

    Kann mir jemand verraten wie ich die string Variable "itemIds" richtig übergeben bzw. auslesen kann?


    Danke Paul
    Mittwoch, 30. Januar 2019 00:15
  • Du musst wie in meinem Beispiel [FromBody] vor string itemsIds angeben

    Gruß Thomas
    13 Millionen Schweine landen jährlich im Müll
    Dev Apps von mir: UWP Segoe MDL2 Assets, UI Strings

    • Als Antwort markiert Paul_412 Mittwoch, 30. Januar 2019 01:03
    Mittwoch, 30. Januar 2019 00:17
  • Hallo Thomas,

    Vielen Danke, das war es.

    Kannst du mir eventuell noch verraten ob ich nach der Sortierung die Tabelle automatisch aktualisieren kann?
    Gruß Paul

    Mittwoch, 30. Januar 2019 01:18
  • Welche Tabelle meist Du den, die in der View oder die DB Tabelle?


    Gruß Thomas
    13 Millionen Schweine landen jährlich im Müll
    Dev Apps von mir: UWP Segoe MDL2 Assets, UI Strings

    Mittwoch, 30. Januar 2019 01:25
  • Ich möchte die Ansicht automatisch aktualisieren.
    Also in der View.

    Momentan mache ich das händisch mit dem Button:

    <a class="btn btn-primary" href="@Url.Action("Details","Produkte")">Update</a>

    Wäre nett wenn sich das automatisch nach einer Sortierung aktualisiert.

    Mittwoch, 30. Januar 2019 01:32
  • Ok Du willst also die Seite neu laden. Das geht mit location.reload();

    Das könntest Du nach dem AJAX Aufruf in JavaScript machen


    Gruß Thomas
    13 Millionen Schweine landen jährlich im Müll
    Dev Apps von mir: UWP Segoe MDL2 Assets, UI Strings


    Mittwoch, 30. Januar 2019 01:43
  • Danke
    Mittwoch, 30. Januar 2019 07:02