Model binding dynamic collections. III

Sorting existing entries

The first operation that we are supporting is sorting a lost of existing entities.

The experience is as follows:

  1. a list of things is displayed in a table
  2. each thing has a handle that allows dragging and dropping it I the right position
  3. When the list looks as it should, the user can:
    • Accept the changes and persist the new order of things
    • Discard the changes and revert the order to the beginning of the operation

The Model

We want to sort things so it just makes sense to have a SortableThing model that contains the client sorting concern (IClientSortable) . That model will be part of the SortViewModel that will be sent to the view for display.

The Views

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

In order to make the elements in the table sortable, we use jQuery UI’s .sortable() function.

Pretty standard jQuery code. “Magic” happens in the function called when sorting stops: .reorder():

That function find the hidden field that contains the ClientOrder for each row of the table, and sets its value to the client side index of the DOM item, thus allowing posting it back to the server.

The Controller

The controller has two methods: the one that displays the things to be sorted and is not really interesting because its resemblance to the one in the previous post; and the one that gets the posted back information:

Forgetting about the save/discard trick to detect which submit button got pressed, the controller “simply” maps whatever the use has in its screen (the posted view model) to something that can be saved and then refreshes the view with the persisted information.
Just as the interesting client-side sorting happened in the .reorder() function, the interesting server-side happens in the SortableThing.ToThings():

Where the .Sort() extension method is used for ordering the results according to their ClientOrder

Can we sort?

Yes, we can!

All code for sorting can he found here.

Categories: Udvikling

Tagged as: , ,


  1. Pretty nice post. I just stumbled upon your weblog and wanted
    to say that I’ve truly enjoyed surfing around your blog posts.
    In any case I’ll be subscribing to your rss feed and I hope you write again soon!

  2. I’ve been surfing online more than 4 hours today, yet I never
    found any interesting article like yours.
    It’s pretty worth enough for me. In my opinion, if all site owners
    and bloggers made good content as you did,
    the internet will be a lot more useful than ever

  3. Nice post. I learn something new and challenging on sites I stumbleupon everyday.
    It’s always exciting to read through articles from other writers and use
    something from their web sites.

  4. This gadget is easy to clean up and use, and you will save all kinds of money
    in the long run. Consider frying in peanut oil, canola oil or other
    oils that are low in the bad fat. These are the essential piece
    of kit to help you quickly mix dough, cream and cake ingredients, and they are
    available with a variety of speeds and attachments to help
    you get the job done.

  5. Even frequent blow-drying at extreme heat or brushing obsessively can cause your hair to become extremely fragile causing it to break and fall out.
    main light based permanent hair removal technique
    for men. light of one wavelength, not of an entire spectrum like a light

  6. Hi! Do you use Twitter? I’d like to follow you if that would be ok.
    I’m definitely enjoying your blog and look forward to new posts.

  7. I love what you guys are usually up too. This type of clever work and reporting!
    Keep up the awesome works guys I’ve added you guys to my personal blogroll.

  8. We are a gaggle of volunteers and opening a brand new scheme in our community.
    Your web site offered us with helpful info to work on. You have done an impressive
    activity and our entire group can be grateful to you.

  9. Do you have a spam issue on this website; I also am a blogger,
    and I was curious about your situation; we have created some nice procedures and we are looking to swap strategies with others, please shoot me an e-mail if

  10. Hey there! I know this is kinda off topic however , I’d figured I’d ask.
    Would you be interested in exchanging links or maybe guest authoring a blog post or vice-versa?
    My site goes over a lot of the same subjects as yours and I
    think we could greatly benefit from each other.
    If you might be interested feel free to shoot me an email.
    I look forward to hearing from you! Terrific blog by the

  11. The gun safe dehumidifier is among the most essential equipment for a gun secure, weapons can corrode and devalue if a gun safe dehumidifier
    is not put in. Protect your guns, ammo and different valuables in your
    secure from the damaging effects of moisture with the Eva-Dry Dehumidifier
    from Liberty Protected. You get a superb secure (from Liberty) and a
    really traditional and historic identify brand (from Remington).

  12. Managing Microsoft dynamics sure step implementation offers a lot of expertise that
    offers your career on stronger basis. enjoy. Open the folder called:
    HKEY_CURRENT_USER Software Microsoft Internet Explorer Menu – Ext – In the Menu –
    Ext folder, there will be a file – Default.

  13. Very good blog! Do you have any tips and hints for aspiring writers?
    I’m hopin to start my own blog soon but I’m a little losdt
    on everything. Would you recommend starting with a free plstform
    like WordPress or go for a paid option? There are sso
    many options out there that I’m totally overwhelmed ..
    Any tips? Apprerciate it!

Skriv et svar