Model binding dynamic collections. IV

Deleting Existing Entries

The second supported operation is deleting a bunch of existing entries.

The experience is as follows:

  1. a list of things is displayed in the table
  2. each thing has a trash button that allows deleting the thing from the list
  3. When the list looks as it should, the user can:
    • Accept the changes and persist the trimmed list of things
    • Discard the changes and replace the elements as of the beginning of the operation

The model

As things are to be deleted, there is a DeletableThing model with the client deletion concern (IClientDeletable). the model is part of the DeleteViewModel that will be sent to the view for display.

The views

The view displays a list of deletable things as a table using a template inside a form:

In order to turn the elements of the table deletable, we use an event handler for each of the trash cans that will eventually hide the whole row and “mark” it as deleted.

Remember that I mentioned that the default model binder was not very happy with “holes” in our collection? Well, that is the reason that we have to mark as deleted in the client and not remove the row at all, otherwise we would be getting back in the server the elements in the collection until the first hole in the naming convention is found.

The controller

The method that gets the list of things posted by the client once they have been deleted is pretty similar to the one we saw for SortController:

Following the same pattern as when sorting, the interesting stuff happens when mapping the information from the post to the entities:

Where the .Delete() extension method is used to filter out those entities deleted in the client.

Can we delete?

Torch them!

All code for deletions can be accessed here.

Kategorier: Udvikling

Tagged as: , ,

Skriv et svar

Udfyld dine oplysninger nedenfor eller klik på et ikon for at logge ind:

WordPress.com Logo

Du kommenterer med din WordPress.com konto. Log Out / Skift )

Twitter picture

Du kommenterer med din Twitter konto. Log Out / Skift )

Facebook photo

Du kommenterer med din Facebook konto. Log Out / Skift )

Google+ photo

Du kommenterer med din Google+ konto. Log Out / Skift )

Connecting to %s