博客

ASP.NET MVC使用Boostrap实现产品展示、查询、排序、分页

  • Post category:C#

以下是在ASP.NET MVC中使用Bootstrap实现产品展示、查询、排序和分页的完整攻略：

步骤1：创建MVC项目

在Visual Studio中创建一个新的ASP.NET MVC项目。

步骤2：添加Bootstrap

在项目中添加Bootstrap框架。可以通过NuGet包管理器来安装Bootstrap。

步骤3：创建产品模型

在Models文件夹中创建一个名为Product的类，该类表示产品模型。以下是Product类的代码：

public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }
    public decimal Price { get; set; }
}

步骤4：创建产品控制器

在Controllers文件夹中创建一个名为ProductController的控制器，并添加以下代码：

public class ProductController : Controller
{
    private readonly List<Product> _products = new List<Product>
    {
        new Product { Id = 1, Name = "Product 1", Description = "Description 1", Price = 10.00m },
        new Product { Id = 2, Name = "Product 2", Description = "Description 2", Price = 20.00m },
        new Product { Id = 3, Name = "Product 3", Description = "Description 3", Price = 30.00m },
        new Product { Id = 4, Name = "Product 4", Description = "Description 4", Price = 40.00m },
        new Product { Id = 5, Name = "Product 5", Description = "Description 5", Price = 50.00m },
        new Product { Id = 6, Name = "Product 6", Description = "Description 6", Price = 60.00m },
        new Product { Id = 7 Name = "Product 7", Description = "Description 7", Price = 70.00m },
        new Product { Id = 8, Name = "Product 8", Description = "Description 8", Price = 80.00m },
        new Product { Id = 9, Name = "Product 9", Description = "Description 9", Price = 90.00m },
        new Product { Id = 10, Name = "Product 10", Description = "Description 10", Price = 100.00m }
    };

    public ActionResult Index(string search, string sortOrder, int? page)
    {
        ViewBag.CurrentSortOrder = sortOrder;
        ViewBag.NameSortParam = string.IsNullOrEmpty(sortOrder) ? "name_desc" : "";
        ViewBag.PriceSortParam = sortOrder == "price" ? "price_desc" : "price";

        var products = _products.AsQueryable();

        if (!string.IsNullOrEmpty(search))
        {
            products = products.Where(p => p.Name.Contains(search));
        }

        switch (sortOrder)
        {
            case "name_desc":
                products = products.OrderByDescending(p => p.Name);
                break;
            case "price":
                products = products.OrderBy(p => p.Price);
                break;
            case "price_desc":
                products = products.OrderByDescending(p => p.Price);
                break;
            default:
                products = products.OrderBy(p => p.Name);
                break;
        }

        int pageSize = 3;
        int pageNumber = (page ?? 1);

        return View(products.ToPagedList(pageNumber, pageSize));
    }
}

这个控制器包含一个名为Index的方法，它接受三个参数：search、sortOrder和page。search参数用于搜索产品，sortOrder参数用于指定排序顺序，page参数用于指定当前页码。

在Index方法中，我们首先设置视图包中的当前排序顺序和排序参数。后，我们将产品列表转换为IQueryable对象，并根据搜索条件和排序顺序过滤和排序。最后，我们使用ToPagedList方法将结果分页，并将其传递给视图。

步骤5：创建产品视图

在Views文件夹中创建一个名为Product的文件夹，并在其中创建一个名为Index.cshtml的视图。以下是Index视图的代码：

@model PagedList.IPagedList<Product>

@using PagedList.Mvc;
@using PagedList;

@{
    ViewBag.Title = "Products";
}

<h2>Products</h2>

@using (Html.BeginForm("Index", "Product", FormMethod.Get))
{
    <p>
        Search: @Html.TextBox("search", ViewBag.CurrentFilter as string)
        <input type="submit" value="Search" />
    </p>
}

<table class="table">
    <thead>
        <tr>
            <th>
                @Html.ActionLink("Name", "Index", new { sortOrder = ViewBag.NameSortParam })
                @if (ViewBag.CurrentSortOrder == ViewBag.NameSortParam)
                {
                    <span class="glyphicon glyphicon-sort-by-alphabet"></span>
                }
            </th>
            <th>
                @Html.ActionLink("Price", "Index", new { sortOrder = ViewBag.PriceSortParam })
                @if (ViewBag.CurrentSortOrder == "price")
                {
                    <span class="glyphicon glyphicon-sort-by-order"></span>
                }
                else if (ViewBag.CurrentSortOrder == "price_desc")
                {
                    <span class="glyphicon glyphicon-sort-by-order-alt"></span>
                }
            </th>
        </tr>
    </thead>
    <tbody>
        @foreach (var product in Model)
        {
            <tr>
                <td>@product.Name</td>
                <td>@product.Price</td>
            </tr>
        }
    </tbody>
</table>

<div class="text-center">
    @Html.PagedListPager(Model, page => Url.Action("Index", new { page, sortOrder = ViewBag.CurrentSortOrder, search = ViewBag.CurrentFilter }))
</div>

这个视图包含一个搜索表单，一个产品列表和一个分页控件。搜索表单使用GET方法提交到Index方法，并传递search参数。产品列表使用foreach循环遍历列表，并显示产品名称和价格。分页控件使用PagedListPager方法生成，并传递当前页码、排序顺序和搜索条件。

示例1：按名称排序

假设我们要按名称升序排序产品列表。我们可以使用以下URL：

/Product/Index?sortOrder=name

这个URL将调用Index方法，并将sortOrder参数设置为name。在Index方法中，我们将根据sortOrder参数对产品列表进行排序。

示例2：搜索产品

假设我们要搜索名称包含“Product 1”的产品。我们可以使用以下URL：

/Product/Index?=Product+1

这个URL将调用Index方法，并将search参数设置为“Product 1”。在Index方法中，我们将根据search参数过滤产品列表。

以上就是在ASP.NET MVC中使用Bootstrap实现产品展示、查询、排序和分页的完整攻略。

Tags: