求助:如何实现基于用户下拉选择的餐厅列表排序功能
Let's walk through how to get that sort method dropdown working properly. Here's a step-by-step breakdown:
1. Populate the Sort Options in Your Controller
First, you need to define the available sort methods and assign them to your SortMethods SelectList in the ViewModel. In your RestaurantsController, update the action that serves the view (like Index or sortedRestaurants) to create the list of sort options:
public ActionResult Index() { // Create a list of sort options with display text and corresponding value var sortOptions = new List<SelectListItem> { new SelectListItem { Text = "Restaurant Name (A-Z)", Value = "NameAsc" }, new SelectListItem { Text = "Restaurant Name (Z-A)", Value = "NameDesc" }, new SelectListItem { Text = "Highest Rating First", Value = "RatingDesc" }, new SelectListItem { Text = "Lowest Rating First", Value = "RatingAsc" } }; // Initialize your ViewModel var viewModel = new RestaurantVm { SortMethods = new SelectList(sortOptions, "Value", "Text"), // Set default selected method if needed: SelectedMethod = "NameAsc" }; return View(viewModel); }
2. Handle the Selected Sort Method in Your Action
Next, update your sortedRestaurants action to accept the SelectedMethod parameter and apply the corresponding sorting logic to your restaurant data:
public ActionResult sortedRestaurants(string SelectedMethod) { // Fetch your restaurant data (replace with your actual data source) var restaurants = _db.Restaurants.ToList(); // Apply sorting based on the selected method switch (SelectedMethod) { case "NameDesc": restaurants = restaurants.OrderByDescending(r => r.Name).ToList(); break; case "RatingDesc": restaurants = restaurants.OrderByDescending(r => r.Rating).ToList(); break; case "RatingAsc": restaurants = restaurants.OrderBy(r => r.Rating).ToList(); break; case "NameAsc": default: restaurants = restaurants.OrderBy(r => r.Name).ToList(); break; } // Re-populate the sort options for the dropdown (important for postback) var sortOptions = new List<SelectListItem> { new SelectListItem { Text = "Restaurant Name (A-Z)", Value = "NameAsc" }, new SelectListItem { Text = "Restaurant Name (Z-A)", Value = "NameDesc" }, new SelectListItem { Text = "Highest Rating First", Value = "RatingDesc" }, new SelectListItem { Text = "Lowest Rating First", Value = "RatingAsc" } }; var viewModel = new RestaurantVm { Restaurants = restaurants, SortMethods = new SelectList(sortOptions, "Value", "Text", SelectedMethod), SelectedMethod = SelectedMethod }; return View(viewModel); }
3. Render the Dropdown in Your View
In your Razor view (like Index.cshtml or sortedRestaurants.cshtml), use Html.DropDownListFor to render the dropdown, wrapped in a form that submits to your sortedRestaurants action:
@model RestaurantVm @using (Html.BeginForm("sortedRestaurants", "Restaurants", FormMethod.Get)) { <div class="form-group"> @Html.LabelFor(m => m.SelectedMethod, "Sort By:") @Html.DropDownListFor(m => m.SelectedMethod, Model.SortMethods, "Choose a sort method", new { @class = "form-control", onchange = "this.form.submit();" }) </div> } <!-- Display your sorted restaurants here --> @foreach (var restaurant in Model.Restaurants) { <div>@restaurant.Name - Rating: @restaurant.Rating</div> }
Quick Notes:
- The
onchange="this.form.submit();"makes the form submit automatically when the user selects a new option (optional—you could add a submit button instead if preferred). - Using
FormMethod.Getappends the selected sort method to the URL, which is great for bookmarking and back-button behavior. - Always re-populate the
SortMethodsSelectList in the post action to retain dropdown options after submission.
内容的提问来源于stack exchange,提问作者Curious-programmer

