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
Angius12mo ago
theList.Add(theItem) Are we talking an ASP.NET Core app here? Winforms? Avalonia?
Murilo Barbosa
Murilo BarbosaOP12mo 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
Angius12mo 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
Murilo BarbosaOP12mo 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
Angius12mo 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
Murilo BarbosaOP12mo 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.
Want results from more Discord servers?
Add your server