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

Question

在我看来，我收集了用户上传的内容，并且添加了一个带有操作链接的组合框，以将视图刷新到 select 新的排序顺序：

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

}

在我的 controller 中，我使用 switch 语句获取用户的上传列表，该语句根据sortOrder参数更改顺序，然后使用 model 返回视图：

 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"手动导航并刷新页面时，controller 中的sortOrder是 Z37A6259CC0C1DAE02BD9

Answer 1

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

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

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

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

当尝试在 URL 中使用 localhost:44316/UserUploads?sortOrder="Oldest" 手动导航并刷新页面时，controller 中的 sortOrder 是 Z37A6259CC0C1DAE2989A 所以没有更改

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

localhost:44316/UserUploads?sortOrder=Oldest

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

索引.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>
}

Controller：

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

结果：