MV AJAX Sorting Implementation

1) Create a SortedData class

        public class SortedData where T : class

        {
            public IEnumerable Data { get; set; }
            public string SortOrder { get; set; }
        }

2) Define the Index action in the controller as shown below.

  public ViewResult Index()

        {
            try
            {
                SortedData<Album> sortedData = new SortedData<FeedBack>();
                sortedData.SortOrder = "desc";
                sortedData.Data = GetData();
                return View(sortedData);
            }
            catch (ApplicationException aex)
            {
                return View(new List<FeedBack>());
            }
        }

3) Define the SortedList action in the controller as shown below.

public ActionResult SortedList(string sortOrder)

        {
            try
            {
                var albums = GetData();
                SortedData<Album> sortedData = new SortedData<FeedBack>();
                if(sortOrder == "desc")
                {
                    sortedData.SortOrder = "asc";
                    sortedData.Data = albums.OrderByDescending(a => a.Name).ToList();
                }
                else
                {
                    sortedData.SortOrder = "desc";
                    sortedData.Data = albums.OrderBy(a => a.Name).ToList();
                }
                return PartialView(sortedData);
            }
            catch (ApplicationException aex)
            {
                return PartialView(new List<FeedBack>());
            }

        }

4) Define Index.cshtml view as shown below

@model MvcMusicStore.Controllers.StoreManagerController.SortedData<MusicStore.Data.Models.FeedBack>
@{
    ViewBag.Title = "Index";
}
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script type="text/javascript">
    $().ready(
    function () {
        $(".artist-sort").live("click", function () {
            var sortOrder = "desc"
            sortOrder = $(".sOrder").text()
            $.ajax(
            {
                url: '@Url.Action("SortedList")',
                data: { "sortOrder": sortOrder },
                success: function (data) {
                    $("#sorted-list").html(data);
                }
            });
        });
    });
</script>
<h2>Index</h2>
<div id="sorted-list">
   @Html.Partial("SortedList")
</div>

5) Define SortedList view as shown below.

@model MvcMusicStore.Controllers.StoreManagerController.SortedData<MusicStore.Data.Models.FeedBack>

@helper Truncate(string input, int length)
{
    if (input.Length <= length) {
        @input
    } else {
        @input.Substring(0, length)...
    }
}
@{
    ViewBag.Title = "Index";
}
<p>
    @Html.ActionLink("Create New", "Create")
</p>
test <span class="sOrder">@Model.SortOrder</span>
<table>
    <tr>
        <th>
            Genre
        </th>
        <th>
        <a class="artist-sort" href="javascript:void();">Artist</a>
        </th>
        <th>
            Title
        </th>
        <th>
            Price
        </th>
        <th></th>
    </tr>
@foreach (var item in Model.Data) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Name) 
        </td>
        <td>
            @MvcMusicStore.Code.Helpers.Truncate(item.Name, 25)
        </td>
        <td>
            @MvcMusicStore.Code.Helpers.Truncate(item.Title, 25)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Price)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.FeedBackId }) |
            @Html.ActionLink("Details", "Details", new { id=item. FeedBackId }) |
            @Html.ActionLink("Delete", "Delete", new { id=item. FeedBackId })
        </td>
    </tr>
}

</table>