Orchard模块开发全接触3:分类的实现及内容呈现(Display)

简介: 一:分类用现有技术怎么实现? 实际就是创建 Query 和 Projection,如果不知道怎么做,参考:Orchard之在前台显式一个属于自己的列表(在这篇里,还进行了稍稍拓展),当然,基础的知道,我们可以参考 Orchard 相关文档,不难。

一:分类用现有技术怎么实现?

实际就是创建 Query 和 Projection,如果不知道怎么做,参考:Orchard之在前台显式一个属于自己的列表(在这篇里,还进行了稍稍拓展),当然,基础的知道,我们可以参考 Orchard 相关文档,不难。

1.1 当前这种模式的缺点

这种模式的缺点就是,你要么查询 Book ,要么查询 DVD,

image

不能查询全部的 Product,这样一来,我们又要自己写代码了。

 

二:更新 Module.txt

因为我们的模块依赖一个特性, Orchard.Projections,所以,修改为:

name: tminji.shop
antiforgery: enabled
author: tminji.com
website: http://www.tminji.com
version: 1.0.0
orchardversion: 1.0.0
description: The tminji.com module is a shopping module.
Dependencies: Orchard.Projections
features:
    shop:
        Description: shopping module.
        Category: ASample

 

三:创建 Filter

然后,

1:增加 Filters 文件夹;

2:创建 ProductPartFilter.cs,如下:

using Orchard.Localization;
using Orchard.Mvc.Filters;
using Orchard.Projections.Descriptors.Filter;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using TMinji.Shop.Models;

namespace TMinji.Shop.Filters
{
    public class ProductPartFilter : Orchard.Projections.Services.IFilterProvider
    {
        public Localizer T { get; set; }

        public ProductPartFilter()
        {
            T = NullLocalizer.Instance;
        }

        public void Describe(DescribeFilterContext describe)
        {
            describe.For(
                "Content",          // The category of this filter
                T("Content"),       // The name of the filter (not used in 1.4)
                T("Content"))       // The description of the filter (not used in 1.4)

                // Defines the actual filter (we could define multiple filters using the fluent syntax)
                .Element(
                    "ProductParts",     // Type of the element
                    T("Product Parts"), // Name of the element
                    T("Product parts"), // Description of the element
                    ApplyFilter,        // Delegate to a method that performs the actual filtering for this element
                    DisplayFilter       // Delegate to a method that returns a descriptive string for this element
                );
        }

        private void ApplyFilter(FilterContext context)
        {

            // Set the Query property of the context parameter to any IHqlQuery. In our case, we use a default query
            // and narrow it down by joining with the ProductPartRecord.
            context.Query = context.Query.Join(x => x.ContentPartRecord(typeof(ProductPartRecord)));
        }

        private LocalizedString DisplayFilter(FilterContext context)
        {
            return T("Content with ProductPart");
        }
    }

}

现在,在后台,就可以看到这个 Filter 了,如下:

 

image

现在,我们增加这个 filter,就可以得到结果了,如下:

image

我们添加 Projection(不再赘述),然后在前台显式出来:

image

 

四:内容呈现(Dispaly)

但是,我们发现一个问题,就是 Price 和 SKU 并没有呈现出来,包括我们点击 More ,也并没有出现这些我们的核心数据。

还记得什么没有,我们在后台创建 Book 或者 DVD 的时候,一开始根本没有保存上,是因为我们没有在 Driver 中存在返回 DriverResult 的方法,以及定义对应的 cshtml 文件,现在,让我们来完成这件事情。

首先,修改 ProductPartDriver 类,增加方法:

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

前台在呈现含有 ProductPart 的页面的时候,会调用这个 Display 方法。根据这个方法,我们知道,创建了一个 Parts_Product 的 shape,它对应的 cshtml 文件是:

Views/Parts/Product.cshtml

现在,我们来创建这个文件:

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

然后,记住,修改我们的 placement.info:

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

大功告成,见:

image

 

参考:http://skywalkersoftwaredevelopment.net/blog/writing-an-orchard-webshop-module-from-scratch-part-1

Creative Commons License本文基于 Creative Commons Attribution 2.5 China Mainland License发布,欢迎转载,演绎或用于商业目的,但是必须保留本文的署名 http://www.cnblogs.com/luminji(包含链接)。如您有任何疑问或者授权方面的协商,请给我留言。
目录
相关文章
|
6月前
|
API 前端开发 Python
【鸿蒙软件开发】ArkTS基础组件之Rating(评分组件)、RichText(富文本显示)
【鸿蒙软件开发】ArkTS基础组件之Rating(评分组件)、RichText(富文本显示)
342 0
【鸿蒙软件开发】ArkTS基础组件之Rating(评分组件)、RichText(富文本显示)
|
2月前
|
数据可视化 前端开发
Twaver-HTML5基础学习(39)鹰眼可视化视图组件(OverView)
本文介绍了如何在Twaver-HTML5中使用鹰眼(Overview)可视化视图组件,它作为Network的缩略图,允许用户通过缩略图导航Network,支持单击、双击和框选操作来控制Network视图。
38 5
Twaver-HTML5基础学习(39)鹰眼可视化视图组件(OverView)
|
3月前
|
前端开发 开发者
Vaadin Grid的秘密武器:打造超凡脱俗的数据展示体验!
【8月更文挑战第31天】赵萌是一位热爱UI设计的前端开发工程师。在公司内部项目中,她面临大量用户数据展示的挑战,并选择了功能强大的Vaadin Grid来解决。她在技术博客上分享了这一过程,介绍了Vaadin Grid的基本概念及其丰富的内置功能。通过自定义列和模板,赵萌展示了如何实现复杂的数据展示。
41 0
|
5月前
|
编解码 前端开发 JavaScript
带您一步步构建一个基本的动态新闻网站,包括页面布局、样式设计以及交互效果的实现
【6月更文挑战第14天】构建动态新闻网站实战项目,涉及页面布局、样式设计和交互实现。首页采用顶部导航栏、轮播图和新闻列表布局;新闻列表页按分类显示新闻,详情页展示完整内容并可添加相关推荐和评论。设计注重色彩搭配、字体选择和布局间距,实现轮播图效果、导航栏交互和响应式设计,提升用户体验。该项目有助于锻炼HTML和CSS技能,理解网页设计实际应用。
132 1
文本,Vitepress的优势之处,配合Typora进行页面撰写可以同步设计相同的HTML页面
文本,Vitepress的优势之处,配合Typora进行页面撰写可以同步设计相同的HTML页面
|
前端开发
|
前端开发 搜索推荐 索引
重学前端 5 # 如何运用语义类标签来呈现Wiki网页?
重学前端 5 # 如何运用语义类标签来呈现Wiki网页?
120 0
重学前端 5 # 如何运用语义类标签来呈现Wiki网页?
|
前端开发
前端工作总结147-custom组件
前端工作总结147-custom组件
112 0
前端工作总结147-custom组件
|
Web App开发 JavaScript 前端开发
下一篇
无影云桌面