title: Saving a reordered List item from an MVC View Model
body: <p>I have a view model which binds to a 'TreasureHuntDetails' object, which contains a list of clues. Here's part of the data model for it. </p>
  
  <pre><code>    public TreasureHuntDetails()
      {
          Clues = new List&lt;Clue&gt;();
      }
  
      [Key]
      public int TreasureHuntId { get; set; }
  
      public List&lt;Clue&gt; Clues { get; set; }
  </code></pre>
  
  <p>On the page, I have a table. A foreach loop iterates through the list of clues to add them to the table, e.g. </p>
  
  <pre><code>@for (int i = 0; i &lt; Model.Clues.Count; i++)
  </code></pre>
  
  <p>The table elements inside the for loop are quite large, but here's an example of one of the table element columns:</p>
  
  <pre><code>&lt;td&gt;@Html.DisplayFor(m =&gt; Model.Clues[i].Location)&lt;/td&gt;
  </code></pre>
  
  <p>All well and good so far. Then I'm using JQuery UI to allow the items of the table to be reordered using drag and drop, like this: </p>
  
  <pre><code>        &lt;script type="text/javascript"&gt;
          $(document).ready(function()
          {
              $("#clueTable tbody").sortable().disableSelection();
          });
          &lt;/script&gt;
  </code></pre>
  
  <p>All well and good, I can drag and drop the elements. </p>
  
  <p>The problem  is that I don't know how to save the new order of elements and save them back to the database. </p>
  
  <p>The first thing I tried was simply passing the list of clues to a controller method, but I found that once the list of clues reached the controller method, it was always null. </p>
  
  <p>For example: </p>
  
  <pre><code>@Url.Action("ViewCluePage", @Model.Clues)
  </code></pre>
  
  <p>Even if I send the whole @Model, list of clues within is always null. Removing the new list instantiation from the constructor of the data model didn't solve this problem. </p>
  
  <p>Another thing I tried was wrapping the whole table into a HTML form, but still the list of clues remains null.</p>
  
  <p>So basically, this question is really two questions:</p>
  
  <p>1) Why is the list of clues always null after sending the model object to a controller. </p>
  
  <p>2) How to save the new order of the list of items? </p>
  
  <p>UPDATE: As per suggestion by @recursive, I see where I made an error when trying to submit the clue elements to the HTML form. </p>
  
  <p>I used this outside the for loop which iterated over the clue elements: </p>
  
  <pre><code>@Html.HiddenFor(m =&gt; m.Clues)
  </code></pre>
  
  <p>I had to add the HiddenFor lines inside of the for loop (for each clue item), and for EACH property of the clue item, e.g. </p>
  
  <pre><code>@Html.HiddenFor(m =&gt; m.Clues[i].Id)
  </code></pre>
  
  <p>So that would be one step forward to be able to get the list items sent to the controller, but I think I still need code that will reflect the new order of the clue items when sent to the controller. Currently, on rearranging the order of the elements on screen using the JQuery sortable() method, this doesn't change the order of the elements as they are stored in the data model binded to the view (@Model.Clues). </p>