Blazor Server .net8 support

[baktay]

I tried to install BlazorSortableJS 1.0.8 from Nuget to Blazor App (server) and tried your code and I had an issue with the Context=Item (book in your case). So it did not work. Will it be available for Blazor Server or is it already supported and I am missing something?

I placed in my app.razor file:
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script src="_content/BlazorSortableJS/SortableInterop.js"></script>

I have @using BlazorSortableJS on page (and _Imports.razor file)
So the sample code is from your site:

``
@page "/"
@using BlazorSortableJS


<div>
    <SortableList  OnUpdate="@SortList">
        <SortableItemTemplate Items="books" Context="book">
            <div class="book">
                <p>@book.Title</p>
            </div> 
        </SortableItemTemplate>
    </SortableList>
</div>


<div>
    <SortableList Items="books" OnUpdate="@SortList">
        <SortableItemTemplate>
            @foreach (var book in books)
            {
                <div class="book">
                    <p>@book.Title</p>
                </div>
            }
        </SortableItemTemplate>
    </SortableList>
</div>

@code {


    public class Book
    {
        public string Title { get; set; } = "";
        public string Author { get; set; } = "";
        public int Year { get; set; }
    }

    public List<Book> books = new List<Book>
{
    new Book { Title = "The Very Hungry Caterpillar", Author = "Eric Carle", Year = 1969 },
    new Book { Title = "Where the Wild Things Are", Author = "Maurice Sendak", Year = 1963 },
    new Book { Title = "Goodnight Moon", Author = "Margaret Wise Brown", Year = 1947 },
    new Book { Title = "The Cat in the Hat", Author = "Dr. Seuss", Year = 1957 },
    new Book { Title = "Charlotte's Web", Author = "E.B. White", Year = 1952 },
    new Book { Title = "Harry Potter and the Sorcerer's Stone", Author = "J.K. Rowling", Year = 1997 },
    new Book { Title = "The Lion, the Witch and the Wardrobe", Author = "C.S. Lewis", Year = 1950 },
    new Book { Title = "Matilda", Author = "Roald Dahl", Year = 1988 },
    new Book { Title = "The Giving Tree", Author = "Shel Silverstein", Year = 1964 },
    new Book { Title = "Oh, the Places You'll Go!", Author = "Dr. Seuss", Year = 1990 }
};

    public void SortList((int oldIndex, int newIndex) indices)
    {
        // deconstruct the tuple
        var (oldIndex, newIndex) = indices;

        var items = this.books;
        var itemToMove = items[oldIndex];
        items.RemoveAt(oldIndex);

        if (newIndex < items.Count)
        {
            {
                items.Insert(newIndex, itemToMove);
            }
        }
        else
        {
            {
                items.Add(itemToMove);
            }
        }
    }
}

I get error: Severity Code Description Project File Line Suppression State
Error CS0103 The name 'book' does not exist in the current context

---

Note: I tried sample code in BlazorSortableJS site and that didn't work either. Again had an issue with Context="item":

<div class="row">
    <div class="col-6">
        <h6 class="text-center fw-bold">Sortable</h6>
        <SortableWrapper OnDataChanged="@(() => InvokeAsync(StateHasChanged))">
            <Sortable TItem="string" Items="items" Class="list-group" Options="_options">
                <Template Context="item">
                    <div class="list-group-item">@item</div>
                </Template>
            </Sortable>
        </SortableWrapper>
    </div>
    <div class="col-6">
        <h6 class="text-center fw-bold">Result</h6>
        <pre class="bg-info">
            @System.Text.Json.JsonSerializer.Serialize(items, new JsonSerializerOptions
            {
                WriteIndented = true,
            });
        </pre>
    </div>
</div>

@code {
    object _options = new
    {
        animation = 150,
        ghostClass = "blue-background-class"
    };
    private List<string> items = new List<string>
    {
        "Item 1-1",
        "Item 1-2",
        "Item 1-3",
    };
}

---

Is the issue with blazor server?

[hrvoje-grabusic]

It works with blazor server.

Here is a blazor server version of this repo with save and load JSON example.

https://github.com/hrvoje-grabusic/BlazorSortableServer