MVC4 JQuery sortable nowa kolejność

Za pomocą https://jqueryui.com/sortable/ chciałbym zmienić kolejność mojej listy w bazie danych. Nie mogę sobie poradzić gdy model wraca z widoku (HttpPost) - zawsze jest null'em. Jest to dla mnie logiczne, ponieważ model nie może być listą (ul li). Jak zatem mogę przypisać mojej liście nowy porządek? Jestem słaby w JQuery może dlatego nie wiem jak to napisać. Nie musi być AJAX'owo.

MVC4 JQuery sortable nowa kolejność

Nie ma czegoś takiego jak kolejność w bazie danych. Ale zawsze możesz wybrać swoje rekordy w posortowany sposób, zrobić z nich ViewModele i wysłać do widoku.

Wytłumaczę bardziej szczegółowo o co mi chodzi. W mojej tabeli jest kolumna kolejność. Zwracając listę elementów tabeli do widoku robię orderby. Mój problem polega na tym, że nie mogę uzyskać tego modelu po kliknięciu submit.

Nie wiem, czy dobrze rozumiem.

Czy chcesz osiągnąć coś takiego:

1. wczytujesz jakieś rekordy z bazy;
2. wyświetlasz je na stronie za pomocą tej kontrolki: https://jqueryui.com/sortable/ ;
3. zmieniasz ich kolejność na stronie;
4. klikasz przycisk submit;
5. chcesz zapisać zmienioną kolejność do bazy

Jeśli tak, to pokaż kod widoku i kontrolera, który odpowiada za obsługę zapisu.

W międzyczasie udało mi się rozwiązać problem. Wklejam działający kod. Mam tylko jedno pytanie, dlaczego gdy nie dodam: "event.preventDefault();" w skrypcie, zapytania są wysyłane podwójnie?

Widok:

@model IEnumerable<sortable.Models.Tab>

@{
    ViewBag.Title = "Sort";
}

<h2>Sort</h2>

<div>
    @using (Html.BeginForm("Sort", "Home", FormMethod.Post))
    {
        <ul id="sortable">
            @foreach (var item in Model)
            {
                <li id="@item.War">
                    @item.War
                </li>
            }
        </ul>

        <input type="submit" value="Save" id="submit-list" />
    }
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

Skrypt:

    <script type="text/javascript">
        $(document).ready(function () {
            $("#sortable").sortable({ axis: "y" });
        });

        $(function () {
            $("#submit-list").click(function (event) {
                event.preventDefault();
                $.ajax({
                    url: '/Home/Sort/',
                    data: { items: $("#sortable").sortable('toArray') },
                    type: 'post',
                    traditional: true
                });
            });

        });
</script>

Kontroler Get + Post:

public ActionResult Sort()
        {
            return View(db.Tab.OrderBy(o => o.Kol).ToList());
        }

        [HttpPost]
        public ActionResult Sort(List<string> items)
        {
            if (ModelState.IsValid)
            {
                int kol = 1;
                foreach (var item in items)
                {
                    Tab tabItem = db.Tab.Where(w => w.War == item).FirstOrDefault();
                    tabItem.Kol = kol;
                    kol++;
                    db.SaveChanges();
                }
            }

            return JavaScript("location.reload(true)");
        }

Bo jeśli nie wywołasz preventDefault, nastąpi standardowy submit forma. A Ty chcesz go przecież zastąpić swoim wywołaniem ajaxowym. Swoją drogą, przy takim podejściu chyba w ogóle nie potrzebujesz tego: @using (Html.BeginForm("Sort", "Home", FormMethod.Post)).

Stronę serwerową masz zrobioną chyba nieoptymalnie, w pętli pobierasz dane, więc zapytań do bazy pójdzie tyle, ile masz elementów w liście items, a poza tym zapisujesz zmiany w każdym przebiegu pętli. To nie ma sensu, lepiej pobrać dane przed pętlą, w pętli je przetworzyć, a SaveChanges zawołać po pętli.

Po usunięciu @using (Html.BeginForm("Sort", "Home", FormMethod.Post)) można też usunąć event.preventDefault();.

Dziękuje za uwagę dotyczącą zapisywania zmian w bazie. Oczywiście masz rację. Dziękuję za pomoc!