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

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

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>

现在，商品列表上已经有了这个按钮：

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

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>

然后，看到不一样了：

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

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

再次运行：

我们看到，这个页面没有包含当前的 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);
}

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

总结

1：前台的展现，主要通过 MVC 的控制器来实现的，而后台则绕开了控制器；

2：业务逻辑，使用 Service 机制，而不是我们自己瞎写的类和逻辑（当然，也可以），但 Service 机制看上去更 Orchard；

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