C#•10mo ago

How to Dynamically add item to List?

I have an app that shows movies, I want to click a link in front of the movie image(plus sign) that will display a dropdown containing the lists the user has created. The user will then select which list he/she wants the movie added to. All without changing views. After adding some movies the user would be able to go to the movie lists view and select any list to check the movies added. I can already create the empty lists, but I have no Idea of where to begin adding the movies. Probably an action would do the Job, but I need some direction.

6 Replies

Angius•10mo ago

theList.Add(theItem) Are we talking an ASP.NET Core app here? Winforms? Avalonia?

Murilo Barbosa•10mo ago

Yes, it is an .NET CORE MVC The list is not necessarily a Type List. It is a View where I want to display the movies like a list.

Angius•10mo ago

If you want it to be updated without refreshing the page, use Javascript And, yeah, a plain controller action that will take the movie ID, the list ID, and add it to the db

[HttpPost]
public async Task<IActionResult> AddMovieToList(int movieId, int listId)
{
    var movieList = new MovieList {
        MovieId = movieId,
        ListId = listId
    };
    _context.MovieLists.Add(movieList);
    await _context.SaveChangesAsync();
}

[HttpPost]
public async Task<IActionResult> AddMovieToList(int movieId, int listId)
{
    var movieList = new MovieList {
        MovieId = movieId,
        ListId = listId
    };
    _context.MovieLists.Add(movieList);
    await _context.SaveChangesAsync();
}

theClickableElement.addEventListener('click', async () => {
    var res = await fetch('/api/movies', {
        method: 'POST',
        body: JSON.stringify({ movieId, listId })
    });
    if (res.ok) {
        // all is well
    } else {
        // some error
    }
});

theClickableElement.addEventListener('click', async () => {
    var res = await fetch('/api/movies', {
        method: 'POST',
        body: JSON.stringify({ movieId, listId })
    });
    if (res.ok) {
        // all is well
    } else {
        // some error
    }
});

Murilo Barbosa•10mo ago

Thanks, my Javascript skills are bad, but I'll try to figure this out. Also, how would I pass the listId argument? a hidden input would work I guess?

Angius•10mo ago

You could use a dataset

@foreach (var movie in Model.Movies)
{
    <button data-movieId="@movie.Id">Click<button>
}

@foreach (var movie in Model.Movies)
{
    <button data-movieId="@movie.Id">Click<button>
}

document.querySelectorAll('button[data-movieId]').forEach(btn => {
    const movieId = btn.dataset.movieId;
    btn.addEventListener('click', async () => ...);
});

document.querySelectorAll('button[data-movieId]').forEach(btn => {
    const movieId = btn.dataset.movieId;
    btn.addEventListener('click', async () => ...);
});

Murilo Barbosa•10mo ago

'/api/movies' is the controller url right? SO, I think the Javascript and the controller method are now working But I'm getting FK violation I'll open another thread for this problem. I think its a different issue. Thank you for the help.

Gaming

Programming

How to Dynamically add item to List?