Why sort order in table makes the View in initial stage in my MVC application
Why sort order in table makes the View in initial stage in my MVC application
I want to implement SortOrder
into my project. There are few issues at this moment
SortOrder
If I click on th
to sort the item, A-Z
does not change in the first place but item gets sorted. To make Z-A
, I again has to click on th
and again it sorts the item.
th
A-Z
Z-A
th
Based on country USA
, its data has populated in table when page first loads. But the problem is when I change country to UK
or some other countries. I gets the data from database on these search.
USA
UK
Now, I again want to sort th
but it reloads the whole page and the page goes into initial stage where Country dropdown changes from UK
to USA
.
th
UK
USA
Please guide me. I do not know where I am going wrong. Thank you in advance for your kind help!
Model
public class CountryList
{
public int? Country { get; set; }
public IEnumerable<SelectListItem> CountriesList { get; set; }
public IEnumerable<CountryClass> Lists { get; set; }
}
public class CountryClass
{
public string NameInfo { get; set; }
public string AddressInfo { get; set; }
//Filter DropdownList
[Display(Name = "Country")]
public int? Country { get; set; }
}
Controller
[HttpGet]
public ActionResult CountrySearch(int? country, string sortOrder, string currentFilter)
{
CountryList cls = new CountryList();
CountryData db = new CountryData();
IEnumerable<CountryClass> data;
ViewBag.CurrentSort = sortOrder;
ViewBag.NameSortParam = sortOrder == "Name" ? "name_desc" : "Name";
ViewBag.breedingSortParam = sortOrder == "Address" ? "address_desc" : "Address";
if (country != null)
{
data = db.CountryFilter(country.Value);
}
else
{
cls.Country = "USA";
data = db.CountryFilter(country.Value);
}
switch (sortOrder)
{
case "Name":
data = data.OrderBy(s => s.NameInfo);
break;
case "name_desc":
data = data.OrderByDescending(s => s.NameInfo);
break;
case "Address":
data = data.OrderBy(s => s.AddressInfo);
break;
case "address_desc":
data = data.OrderByDescending(s => s.AddressInfo);
break;
default:
data = data.OrderBy(s => s.NameInfo);
break;
}
CountryList model = new CountryList
{
CountriesList = new List<SelectListItem>
{
new SelectListItem { Value = "1", Text = "Nepal" },
new SelectListItem {Value = "120", Text = "India" },
new SelectListItem {Value = "121", Text = "USA" },
new SelectListItem { Value = "134", Text = "Australia" },
new SelectListItem { Value = "137", Text = "UK" },
},
Lists = data
};
return View(model);
}
View
As discussed, below is an example of how i make a sortable list of countries. Create the classes required. Create a main view (CountrySearch) with a form to show the country list which is within a partial view. This uses a form to serialize the form data and a css class to act as a JQuery selector. We then perform an ajax post to sort the data and replace the div contents with the newly sorted data. Add Controller method to return the view. Create a partial view ("_SortedCountryData") which will show your sorted data. Note that here I have used TextBoxFor. This is to ensure that your model binds to the controls so we are able to post back the list to sort. You could of course build up the list each time from a separate service that returns you a list of countries as per my comment in the CountySearch "Get" Add the method to return the partial view and the method to sort the data. I've test this locally and it works. Hope it helps@using (Html.BeginForm("CountrySearch", "CountrySearch", FormMethod.Get))
{
Search By
@Html.DisplayNameFor(m => m.Country)
@Html.DropDownListFor(m => m.Country, Model.CountriesList)
Search
</div>
</div>
}
Details
@Html.ActionLink("Name", "CountrySearch", new { sortOrder = ViewBag.NameSortParam, currentFilter = ViewBag.CurrentFilter })
@Html.ActionLink("Address", "CountrySearch", new { sortOrder = ViewBag.AddressSortParam, currentFilter = ViewBag.CurrentFilter })
@foreach (var item in Model.Lists)
{
@Html.DisplayFor(modelItem => item.NameInfo)
@Html.DisplayFor(modelItem => item.AddressInfo)
}
</div>
</div>
@Wheels73, Can you please provide some coding solutions for this. Appreciates for your help.
– MVC
Jul 2 at 11:48
I'll try to put a solution together,
– Wheels73
Jul 2 at 11:56
@Wheels73, Thank you so much.I am looking forward.
– MVC
Jul 2 at 12:07
@Wheels73, Currently, If I choose some other country from dropdown and then click on Search
then it gives me the result. Only problem here is that, if I sort this generated value, it will send me to the original stage by reloading the whole page.
– MVC
Jul 2 at 12:10
Search
1 Answer
1
//Forms view model.
public class CountrySearchViewModel
{
public int? Country { get; set; }
public List<CountryClass> CountriesList { get; set; }
public string CurrentSortOrder { get; set; }
}
public class CountryClass
{
public string NameInfo { get; set; }
public string AddressInfo { get; set; }
}@model CountrySearchViewModel
@{
Layout = null;
}
<!DOCTYPE html>
http://~/Content/Scripts/jquery-2.2.3.js
http://~/Content/Scripts/jquery-ui-1.11.4.js
http://~/Content/Scripts/site.js
http://~/Content/Scripts/bootstrap.js
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>CountrySearch</title>
</head>
<body>
<form id="frmCountries" method="post">
@Html.Partial("_SortedCountryData", Model)
</form>
</body>
</html>
$(document).on('click', '.sortable-link', function () {
var formData = $("#frmCountries").serialize();
var sortUrl = $(this).data('sorturl');
$.ajax({
type: "POST",
url: sortUrl,
data: formData,
success: function (data) {
$("#divSortedCountries").html(data);
}
});
});
<style>
.sortable-link {
cursor:pointer;
}
</style> [HttpGet]
public ActionResult CountrySearch()
{
var model = new CountrySearchViewModel();
//This list should come from a service?!
var listOfCountries = new List<CountryClass>()
{
new CountryClass(){NameInfo ="Nepal", AddressInfo = "9 Street1 YourTown YourCountry"},
new CountryClass(){NameInfo ="India", AddressInfo = "9 Street1 YourTown YourCountry"},
new CountryClass(){NameInfo ="USA", AddressInfo = "9 Street1 YourTown YourCountry"},
new CountryClass(){NameInfo ="Australia", AddressInfo = "9 Street1 YourTown YourCountry"},
new CountryClass(){NameInfo ="UK", AddressInfo = "9 Street1 YourTown YourCountry"},
};
model.CountriesList = listOfCountries;
model.CurrentSortOrder = "ASC";
return View("CountrySearch", model);
}@model CountrySearchViewModel
Details
s
Country Name
@for (int counter = 0; counter
@Html.TextBoxFor(m=> m.CountriesList[counter].NameInfo, null, new{@class="form-control"})
}
</div>
</div>public PartialViewResult SortCountryData(CountrySearchViewModel model, string columnToSort, string sortOrder)
{
ModelState.Clear();
model.CountriesList = ReturnSortedCountries(model.CountriesList, columnToSort, sortOrder);
model.CurrentSortOrder = sortOrder == "ASC" ? "DESC" : "ASC";
return PartialView("_SortedCountryData", model);
}
public List<CountryClass> ReturnSortedCountries(List<CountryClass> countryList, string columnToSort, string order)
{
List<CountryClass> sortedData;
switch (columnToSort)
{
case "Name":
sortedData = order == "ASC" ? countryList.OrderBy(s => s.NameInfo).ToList() : countryList.OrderByDescending(s => s.NameInfo).ToList();
break;
case "Address":
sortedData = order == "ASC" ? countryList.OrderBy(s => s.AddressInfo).ToList() : countryList.OrderByDescending(s => s.AddressInfo).ToList();
break;
default:
sortedData = countryList.OrderBy(s => s.NameInfo).ToList();
break;
}
return sortedData;
}
Sorry to ask you one help. Can you please invite me for chat. I want to share you my code. I am not getting the solution. Please help me.
– MVC
Jul 3 at 9:39
Can't at the moment, i'm at work sorry!. edit your question with your current code and I'll take a look when possible.
– Wheels73
Jul 3 at 9:47
I have added another question related to this. Please have a look and also please provide me solution.please check
– MVC
Jul 3 at 11:00
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
I wouldn't approach this like that. Put your table data into a partial view and add a Post action that accepts your model, column to sort and whether its ASC or DEC. and then returns the partial with the sorted model data. Your partial view inclusion needs to be within your form.
– Wheels73
Jul 2 at 11:44