第8章SportsStorePeta导航

作者：北漂123 | 来源：互联网 | 2023-09-25 15:34

一、添加导航控制1.过滤产品列表增强ProductsListViewModelpublicclassProductsListViewModel{p

一、添加导航控制

　　1.过滤产品列表　

　　　　增强ProductsListViewModel

 public class ProductsListViewModel
    {
        public IEnumerable Products { get; set; }
        public PageInfo PagingInfo { get; set; }
        public string CurrentCategory { get; set; }
    }

　　　　修改List动作方法　　　　

 public ViewResult List(string category,int page=1)
        {

            ProductsListViewModel model = new ProductsListViewModel
            {
                Products = GetProductViewModelListByProducts( _repository.Products.Where(p=>category==null||p.Category==category).OrderBy(p => p.ProductId).Skip((page - 1)*PageSize).Take(PageSize)),
                PagingInfo = new PageInfo { CurrentPage = page,ItemsPerPage = PageSize,TotalItems = _repository.Products.Count()} ,
                CurrentCategory = category
                
            };

            return View(model);
        }

　　2.调整URL方案(修改路由)

            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(null, "", new {cOntroller= "Product", action = "List", category = (string) null, page = 1});

            routes.MapRoute(null, "Page{page}", new { cOntroller= "Product", action = "List", category = (string)null},new{page=@"\d+"});

            routes.MapRoute(null, "{category}", new { cOntroller= "Product", action = "List", page = 1 });

            routes.MapRoute(null, "{category}/Page{page}", new { cOntroller= "Product", action = "List" },new{page=@"\d+"});

            routes.MapRoute(null, "{controller}/{action}");

　　　　修改分布链接添加分页信息　　　　

<div class="pager">
    @Html.PageLinks(Model.PagingInfo,x=>Url.Action("List",new{page=x,category=Model.CurrentCategory}))
div>

　　3.建立分类导航菜单

　　　　子动作：适用于创建诸如可重用导航控件之类的东西。依赖于“RenderAction”辅助器方法,在当前视图中包含一个任意动作方法的输出。

　　　　（1）创建导航控制器

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace SportsStorePeta.WebUI.Controllers
{
    public class NavController : Controller
    {
        //
        // GET: /Nav/
        public string Menu()
        {
            return "Hello from NavController";
        }

    }
}

　　　　修改布局：

　　RenderAction方法会将它的内容直接写入到响应流，必须把这个调用封装在一个Razor代码块中,而且以分号为语句结束。@{Html.RenderAction("Menu","Nav");}

<div id="categories">
   @{
       Html.RenderAction("Menu","Nav");
   }
div>

　　　　（2）生成分类列表

using System;
using System.Collections.Generic;
using System.Data.Entity.Infrastructure;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using SportsStorePeta.Domain.Abstract;

namespace SportsStorePeta.WebUI.Controllers
{
    public class NavController : Controller
    {
        private readonly IProductRepository _repository;

        public NavController(IProductRepository repo)
        {
            _repository = repo;
        }
  
        public PartialViewResult Menu()
        {
            IEnumerable<string> categories = _repository.Products.Select(x => x.Category).Distinct().OrderBy(x => x);
            return PartialView(categories);
        }

    }
}

　　　　（3）创建分部视图 Menu

@model IEnumerable<string>
@Html.ActionLink("Home","List","Product")

@foreach (var link in Model)
{
    @Html.RouteLink(link,new{cOntroller="Product",action="List",category=link,page=1})
}

　　　　用于分类链接的CSS

div#categories a {
    font: bold 1.1em "Arial Narrow", "Franklin Gothic medium", Arial;display: block;
    text-decoration: none;padding: .6em;color: black;
    border-bottom: 1px solid silver;
}

div#categories a.selected {
    background-color: #666;color: white;
}

　　　　高亮当前分类　　

 public PartialViewResult Menu(string category=null)
        {
            ViewBag.SelectedCategory = category;
            IEnumerable<string> categories = _repository.Products.Select(x => x.Category).Distinct().OrderBy(x => x);
            return PartialView(categories);
        }

@model IEnumerable<string>
@Html.ActionLink("Home","List","Product")

@foreach (var link in Model)
{
    @Html.RouteLink(link, new { cOntroller= "Product", action = "List", category = link, page = 1 },
 new { @class=link==ViewBag.SelectedCategory?"selected":null}
    )
}

　　4.修正页面计数

  public ProductController(IProductRepository productRepository)
        {
            _repository = productRepository;
        }

        public ViewResult List(string category,int page=1)
        {

            ProductsListViewModel model = new ProductsListViewModel
            {
                Products = GetProductViewModelListByProducts( _repository.Products.Where(p=>category==null||p.Category==category).OrderBy(p => p.ProductId).Skip((page - 1)*PageSize).Take(PageSize)),
                PagingInfo = new PageInfo { CurrentPage = page,ItemsPerPage = PageSize,TotalItems =category==null?_repository.Products.Count():_repository.Products.Count(e => e.Category==category)} ,
                CurrentCategory = category    
            };

            return View(model);
        }

二、建立购物车

　　1.定义购物车实体

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace SportsStorePeta.Domain.Entities
{
   public class Cart
   {
       private List lineCollection = new List();

       public void AddItem(Product product, int quantity)
       {
           CartLine line = lineCollection.FirstOrDefault(p => p.Product.ProductId == product.ProductId);
           if (line == null)
           {
               lineCollection.Add(new CartLine{Product = product,Quantity = quantity});
           }
           else
           {
               line.Quantity += quantity;
           }
       }

       public void RemoveLine(Product product)
       {
           lineCollection.RemoveAll(l => l.Product.ProductId == product.ProductId);
       }

       public decimal ComputeTotalValue()
       {
           return lineCollection.Sum(e => e.Product.Price*e.Quantity);
       }

       public void Clear()
       {
           lineCollection.Clear();
       }

       public IEnumerable Lines{get { return lineCollection; }} 
   }

   public class CartLine
   {
       public Product Product { get; set; }
       public int Quantity { get; set; }
   }
}

　　2.添加按钮“加入购物车”

@model SportsStorePeta.WebUI.Models.ProductViewModel

<div class="item">
    <h3>@Model.Nameh3>
    @Model.Description
    @using (Html.BeginForm("AddToCart", "Cart"))
 {
 @Html.HiddenFor(x=>x.ProductId)
 @Html.Hidden("returnUrl",Request.Url.PathAndQuery)
 <input type="submit" value="加入购物车"/>
 }
 <h4>@Model.Priceh4>
div>

　　　　在Site.css中设置按钮样式　　　

form {
    margin: 0;padding: 0;
}

div.item form{ float: right;}
div.item input {
    color: white;background: #333;border: 1px solid black;cursor: pointer;
}

　　3.实现购物车控制器

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using SportsStorePeta.Domain.Abstract;
using SportsStorePeta.Domain.Entities;

namespace SportsStorePeta.WebUI.Controllers
{
    public class CartController : Controller
    {
        private IProductRepository _repository;

        public CartController(IProductRepository repo)
        {
            _repository = repo;
        }

        public RedirectToRouteResult AddToCart(int productId, string returnUrl)
        {
            Product product = _repository.Products.FirstOrDefault(p => p.ProductId == productId);
            if (product != null)
            {
                GetCart().AddItem(product, 1);
            }
            return RedirectToAction("Index", new {returnUrl});
        }

        public RedirectToRouteResult RemoveFromCart(int productId, string returnUrl)
        {
              Product product = _repository.Products.FirstOrDefault(p => p.ProductId == productId);
            if (product != null)
            {
                 GetCart().RemoveLine(product);
            }
            return RedirectToAction("Index", new { returnUrl });
        }

        private Cart GetCart()
        {
            Cart cart = (Cart) Session["Cart"];
            if (cart == null)
            {
                cart = new Cart();
                Session["Cart"] = cart;
            }
            return cart;
        }

    }
}

　　4.显示购物车内容

　　　　添加CartIndexViewModel视图模型类

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using SportsStorePeta.Domain.Entities;

namespace SportsStorePeta.WebUI.Models
{
    public class CartIndexViewModel
    {
        public Cart Cart { get; set; }
        public string ReturnUrl { get; set; }
    }
}

　　CartController中添加Index动作方法：

      public ViewResult Index(string returnUrl)
        {
            return View(new CartIndexViewModel {Cart = GetCart(), ReturnUrl = returnUrl});
        }

　　添加Index视图：

@model SportsStorePeta.WebUI.Models.CartIndexViewModel

@{
    ViewBag.Title = "我的购物车";
}
<h2>我的购物车h2>
<table width="90%" align="center">
    <thead>
    <tr>
        <th align="left">物品th>
        <th align="center">数量th>
        <th align="right">单价th>
        <th align="right">金额th>
    tr>
    thead>
    <tbody>
    @foreach (var line in Model.Cart.Lines)
    {
        <tr>
            <td align="left">@line.Product.Nametd>
            <td align="center">@line.Quantitytd>
            <td align="right">@line.Product.Price.ToString("c")td>
            <td align="right">@((line.Quantity*line.Product.Price).ToString("c"))td>
        tr>
    }
    tbody>
    <tfoot>
    <tr>
        <td colspan="3" align="right">合计td>
        <td align="right">@Model.Cart.ComputeTotalValue().ToString("c")td>
    tr>
    tfoot>
table>

<p align="center" class="actionButtons">
    <a href="@Model.ReturnUrl">继续购物a>
p>

　　Css样式：

h2{margin-top: 0.3em}

tfoot td {
    border-top: 1px dotted gray;font-weight: bold;
}

.actionButtons a,input.actionButtons {
    font: .8em Arial;color: white;margin: .5em;
    text-decoration: none;padding: .15em 1.5em .2em 1.5em;
    background-color: #353535;border: 1px solid black;
}

源码：http://yunpan.cn/cdg5yKnzmH3dF 访问密码 7d00

推荐阅读

repository
idea启动springmvc项目时报找不到类的解决方法

这篇文章主要介绍了idea启动springmvc项目时报找不到类的解决方法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值, ... [详细]

蜡笔小新 2024-09-28 10:12:18
int
IOS开发Xib 九宫格应用管理

Xib九宫格应用管理使用xib封装一个自定义view的步骤1新建一个继承UIView的自定义view,假设类名叫做(AppView)2新建一个AppView.xib文件来描述 ... [详细]

蜡笔小新 2024-09-29 23:11:30
main
springboot系列（二）创建springboot工程

https:www.cnblogs.commagicalSamp7171716.html简介SpringBoot是由Pivotal团队提供的全新框架，其设计目的是用来简化新Spri ... [详细]

蜡笔小新 2024-09-27 04:29:57
get
在局部视图中渲染Json数据 - Render Json data in partial view

IamcurrentlyworkingonashoppingcartapplicationusingMVC5andhavearequirementtoallowedi ... [详细]

蜡笔小新 2024-09-25 16:15:00
int
WebBrowser控件（1）

WindowsPhone7内置了一个强大的网络浏览器，该浏览器的内核是基于桌面版的InternetExplorer7（Mango版基于InternetE ... [详细]

蜡笔小新 2024-09-30 16:56:38
get
自定义RecyclerView添加EmptyView

你知道RecyclerView里没有Em ... [详细]

蜡笔小新 2024-09-30 15:31:47
main
GoogleLog(GLog)源码分析

本文分析和介绍了GLo ... [详细]

蜡笔小新 2024-09-30 15:14:04
int
Oasis 公布 Q3、Q4 路线图 | 推动 Sapphire 成为隐私王冠上闪耀明珠

Oasis 公布 Q3、Q4 路线图 | 推动 Sapphire 成为隐私王冠上闪耀明珠 ... [详细]

蜡笔小新 2024-09-30 13:53:16
get
spotify engineering culture part 1

原文，因为原视频说的太快太长，又没有字幕，于是借助youtube，把原文听&打出来了。中文版日后有时间再翻译。oneofthebigsucceessfactorshereatSpo ... [详细]

蜡笔小新 2024-09-30 13:36:17
int
开发笔记:sql盲注之报错注入(附自动化脚本)

篇首语：本文由编程笔记#小编为大家整理，主要介绍了sql盲注之报错注入(附自动化脚本)相关的知识，希望对你有一定的参考价值。 ... [详细]

蜡笔小新 2024-09-30 12:32:17
get
rtems api用户指南_基本的Elixir Api指南

rtemsapi用户指南Elixir代表了相对较新的编程语言，面向更广泛的受众。它于2011年发布，此后一直在开发中。他的主要特征是取消功能范式 ... [详细]

蜡笔小新 2024-09-30 12:04:15
int
delphi控件大全

本文章已收录于：delphi控件查询：http:www.torry.nethttp:www.jrsoftware.orgTb97最有名的工具条(ToolBar) ... [详细]

蜡笔小新 2024-09-30 11:49:36
jsp
AndroidlistView 点击事件

Adapter相当于C（Controller，控制器），listView相当于V(View,视图)用于显示数据为ListView提供数据的List,数组或数据库相当于MVC模式中的 ... [详细]

蜡笔小新 2024-09-28 15:24:54
get
iOS 获取变量属性：修改UIAlertController样式

iOS8之后系统把UIActionSheet和UIAlertView合并为了UIAlertController,使用就不比多说了,但在使用的过程中发现样式是固定的，点 ... [详细]

蜡笔小新 2024-09-26 10:11:40
get
也就是|单打_.net Core 自我学习随笔——工作的核心：增删改查

篇首语：本文由编程笔记#小编为大家整理，主要介绍了.netCore自我学习随笔——工作的核心：增删改查相关的知识，希望对你有一定的参考价值。上次介绍了一下如何进行连接 ... [详细]

蜡笔小新 2024-09-25 18:57:16

北漂123

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章