I'm fairly new to MVC and starting out with version 3. I'm having an issue with the jQuery reorder list that ships with MVC3.
The view renders from an enumeration of my model:
@using (Html.BeginForm())
{
<ul id="questionlist" class="ReorderList">
@for (int i = 0; i < data.Count(); i++)
{
<li>
<span class="dragHandle"></span>
@Html.HiddenFor(x => data[i].ID)
@Html.HiddenFor(x => data[i].DisplayOrder)
@Html.TextBoxFor(x => data[i].QuestionText)
</li>
}
</ul>
<input type="submit" value="Save" />
}
When the page loads jquery is init on the list:
<script type="text/javascript">
$(document).ready(function () {
var unordered = $("#questionlist").sortable({
axis: 'y',
update: listUpdated });
});
function listUpdated(event, ui) {
$('input[name$="DisplayOrder"]').each(function (index) { this.value = index; });
}
</script>
And as you can see after the order is updated jQuery is updating all the hidden fields that map to the DisplayOrder property on my model.
Debugging this I can see the values are posted back to the controller properly, business objects are updated and persisted in SQL Server correctly. Running a query on the table I can see everything is updated as it should be.
My problem occurs when the user clicks the 'Save' button the returned HTML is in the original order, and not the order they changed it to. Fiddler shows the HTML coming back in the original order, but the DisplayOrder hidden field has the correct(changed) values. Clicking a nav button on the screen to refresh the view renders the list in the correct order. I've debugged through the rendering process and everything appears to render in the correct order, I've also tried to decorate the controller with OutputCaching set to false, but of course, it didn't work since the DisplayOrder property was rendering with the correct values.
What am I doing wrong to make it show incorrectly the first postback, but not subsequent postbacks?
