NOPCommerce 增加功能 颜色和尺码管理研究实现<九>

 

NOPCommerce 增加功能 颜色和尺码管理研究实现<九>：

分类： Nop Commerce 2012-02-25 14:13  35人阅读  评论(0)  收藏  举报

添加颜色和尺码管理菜单（配图是网友使用的Nop1.9修改的效果，本文是2.4 MVC架构下的）：

                             

打开Administration下面的Sitemap:

服装颜色：<siteMapNodetitle="Color attributes" nopResource="Admin.Catalog.Attributes.ColorAttributes"controller="ColorAttribute" action="List"/>

服装尺码：<siteMapNodetitle="Size attributes" nopResource="Admin.Catalog.Attributes.SizeAttributes"controller="SizeAttribute" action="List"/>

同步需要进行的事情：

1． 增加ResourceString: Admin.Catalog.Attributes.ColorAttributes=Color/”颜色”

2．  Admin.Catalog.Attributes.SizeAttributes=Size/”尺码”

   insert into LocaleStringResource

values(1,'Admin.Catalog.Attributes.ColorAttributes','Color Attribute')

insert into LocaleStringResource

values(1,'Admin.Catalog.Attributes.SizeAttributes','Size Attribute')

3． 增加Controller:

具体实现可以参考CheckoutAttributeController.cs

4．       增加Action:public ActionResultList()

        { returnView();        }

增加对应的Partial View

请注意以上只是架构并未实现实际代码，View也没有内容现实

 后台的Mapping代码： Infrastructure\AutoMapperStartupTask.cs||MappingExtensions.cs

using Nop.Admin.Models.Snatches;

using Nop.Core.Domain.Snatches;

通过比对Model和Entity之间的差异：

//Snatch

            Mapper.CreateMap<Snatch,SnatchModel>()

               .ForMember(dest => dest.FriendlyName, mo => mo.MapFrom(src =>src.ProductVariant.Name));

   Mapper.CreateMap<SnatchModel,Snatch>()

                .ForMember(dest => dest.ProductVariantID, mo => mo.Ignore());

//以上方法会在IstartupTask中被调用到：

public static SnatchModel ToModel(thisSnatch entity)

        {

            return Mapper.Map<Snatch, SnatchModel>(entity);

        }

 

        public static Snatch ToEntity(thisSnatchModel model)

        {

            return Mapper.Map<SnatchModel, Snatch>(model);

        }

 

        public static Snatch ToEntity(thisSnatchModel model, Snatchdestination)

        {

            return Mapper.Map(model,destination);

        }

颜色管理
 

接下来要填充点内容了，否则菜单点下去看到空白的View. MVC中先建立Model的类ColorAttributeModel:

[csharp]  view plain copy

1. namespace Nop.Admin.Models.Catalog    public class ColorAttributeModel//  
2.   
3. public class BaseNopEntityModel : BaseNopModel  
4.   
5.     {  
6.   
7.         public virtual int Id { get; set; }  
8.   
9.     }  
10.   
11. [NopResourceDisplayName("Admin.Catalog.Attributes.ColorAttributes.Fields.Name")]  
12.   
13.         [AllowHtml]  
14.   
15.         public string Name { get; set; }        [NopResourceDisplayName("Admin.Catalog.Attributes.ColorAttributes.Fields.ColorImageUrl")]  
16.   
17.         public stringColorImageUrl { get; set;}  

 

 

ColorAttributeController，其中第一个需要完成可以测试的代码，Binding-List Action

  

[csharp]  view plain copy

1. public ActionResultList()  
2.   
3.         {  
4.   
5.             IList<ColorAttributeModel>activityColorAttributeModel=new List<ColorAttributeModel>();  
6.   
7.            activityColorAttributeModel.Add(  
8.   
9.                new ColorAttributeModel(){ Name = "red", ColorImageUrl = "~/content/images/Green.png" }   
10.   
11.                );  
12.   
13.            activityColorAttributeModel.Add(  
14.   
15.             new ColorAttributeModel(){ Name = "black", ColorImageUrl = "~/content/images/Black.png" }  
16.   
17.             );  
18.   
19.             var gridModel = new GridModel<ColorAttributeModel>  
20.   
21.             {  
22.   
23.                Data = activityColorAttributeModel,  
24.   
25.                Total = activityColorAttributeModel.Count()  
26.   
27.             };  
28.   
29.             return View(gridModel);  
30.   
31.              
32.   
33.         }  

 

 

View的主要代码，布局类似上截图：

[html]  view plain copy

1. <table class="adminContent">  
2.   
3.     <tr>  
4.   
5.         <td>  
6.   
7.             @(Html.Telerik().Grid<ColorAttributeModel>(Model.Data)  
8.   
9.                    .Name("colorattributes-grid")  
10.   
11.                    .Columns(columns=>  
12.   
13.                    {  
14.   
15.                         columns.Bound(x =>x.Name)  
16.   
17.                             .Width(300);  
18.   
19.                         columns.Bound(x =>x.ColorImageUrl)  
20.   
21.                                 .Template(  
22.   
23.                                     @<text>  
24.   
25.                                         <img alt="@item.Id"src="@item.ColorImageUrl"/>  
26.   
27.                                     </text>  
28.   
29.                                 ) //通过Template和Link设置链接  
30.   
31.                                 .ClientTemplate("<imgaltimgalt='<#= Id #>' src='<#= ColorImageUrl #>' />");  
32.   
33.                         columns.Bound(x =>x.Id)  
34.   
35.                             .Width(50)  
36.   
37.                             .Centered()  
38.   
39.                             .Template(x =>Html.ActionLink(T("Admin.Common.Edit").Text,"Edit", new{ id = x.Id }))  
40.   
41.                             .ClientTemplate("<a href=\"Edit/<#= Id#>\">" + T("Admin.Common.Edit").Text+ "</a>")  
42.   
43.                             .Title(T("Admin.Common.Edit").Text);  
44.   
45.                    })  
46.   
47. //通过List Action绑定数据源  
48.   
49.                    .DataBinding(dataBinding => dataBinding.Ajax().Select("List", "ColorAttribute"))  
50.   
51.                    .EnableCustomBinding(true))  
52.   
53.         </td>  
54.   
55.     </tr>  
56.   
57. </table>  

 

The URL is incorrectJ//所以如何获取正确的URL需要学习下？很简单，之前有目录service/Media/pictureservice，分析下：

 

关于图片的内容，由PictureService提供

[csharp]  view plain copy

1. public virtual stringGetDefaultPictureUrl(int targetSize = 0, PictureType defaultPictureType = PictureType.Entity)  
2.   
3.         {  
4.   
5. …..  
6.   
7.    string relPath =_webHelper.GetStoreLocation() + "content/images/"+ defaultImageName;  
8.   
9.             if(targetSize == 0)  
10.   
11.                 returnrelPath;  

 

…..

  vardefaultProductPicture = _pictureService.GetPicturesByProductId(product.Id,1).FirstOrDefault();

model.PictureThumbnailUrl= _pictureService.GetPictureUrl(defaultProductPicture, 75, true);