Orchard模块开发全接触4:深度改造前台

简介: 这里,我们需要做一些事情,这些事情意味着深度改造前台: 1:为商品增加 添加到购物车 按钮,点击后功能实现; 2:商品排序; 3:购物车预览,以及添加 结算 按钮; 4:一个显式 购物车中有*个 商品 的widget;   一:添加到购物车 按钮 修改 Views/Parts/Product.

这里,我们需要做一些事情,这些事情意味着深度改造前台:

1:为商品增加 添加到购物车 按钮,点击后功能实现;

2:商品排序;

3:购物车预览,以及添加 结算 按钮;

4:一个显式 购物车中有*个 商品 的widget;

 

一:添加到购物车 按钮

修改 Views/Parts/Product.cshtml:

@{
    var price = (decimal)Model.Price;
    var sku = (string)Model.Sku;
}
<article>
    Price: @price<br />
    Sku: @sku
    <footer>
        <button>Add to shoppingcart</button>
    </footer>
</article>

现在,商品列表上已经有了这个按钮:

image

包括商品详细页面,也有这个按钮。

1.1 问题

问题来了,我们发现,该按钮在商品介绍上面,如果我们想放到下面,该怎么做呢?

1.2 修改 Display 方法

protected override DriverResult Display(ProductPart part, string displayType, dynamic shapeHelper)
{
    //return ContentShape("Parts_Product", () => shapeHelper.Parts_Product(
    //        Price: part.UnitPrice,
    //        Sku: part.Sku
    //    ));
    return Combined(

        // Shape 1: Parts_Product
        ContentShape("Parts_Product", () => shapeHelper.Parts_Product(
            Price: part.UnitPrice,
            Sku: part.Sku
        )),

        // Shape 2: Parts_Product_AddButton
        ContentShape("Parts_Product_AddButton", () => shapeHelper.Parts_Product_AddButton())
        );
}

在修改后的方法内,我们创造了一个新的 Shape,叫做 Parts_Product_AddButton,同时,我们使用 Combined 方法,它返回的是依旧是 DriverResult,只不过,它组合了两个形状。

这个时候,我们知道,需要创建一个 Views/Parts/Product.Addbutton.cshtml 文件:

<button>@T("Add to shoppingcart")</button>

当然,我们得把原先的 Product.cshtml 中的代码给恢复过来。

然后,修改 placement.info,为:

<Placement>
  <Place Parts_Product_Edit="Content:1" />
  <Place Parts_Product="Content:0" />
  <Place Parts_Product_AddButton="Content:after" />
</Placement>

然后,看到不一样了:

image

 

二:实现 添加到购物车 功能

2.1 前台准备

首先,我们创建文件夹 Controllers,然后控制器:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Web.Mvc;

namespace TMinji.Shop.Controllers
{
    public class ShoppingCartController : Controller
    {

        [HttpPost]
        public ActionResult Add(int id)
        {
            return RedirectToAction("Index");
        }
    }

}

然后,修改 Views/Parts/Product.AddButton.cshtml:

@using (Html.BeginForm("Add", "ShoppingCart", new { id = -1 }))
{
    <button type="submit">@T("Add to shoppingcart")</button>
}

让它变成一个表单,并且指向到 Add 方法。

注意到,我们这里传递的 id = -1,所以,我们还需要做一件事情,那就是把真是的商品 id 传递过来,才能添加商品。

于是乎,我们首先应该把 id 传递到 shape 中,修改,我们的 Display 方法,如下:

protected override DriverResult Display(ProductPart part, string displayType, dynamic shapeHelper)
{
    //return ContentShape("Parts_Product", () => shapeHelper.Parts_Product(
    //        Price: part.UnitPrice,
    //        Sku: part.Sku
    //    ));
    return Combined(

        // Shape 1: Parts_Product
        ContentShape("Parts_Product", () => shapeHelper.Parts_Product(
            Price: part.UnitPrice,
            Sku: part.Sku
        )),

        // Shape 2: Parts_Product_AddButton
        ContentShape("Parts_Product_AddButton", () => shapeHelper.Parts_Product_AddButton(
            ProductId: part.Id))
        );
}

然后,前台 Views/Parts/Product.AddButton.cshtml 如下:

@{
    var productId = (int)Model.ProductId;
}
@using (Html.BeginForm("Add", "ShoppingCart", new { id = productId }))
{
    <button type="submit">@T("Add to shoppingcart")</button>
}

现在,就可以把值传递到控制器了,现在,我们需要实现业务逻辑部分。

 

2.2 业务逻辑之 Orchard Service

在 Models 目录下,增加 ShoppingCartItem 实体类:

[Serializable]
public sealed class ShoppingCartItem
{
    public int ProductId { get; private set; }

    private int _quantity;
    public int Quantity
    {
        get { return _quantity; }
        set
        {
            if (value < 0)
                throw new IndexOutOfRangeException();

            _quantity = value;
        }
    }

    public ShoppingCartItem()
    {
    }

    public ShoppingCartItem(int productId, int quantity = 1)
    {
        ProductId = productId;
        Quantity = quantity;
    }
}

创建 Services 文件夹,然后创建 IShoppingCart 接口,

public interface IShoppingCart : IDependency
{
IEnumerable<ShoppingCartItem> Items { get; }
void Add(int productId, int quantity = 1);
void Remove(int productId);
ProductPart GetProduct(int productId);
decimal Subtotal();
decimal Vat();
decimal Total();
int ItemCount();
void UpdateItems();
}

然后,其实现类:

using Orchard;
using Orchard.ContentManagement;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Web;
using TMinji.Shop.Models;

namespace TMinji.Shop.Services
{
    public class ShoppingCart : IShoppingCart
    {
        private readonly IWorkContextAccessor _workContextAccessor;
        private readonly IContentManager _contentManager;
        public IEnumerable<ShoppingCartItem> Items { get { return ItemsInternal.AsReadOnly(); } }

        private HttpContextBase HttpContext
        {
            get { return _workContextAccessor.GetContext().HttpContext; }
        }

        private List<ShoppingCartItem> ItemsInternal
        {
            get
            {
                var items = (List<ShoppingCartItem>)HttpContext.Session["ShoppingCart"];

                if (items == null)
                {
                    items = new List<ShoppingCartItem>();
                    HttpContext.Session["ShoppingCart"] = items;
                }

                return items;
            }
        }

        public ShoppingCart(IWorkContextAccessor workContextAccessor, IContentManager contentManager)
        {
            _workContextAccessor = workContextAccessor;
            _contentManager = contentManager;
        }

        public void Add(int productId, int quantity = 1)
        {
            var item = Items.SingleOrDefault(x => x.ProductId == productId);

            if (item == null)
            {
                item = new ShoppingCartItem(productId, quantity);
                ItemsInternal.Add(item);
            }
            else
            {
                item.Quantity += quantity;
            }
        }

        public void Remove(int productId)
        {
            var item = Items.SingleOrDefault(x => x.ProductId == productId);

            if (item == null)
                return;

            ItemsInternal.Remove(item);
        }

        public ProductPart GetProduct(int productId)
        {
            return _contentManager.Get<ProductPart>(productId);
        }

        public void UpdateItems()
        {
            ItemsInternal.RemoveAll(x => x.Quantity == 0);
        }

        public decimal Subtotal()
        {
            return Items.Select(x => GetProduct(x.ProductId).UnitPrice * x.Quantity).Sum();
        }

        public decimal Vat()
        {
            return Subtotal() * .19m;
        }

        public decimal Total()
        {
            return Subtotal() + Vat();
        }

        public int ItemCount()
        {
            return Items.Sum(x => x.Quantity);
        }

        private void Clear()
        {
            ItemsInternal.Clear();
            UpdateItems();
        }
    }
}

以上代码不再一一解释,相信大家能看明白,然后,相应的,修改控制器吧:

using Orchard;
using System;
using Orchard.Mvc;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Web.Mvc;
using TMinji.Shop.Services;

namespace TMinji.Shop.Controllers
{
    public class ShoppingCartController : Controller
    {

        private readonly IShoppingCart _shoppingCart;
        private readonly IOrchardServices _services;

        public ShoppingCartController(IShoppingCart shoppingCart, IOrchardServices services)
        {
            _shoppingCart = shoppingCart;
            _services = services;
        }

        [HttpPost]
        public ActionResult Add(int id)
        {

            // Add the specified content id to the shopping cart with a quantity of 1.
            _shoppingCart.Add(id, 1);

            // Redirect the user to the Index action (yet to be created)
            return RedirectToAction("Index");
        }

        public ActionResult Index()
        {

            // Create a new shape using the "New" property of IOrchardServices.
            var shape = _services.New.ShoppingCart();

            // Return a ShapeResult
            return new ShapeResult(this, shape);
        }

    }
}

在控制器中,我们看到了三点变化:

1:构造器接受了两个对象,它们是被注入的,这会由 Orchard 完成;

2:Add 方法可以添加商品到购物车了;

3:增加了一个 Index 方法。可以看到在这个方法中,我们又创建了一个 Shape,而这个 Shape 的名字叫做 ShoppingCart。注意哦,它和后台创建 Shape 不一样(记得吗,在 Display 方法 中),这个 shape 对于那个的 cshtml 文件为 Views/ShoppingCart.cshtml:

TODO: display our shopping cart contents!

如果我们这个时候运行代码,会发现点击 添加到购物车 后,变成 404 。这是因为,我们没有为路由加上 area,它是什么,是模块名,Orchard 会根据这个 area,路由到对于的模块中的 controller。故,我们应该修改 Views/Parts/Product.AddButton.cshtml

@{
    var productId = (int)Model.ProductId;
}
@using (Html.BeginForm("Add", "ShoppingCart", new { id = productId, area = "TMinji.Shop" }))
{
    <button type="submit">@T("Add to shoppingcart")</button>
}

现在,继续运行代码,现在,我们得到错误:

The required anti-forgery form field "__RequestVerificationToken" is not present.

当然,这个错误,熟悉 MVC 的我们,已经知道怎么修改了,修改之:

@{
    var productId = (int)Model.ProductId;
}
@using (Html.BeginFormAntiForgeryPost(Url.Action("Add", "ShoppingCart", new { id = productId, area = "TMinji.Shop" })))
{
    <button type="submit">@T("Add to shoppingcart")</button>
}

再次运行:

image

我们看到,这个页面没有包含当前的 Theme 的母版页,回到控制器,加一个 ThemedAttribute(当然,我们得 using Orchard.Themes;),如下:

[Themed]
public ActionResult Index()
{
    // Create a new shape using the "New" property of IOrchardServices.
    var shape = _services.New.ShoppingCart();

    // Return a ShapeResult
    return new ShapeResult(this, shape);
}

这个时候,再次运行,得到了如下的理想效果:

image

 

 

总结

1:前台的展现,主要通过 MVC 的控制器来实现的,而后台则绕开了控制器;

2:业务逻辑,使用 Service 机制,而不是我们自己瞎写的类和逻辑(当然,也可以),但 Service 机制看上去更 Orchard;

3:前后台创建 Shape 的方式是不一样的。

Creative Commons License本文基于 Creative Commons Attribution 2.5 China Mainland License发布,欢迎转载,演绎或用于商业目的,但是必须保留本文的署名 http://www.cnblogs.com/luminji(包含链接)。如您有任何疑问或者授权方面的协商,请给我留言。
目录
相关文章
|
4月前
|
移动开发 小程序 JavaScript
跨端技术问题之转Web运行时的“框架”模块主要负责什么功能
跨端技术问题之转Web运行时的“框架”模块主要负责什么功能
|
移动开发 JSON 前端开发
|
缓存 API 数据安全/隐私保护
|
XML Android开发 iOS开发
|
测试技术 Python
【第五篇-完结篇】XiaoZaiMultiAutoAiDevices之改造扩展
在前面系列文章中有讲到,使用configparser,ini格式的文件作为配置文件,在新增或者删除其中的值时,会丢失所有注释,所以在框架源码注释中我有写到,如果对这方面比较介意或者是有需求的话,可以进行更改配置文件。
130 0
|
前端开发 JavaScript 微服务
微服务项目:尚融宝(13)(前端平台:搭建管理平台前端程序)
vue-element-admin是基于element-ui 的一套后台管理系统集成方案。
微服务项目:尚融宝(13)(前端平台:搭建管理平台前端程序)
|
缓存 领域建模 数据库
cloud Alibaba电商后台组件实战:架构演进,了解领域驱动设计,项目公共模块编写(1)
cloud Alibaba电商后台组件实战:架构演进,了解领域驱动设计,项目公共模块编写(1)
cloud Alibaba电商后台组件实战:架构演进,了解领域驱动设计,项目公共模块编写(1)
|
数据可视化 前端开发 API
App低代码开发的最终形态?APICloud可视化开发初体验
作为一名APICloud 老用户,最近看到APICloud Studio 3 新增了可视化编辑工具,第一时间体验了下。
172 0
App低代码开发的最终形态?APICloud可视化开发初体验
下一篇
无影云桌面