how to use arrow in header for sorting in asp.net mvc

Question

how to use arrow in header for sorting in asp.net mvc. if page is ascending then arrow to word below.if page is descending then arrow to word upword

Bikesh Srivastava · Answer

Hi You can use datatable.js

Mayank · Answer

Controller: public ActionResult Sorting(string sortOrder) { ViewBag.NameSortParm = String.IsNullOrEmpty(sortOrder) ? name_desc : ; ViewBag.DateSortParm = sortOrder == Date ? date_desc : Date; List students = new List (); var user = new DataModel { FirstMidName=A LastName= A EnrollmentDate=DateTime.Now }; var user2 = new DataModel { FirstMidName = B LastName = E EnrollmentDate = DateTime.Now }; var user3 = new DataModel { FirstMidName = C LastName = D EnrollmentDate = DateTime.Now }; students.Add(user); students.Add(user2); students.Add(user3); switch (sortOrder) { case name_desc: students = students.OrderByDescending(s => s.LastName).ToList(); break; case Date: students = students.OrderBy(s => s.EnrollmentDate).ToList(); break; case date_desc: students = students.OrderByDescending(s => s.EnrollmentDate).ToList(); break; default: students = students.OrderBy(s => s.LastName).ToList(); break; } return View(students); } DataModel Model class : public class DataModel { [Required] public string Name { get; set; } public string LastName { get; set; } public string FirstMidName { get; set; } public DateTime EnrollmentDate { get; set; } } Sorting.cshtml @model IEnumerable @{ ViewBag.Title = Sorting; } Sorting @*@model PagedList.IPagedList @using PagedList.Mvc;*@ @* *@ @{ ViewBag.Title = Students; } @* @Html.ActionLink(Create New Create) @using (Html.BeginForm(Index Student FormMethod.Get)) { Find by name: @Html.TextBox(SearchString ViewBag.CurrentFilter as string) }*@ @Html.ActionLink(Last Name Sorting new { sortOrder = ViewBag.NameSortParm }) First Name Enrollment Date @*@Html.ActionLink(Enrollment Date Sorting new { sortOrder = ViewBag.DateSortParm })*@ @foreach (var item in Model) { @Html.DisplayFor(modelItem => item.LastName) @Html.DisplayFor(modelItem => item.FirstMidName) @Html.DisplayFor(modelItem => item.EnrollmentDate) @*@Html.ActionLink(Edit Edit new { id = item.ID }) | @Html.ActionLink(Details Details new { id = item.ID }) | @Html.ActionLink(Delete Delete new { id = item.ID })*@ } @*Page @(Model.PageCount @Html.PagedListPager(Model page => Url.Action(Index new { page sortOrder = ViewBag.CurrentSort currentFilter = ViewBag.CurrentFilter }))*@ $(document).ready(function () { //alert('@ViewBag.NameSortParm'); if('@ViewBag.NameSortParm'!='') $(#profileImage).attr(src /Images/DownArrow.jpg); else $(#profileImage).attr(src /Images/UpArrow.jpg); }); You will take DownArrow.jpg and Uparrow.jpg under Images. If this resolve your issue then please mark as answer.

Suvendu Shekhar Giri · Answer

Check this if it helps - http://stackoverflow.com/a/7845303

Suvendu Shekhar Giri · Answer

anything you have tried so far?