如何在ASP.NET MVC毕业设计点餐网站中实现商品多维度排序功能

问题根因 #

你的排序功能失效是三个明确的错误导致的：

• Controller中虽然对uruns变量做了排序处理，但最后传给视图的vm.Deger1是直接从新的上下文实例中查询的未排序数据，完全没有用到之前排序后的结果
• 视图遍历商品列表时额外加了.OrderBy(item => item.UrunFiyat)逻辑，会直接覆盖后端返回的排序结果
• 四个蓝色排序按钮没有绑定对应的跳转逻辑，只有测试用的Name、Price链接可用

修复方案 #

1. 修改Controller逻辑 #

先调整排序逻辑，同时新增销量排序支持（请确认你的Urun实体类已添加销量字段，示例中假设字段名为SatisSayisi，可替换为你实际的字段名）：

public class MenuController : Controller
{
    Context c = new Context();
    public ActionResult Index(string sortBy)
    {
        // 存储当前排序参数用于视图状态切换
        ViewBag.CurrentSort = sortBy;
        ViewBag.SortNameParam = sortBy == "NameAsc" ? "NameDesc" : "NameAsc";
        ViewBag.SortPriceAscParam = "PriceAsc";
        ViewBag.SortPriceDescParam = "PriceDesc";
        ViewBag.SortSalesParam = "SalesDesc";

        var uruns = c.Uruns.Where(i => i.Durum).AsQueryable();

        switch(sortBy)
        {
            case "NameDesc":
                uruns = uruns.OrderByDescending(x => x.UrunAdi);
                break;
            case "PriceAsc":
                uruns = uruns.OrderBy(x => x.UrunFiyat);
                break;
            case "PriceDesc":
                uruns = uruns.OrderByDescending(x => x.UrunFiyat);
                break;
            case "SalesDesc":
                // SatisSayisi替换为你实际的销量字段名
                uruns = uruns.OrderByDescending(x => x.SatisSayisi);
                break;
            // 默认按名称升序排列
            default:
                uruns = uruns.OrderBy(x => x.UrunAdi);
                break;
        }

        Menu vm = new Menu();
        // 直接使用排序后的结果赋值，不要重新查询数据库
        vm.Deger1 = uruns.ToList();
        vm.Deger2 = c.Kategoris.Where(i=>i.Durum).ToList();

        return View(vm);
    }
}

2. 修改视图代码 #

删除商品遍历处多余的排序逻辑，同时给四个蓝色按钮绑定排序跳转链接：

<ul class="filters_menu">
    <li class="active" data-filter="*">All</li>
    @foreach (var k in Model.Deger2)
    {
        if (k.Durum != false)
        {
            <li class="" data-filter=".@k.KategoriAdi">@k.KategoriAdi</li>
        }
    }
</ul>
<p class="filters_menu">
    @Html.ActionLink("A/Z", "Index", new { sortBy = ViewBag.SortNameParam }, new { @class = "btn btn-primary btn-round" })&nbsp;
    @Html.ActionLink("En çok satan", "Index", new { sortBy = ViewBag.SortSalesParam }, new { @class = "btn btn-primary btn-round" })&nbsp;
    @Html.ActionLink("Fiyat (Artan)", "Index", new { sortBy = ViewBag.SortPriceAscParam }, new { @class = "btn btn-primary btn-round" })&nbsp;
    @Html.ActionLink("Fiyat (Azalan)", "Index", new { sortBy = ViewBag.SortPriceDescParam }, new { @class = "btn btn-primary btn-round" })&nbsp;
</p>
<div class="filters-content">
    <div class="row grid">
        <!-- 删除多余的OrderBy，直接使用后端排序好的结果 -->
        @foreach (var item in Model.Deger1)
        {
            using (Html.BeginForm("SepeteEkle", "Sepet", FormMethod.Post, new { Id = item.Urunid }))
            {
                <div class="col-sm-6 col-lg-4 all @item.Kategori.KategoriAdi">
                    <div class="box">
                        <div>
                            <div class="img-box">
                                <img src="@item.UrunGorsel" alt="">
                            </div>
                            <div class="detail-box">
                                <h5>
                                    @item.UrunAdi
                                </h5>
                                <div class="options">
                                    <h6>
                                        @item.UrunFiyat ₺
                                    </h6>
                                    <input name="Id" value="@item.Urunid" type="hidden" />
                                    <input name="qty" class="form-control" type="number" value="1" max="10" min="1" style="max-width: 60px; min-width: 60px;" />
                                    <input type="submit" value="Sepete Ekle" class="btn btn-success btn-circle" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            }
        }
    </div>
</div>
</div>

补充说明 #

如果需要实现无刷新排序，可以配合Ajax请求实现，以上修改为基础的服务端排序实现，已可满足毕设基本需求。

内容的提问来源于stack exchange，提问作者Cumali Bekçi