如何使用组合框更改排序顺序？

Question

在我的视图中，我有一个用户上传的集合，并且我添加了一个带有操作链接的组合框来刷新视图以选择新的排序顺序：

@model IEnumerable<FunPetPics.Models.PetPhotoModel>

@{
    ViewData["Title"] = "Index";
}

<p>
    <a asp-action="UploadPhoto">Upload Photo</a>
</p>
@if (Model == null || !Model.Any())
{
    <p>Your uploads will be displayed here</p>

}
else
{

    <div class="row">
        <div class="col-md-4">
            <h6>Order by:</h6>
            <div class="form-group">
                <input type=text list=sortOrder class="list">
                <datalist id=sortOrder>
                    <option>@Html.ActionLink("Newest", "Index", new { sortOrder = "Newest" })</option>
                    <option>@Html.ActionLink("Oldest", "Index", new { sortOrder = "Oldest" })</option>
                    <option>@Html.ActionLink("Cutest", "Index", new { sortOrder = "Cutest" })</option>
                    <option>@Html.ActionLink("Funiest", "Index", new { sortOrder = "Funiest" })</option>
                    <option>@Html.ActionLink("Most Awsome", "Index", new { sortOrder = "Most Awsome" })</option>
                </datalist>
            </div>
        </div>
    </div>
    <br />

    <div class="card-columns">

        @foreach (var upload in Model)
        {
            <div class="card">
                <img class="card-img-top" src="@("~/UploadedPhotos/"+  upload.ImageName)" asp-append-version="true">
                <div class="card-body">
                    <h4 class="card-title">@upload.Title</h4>
                    <h6 class="card-subtitle mb-2 text-muted">@upload.PetName</h6>
                    <p class="card-text">@upload.DateUploaded</p>
                    <p class="card-text">@upload.Description</p>
                    <p class="card-subtitle">Ratings:</p>
                    <p class="card-text">
                        Cute:@upload.AverageCutenessRating/5<br />
                        Funny:@upload.AverageFunnynessRating/5<br />
                        Awsome:@upload.AverageAwsomnessRating/5<br />
                    </p>
                </div>
            </div>
        }
    </div>

}

在我的控制器中，我使用 switch 语句获取用户的上传列表，该语句根据 sortOrder 参数更改顺序，然后返回带有模型的视图：

 public IActionResult Index(string sortOrder)
        {
            //get the current logged in user and their collection of uploads from the database context
            var uploads = GetLoggedInUser().Uploads;
           
            if (uploads == null || !uploads.Any())
            {
                return View();
            }

            switch (sortOrder)
            {
                case "Newest":
                    uploads.OrderByDescending(u => u.DateUploaded);
                    break;

                case "Oldest":
                    uploads.OrderBy(u => u.DateUploaded);
                    break;

                case "Cutest":
                    uploads.OrderByDescending(u => u.AverageCutenessRating)
                        .ThenByDescending(u => u.DateUploaded);
                    break;

                case "Funniest":
                    uploads.OrderByDescending(u => u.AverageFunnynessRating)
                        .ThenByDescending(u => u.DateUploaded);
                    break;

                case "Most Awsome":
                    uploads.OrderByDescending(u => u.AverageAwsomnessRating)
                        .ThenByDescending(u => u.DateUploaded);
                    break;

                default:
                    sortOrder = "Newest";
                    uploads.OrderByDescending(u => u.DateUploaded);
                    break;
            }

            return View(uploads.ToList());
        }

第一个问题：从菜单中选择一个项目并没有点击超链接，它只是从列表中删除了其他项目

第二个问题：尝试在 URL 中使用 localhost:44316/UserUploads?sortOrder="Oldest" 手动导航并刷新页面时，控制器中的 sortOrder 为空，因此顺序不会改变

Answer 1

从菜单中选择一个项目不会点击超链接

datalist 不支持表单或链接。他们只是为输入提供一个下拉列表。所以ActionLink不能在这里工作，你应该使用js或jquery刷新页面。

它只是从列表中删除其他项目

实际上，它们并没有被删除。 datalist 有一个内置的autocomplete 属性，因此在您选择输入选项后，其他选项是不可见的。您需要先清除输入。

当尝试在 URL 中使用 localhost:44316/UserUploads?sortOrder="Oldest" 手动导航并刷新页面时，控制器中的 sortOrder 为空，因此顺序不会改变

不需要在查询字符串中添加双引号。

localhost:44316/UserUploads?sortOrder=Oldest

我根据你的需要做了一个demo，你可以参考一下。

Index.cshtml：

@{
    ViewData["Title"] = "Index";
}

<h1>Index</h1>

<p>
    <a asp-action="UploadPhoto">Upload Photo</a>
</p>


<div class="row">
    <div class="col-md-4">
        <h6>Order by:</h6>
        <div class="form-group">
            <input type="text" id="sortOrder" name="sortOrder" list="orderList" value="@ViewBag.sortOrder">
            <datalist id="orderList">
                <option>@Html.ActionLink("Newest", "Index", new { sortOrder = "Newest" })</option>
                <option>@Html.ActionLink("Oldest", "Index", new { sortOrder = "Oldest" })</option>
                <option>@Html.ActionLink("Cutest", "Index", new { sortOrder = "Cutest" })</option>
                <option>@Html.ActionLink("Funiest", "Index", new { sortOrder = "Funiest" })</option>
                <option>@Html.ActionLink("Most Awsome", "Index", new { sortOrder = "Most Awsome" })</option>
            </datalist>
        </div>
    </div>
</div>
<br />

@section scripts{
    <script>
        $("#sortOrder").bind('input', function () {
            if (checkExists($('#sortOrder').val()) === true) {
                var url = '@Url.Action("Index", "UserUploads")';
                var text = $('#sortOrder').val();
                switch (text) {
                    case "Newest":
                        url = url +"?sortOrder=Newest";
                        break;
                    case "Oldest":
                        url = url +"?sortOrder=Oldest";
                        break;
                    case "Cutest":
                        url = url +"?sortOrder=Cutest";
                        break;
                    case "Funiest":
                        url = url +"?sortOrder=Funiest";
                        break;
                    case "Most Awsome":
                        url = url +"?sortOrder=Most Awsome";
                        break;
                    default:
                        url = '@Url.Action("Index")';
                }
                window.location = url;
            }
        });

        function checkExists(inputValue) {
            console.log(inputValue);
            var x = document.getElementById("orderList");
            var i;
            var flag;
            for (i = 0; i < x.options.length; i++) {
                if (inputValue == x.options[i].value) {
                    flag = true;
                }
            }
            return flag;
        }
    </script>
}

控制器：

public class UserUploadsController : Controller
{
    public IActionResult Index(string sortOrder)
    {
        ViewBag.sortOrder = sortOrder;
        return View();
    }
}

结果：