I have the below code that populates a selectListItem with information from my database.
I am trying to sort this by name rather than by ID like how it is in the database.
I tried adding Vendors.OrderBy(x => x.VendorName); but it didn't seem to do anything at all, not sure if I have it in the wrong place or something.
public IList<Data.Vendor> Vendors { get; set; }
public void OnGet()
{
List<SelectListItem> test = new List<SelectListItem>();
Vendors = _context.Vendors.ToList();
foreach (var item in Vendors)
//foreach item In the vendors list
{
test.Add(new SelectListItem { Text = item.VendorName, Value = item.Id.ToString() });
//Add the current item i3n the loop to the selectListItem
}
ViewData["demo"] = test;
Vendors.OrderBy(x => x.VendorName);
}
This is the front end code:
@page
@model PurchaseOrdersModel
@{
ViewData["Title"] = "Home page";
}
<style>
body {
background-image: url("http://10.48.1.215/PORTAL/hero-range-1.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#myInput {
/*background-image: url('/css/searchicon.png'); /* Add a search icon to input */
/* background-position: 10px 12px; /* Position the search icon */
/* background-repeat: no-repeat; /* Do not repeat the icon image **/
width: 100%; /* Full-width */
font-size: 16px; /* Increase font-size */
/*padding: 12px 20px 12px 40px; /* Add some padding */
border: 1px solid #ddd; /* Add a grey border */
margin-bottom: 12px; /* Add some space below the input */
}
</style>
@*
<select asp-for="Files.VendorId.Value" asp-items="@((List<SelectListItem>)ViewData["demo"])"></select>*@
<h1 style="color: white">Purchase Orders</h1>
<p>
<a asp-page="Create" style="color:white">Create File</a>
</p>
<div class="row">
<div class="col-sm-12">
<div class="form-check-inline pull-right">
<label style="color:white">Search</label>
<input type="text" class="form-control" id="myInput" placeholder="Search Purchase Orders..." onkeyup="myFunction()" />
</div>
<select asp-items="@((List<SelectListItem>)ViewData["test"])" id="vendor" onchange="myFunctionThree()">
<option value="" disabled selected>Select a Vendor</option>
</select>
<input class="btn btn-light" value="Clear All Filters" onclick="history.go(0)" style="float: right">
<table class="table" style="background-color: white" id="myTable">
<thead>
<tr class="header">
<th>
PO No.
</th>
@* <th>
@Html.DisplayNameFor(model => model.Files[0].Date)
</th>
<th>
@Html.DisplayNameFor(model => model.Files[0].Value)
</th>*@
<th>
Haulier
</th>
<th>
Comments
</th>
<th>
Vendor
</th>
<th>
Upload
</th>
<th>
Date Uploaded
</th>
<th>Download</th>
<th>Delete Attachment</th>
<th>Notify</th>
<th>Sent</th>
<th>
</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.Files)
{
if (item.FileType == "Purchase Order")
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Number)
</td>
@*<td>
@Html.DisplayFor(modelItem => item.FileType)
</td>*@
<td>
@Html.DisplayFor(modelItem => item.Haulier)
</td>
<td>
@Html.DisplayFor(modelItem => item.Comments)
</td>
<td>
@Html.DisplayFor(modeItem => item.Vendor.VendorName)
</td>
<td>
<a asp-page="Upload" asp-route-id="@item.Id">Upload File Attachment</a>
</td>
<td>
@Html.DisplayFor(modelItem => item.UploadDate)
</td>
<td>
@if (item.Attachment != null)
{
<form asp-page-handler="Download" method="post" asp-route-id="@item.Id">
<input type="submit" class="btn btn-dark" value="Download">
</form>
}
</td>
<td>
@if (item.Attachment != null)
{
<form asp-page-handler="Delete" method="post" asp-route-id="@item.Id">
<input type="submit" class="btn btn-danger" value="Delete Attachment">
</form>
}
</td>
<td>
@if (item.Attachment != null)
{
<form asp-page-handler="Email" method="post" asp-route-id="@item.Id">
<input type="submit" class="btn btn-danger" value="Notify Vendor">
</form>
}
</td>
<td>
@Html.DisplayFor(modelItem => item.EmailSent)
</td>
<td>
<a asp-page="/Admin/Details" asp-route-id="@item.Id">Details</a>
</td>
</tr>
}
}
</tbody>
</table>
</div>
</div>
<script>
//function for search bar
function myFunction() {
// Declare variables
var input, filter, table, tr, td, i, txtValue, dropdownValue, dropdownInput, dtd;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
dropdownInput = document.getElementById("vendor");
dropdownValue = dropdownInput.value.toUpperCase();
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
dtd = tr[i].getElementsByTagName("td")[3];
if (td) {
txtValue = td.textContent || td.innerText;
dropTxtValue = dtd.textContent || dtd.innerText;
if(dropdownValue == ""){
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
else{
if((txtValue.toUpperCase().indexOf(filter) > -1) && (dropTxtValue.toUpperCase().indexOf(dropdownValue) > -1)){
tr[i].style.display = "";
}else{
tr[i].style.display = "none";
}
}
}
}
}
//function for dropdown menu
function myFunctionThree()
{
// Declare variables
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("vendor");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[3];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
I want to sort it A-Z by Vendor Name instead of by the Vendor ID.
OrderBy creates IEnumerable that "executes" when used in foreach or when .ToList() is invoked. Try this:
Vendors = _context.Vendors.OrderBy(x => x.VendorName).ToList();