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?

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

Answers (4)