Question: Trying to sort a selectListItem alphabetically not by ID

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.


Answer:
OrderBy creates IEnumerable that "executes" when used in foreach or when .ToList() is invoked. Try this:
Vendors = _context.Vendors.OrderBy(x => x.VendorName).ToList();