Как уже говорилось, ниже приведен пример того, как я составляю сортируемый список стран.
Создание необходимых классов.
//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; }
}
Создайте главное представление (CountrySearch) с формой для отображения списка стран, который находится в частичном представлении. При этом форма используется для сериализации данных формы, а класс css выступает в качестве селектора JQuery. Затем мы выполняем запись ajax, чтобы отсортировать данные и заменить содержимое div вновь отсортированными данными.
@model CountrySearchViewModel
@{
Layout = null;
}
<!DOCTYPE html>
<script src="~/Content/Scripts/jquery-2.2.3.js"></script>
<script src="~/Content/Scripts/jquery-ui-1.11.4.js"></script>
<script src="~/Content/Scripts/site.js"></script>
<script src="~/Content/Scripts/bootstrap.js"></script>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>CountrySearch</title>
</head>
<body>
<form id="frmCountries" method="post">
<div id="divSortedCountries">
@Html.Partial("_SortedCountryData", Model)
</div>
</form>
</body>
</html>
<script>
$(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);
}
});
});
</script>
<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);
}
Создайте частичное представление ("_SortedCountryData"), в котором будут показаны ваши отсортированные данные. Обратите внимание, что здесь я использовал TextBoxFor. Это необходимо для того, чтобы ваша модель была привязана к элементам управления, чтобы мы могли опубликовать список для сортировки. Конечно, вы можете составлять список каждый раз из отдельной службы, которая возвращает вам список стран в соответствии с моим комментарием в CountySearch «Получить»
@model CountrySearchViewModel
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
Details
</div>
<div class="panel-body">
<table class="table table-hover">
<tr>
<th><a class="sortable-link" data-sorturl="/Test/SortCountryData?columnToSort=Name&sortOrder=@Model.CurrentSortOrder">Country Name</a></th>
</tr>s
@for (int counter = 0; counter <= Model.CountriesList.Count -1; counter++)
{
<tr>
<td>
<h4>@Html.TextBoxFor(m=> m.CountriesList[counter].NameInfo, null, new{@class="form-control"})</h4>
</td>
</tr>
}
</table>
</div>
</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;
}
Я проверил это локально, и оно работает.
Надеюсь, это поможет