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


@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









@foreach (var item in Model.Lists)
{




}

@Html.ActionLink("Name", "CountrySearch", new { sortOrder = ViewBag.NameSortParam, currentFilter = ViewBag.CurrentFilter })


@Html.ActionLink("Address", "CountrySearch", new { sortOrder = ViewBag.AddressSortParam, currentFilter = ViewBag.CurrentFilter })


@Html.DisplayFor(modelItem => item.NameInfo)

@Html.DisplayFor(modelItem => item.AddressInfo)


</div>
</div>





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





@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



As discussed, below is an example of how i make a sortable list of countries.



Create the classes required.


//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; }
}



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.


@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>



Add Controller method to return the view.


[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);
}



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"


@model CountrySearchViewModel




Details





s
@for (int counter = 0; counter


}
Country Name

@Html.TextBoxFor(m=> m.CountriesList[counter].NameInfo, null, new{@class="form-control"})




</div>
</div>



Add the method to return the partial view and the method to sort the data.


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;
}



I've test this locally and it works.



Hope it helps





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.

Popular posts from this blog

api-platform.com Unable to generate an IRI for the item of type

How to set up datasource with Spring for HikariCP?

Display dokan vendor name on Woocommerce single product pages