Skip to content
Advertisement

When one form is updated (using Ajax) reloading the forms make them have the same values as the previously updated one

I’m trying to make a simple Todo app to learn asp net core mvc.

I did the CRUD to manage the todos and it worked fine. For the next step i wanted to try adding Ajax to it (avoiding to reload the entire page), delete worked fine, create too, but when i want to edit one todo (which is basically a form) the response of the Ajax request sets all the inputs of all the todos at the same value.

If I update “Buy chocolat” by “Buy chocolate” as the title of one todo, all other todos will have a title “Buy chocolate”.

If I refresh the page (or just the section containing todos) everything goes back to normal, which means the database updated just the todo I wanted to.

It’s really weird and it probably comes from the fact that the inputs have the same name value (todo 1 title => todo.Title, todo 2 title => todo.Title, etc…) even though it works fine for all the rest.

Here’s the page with the container of todos :

JavaScript

Here’s the foreach that displays all todos which also is the partial view “_TodoList” :

JavaScript

The beginning of the controller method :

JavaScript

The GetTodosOfConnectedUser method (which return an Enumerable object of Todos that belongs to the user currently connected) :

JavaScript

And the JS for the Ajax request :

JavaScript

Thank you for your time

Advertisement

Answer

So, the problem is weird. Like, really weird.

I have followed what’s happening step-by-step and everything is going smoothly and then… All the forms get the same inputs/textareas for no apparent reasons.

I believe it comes from the fact that I create one form for each todo, which is a really bad practice, probably never meant to be done in the first place. If you ever encounter this problem, just change the way you do it.

User contributions licensed under: CC BY-SA
9 People found this is helpful
Advertisement