Custom Products module: Create the products details view

After you Custom Products module: Create the master list view of the Products module frontend, you create the details view that the module uses to load the details for the products. To create the details view:

1. Create the template for the details view:
   1. In Visual Studio, open the context menu of Web folder and click UI » Public.
   2. Click Add » New Item...
   3. Click Visual C# » Code » Code File.
   4. In the Name input field, enter FrontendProductsDetailsView.ascx and then click Add.
   5. Open the newly created file and clear its contents.
   6. Define the markup by pasting the following code:
      <%@ Control Language="C#" %>

      <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

      <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI" Assembly="Telerik.Sitefinity" %>

      <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.ContentUI" Assembly="Telerik.Sitefinity" %>

      <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.PublicControls.BrowseAndEdit" Assembly="Telerik.Sitefinity" %>

      <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.Fields" Assembly="Telerik.Sitefinity" %>

      <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Modules.Comments.Web.UI.Frontend" TagPrefix="comments" %>

       

       

      <telerik:RadListView ID="DetailsView" ItemPlaceholderID="ItemContainer" AllowPaging="False" runat="server" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false">

          <layouttemplate>

              <div class="sfproductsDetails">

                  </div>

                  <asp:PlaceHolder ID="ItemContainer" runat="server" />

              </div>

          </layouttemplate>

          <itemtemplate>

              <h1 class="sfproductsTitle">

                  <asp:Literal ID="Literal1" Text='<%# Eval("Title") %>' runat="server" />          

                  <comments:CommentsCountControl runat="server"

                      ThreadKey='<%# ControlUtilities.GetLocalizedKey((Guid)Eval("Id")) %>'

                      NavigateUrl="#commentsWidget"

                      AllowComments='<%# Eval("AllowComments") %>'

                      DisplayMode="ShortText"

                      ThreadType='<%# Container.DataItem.GetType().FullName %>'/>

       

              </h1>

              <div class="sfproductsAuthorAndDate">

                  <asp:Literal ID="Literal2" Text="<%$ Resources:Labels, By %>" runat="server" />

                  <sf:PersonProfileView runat="server" /> | <sf:FieldListView ID="PublicationDate" runat="server"

                      Format="{PublicationDate.ToLocal():MMM dd, yyyy}" />

              </div>

              <sf:ContentBrowseAndEditToolbar ID="BrowseAndEditToolbar" runat="server" Mode="Edit,Delete,Unpublish"></sf:ContentBrowseAndEditToolbar>

              <sf:FieldListView ID="summary" runat="server" Text="{0}" Properties="Summary" WrapperTagName="div" WrapperTagCssClass="sfproductsSummary"  />

              <div class="sfproductsContent">

                  <asp:Literal ID="Literal3" Text='<%# Eval("Content") %>' runat="server" />

              </div>

       

              <sf:ImageField ID="predefinedImageField" runat="server" DataFieldType="Telerik.Sitefinity.Model.ContentLinks.ContentLink"

                  DisplayMode="Read" ShowDeleteImageButton="false" CssClass="sfprofileField sfprofileAvatar" DefaultSrc="~/SFRes/images/ProductCatalogSample/Images.NoProductImage.png" DataFieldName="ProductImage" />

       

       

              <sf:FieldListView ID="priceControl" runat="server" Text="Price: {0}" Properties="Price" WrapperTagName="div" WrapperTagCssClass="sfproductsSummary"  />

              <sf:FieldListView ID="quantityInStock" runat="server" Text="Quantity in stock: {0}" Properties="QuantityInStock" WrapperTagName="div" WrapperTagCssClass="sfproductsSummary"  />

              <sf:FieldListView ID="whatsInTheBox" runat="server" Text="What is in the box: {0}" Properties="WhatIsInTheBox" WrapperTagName="div" WrapperTagCssClass="sfproductsSummary"  />

       

               <div class='sfitemFlatTaxon sfitemTaxonWrp'>       

                  <sf:SitefinityLabel runat="server" Text='Color:' WrapperTagName="div" HideIfNoText="true" CssClass="sfitemFieldLbl" />

                  <sf:FlatTaxonField runat="server" DisplayMode="Read" WebServiceUrl="~/Sitefinity/Services/Taxonomies/FlatTaxon.svc" TaxonomyId="47fc0316-0f9b-4d6d-a606-6cdc1977e10d" AllowMultipleSelection="false"

                TaxonomyMetafieldName="Colors" Expanded="false" BindOnServer="true" WrapperTagCssClass="sfproductsSummary" />

              </div>

       

              <div class='sfitemFlatTaxon sfitemTaxonWrp'>       

                  <sf:SitefinityLabel runat="server" Text='Tags:' WrapperTagName="div" HideIfNoText="true" CssClass="sfitemFieldLbl" />

                  <sf:FlatTaxonField runat="server" DisplayMode="Read" WebServiceUrl="~/Sitefinity/Services/Taxonomies/FlatTaxon.svc" TaxonomyId="cb0f3a19-a211-48a7-88ec-77495c0f5374" AllowMultipleSelection="true" TaxonomyMetafieldName="Tags" Expanded="false" BindOnServer="true" />

              </div>

               

              <div class='sfitemHierarchicalTaxon sfitemTaxonWrp'>       

                  <sf:SitefinityLabel runat="server" Text='Categories:' WrapperTagName="div" HideIfNoText="true" CssClass="sfitemFieldLbl" />

                  <sf:HierarchicalTaxonField runat="server" DisplayMode="Read" WebServiceUrl="~/Sitefinity/Services/Taxonomies/HierarchicalTaxon.svc" TaxonomyId="e5cd6d69-1543-427b-ad62-688a99f5e7d4" Expanded="false" TaxonomyMetafieldName="Category" BindOnServer="true" />

              </div>

       

           

      <comments:CommentsWidget runat="server"

          ThreadKey='<%# ControlUtilities.GetLocalizedKey((Guid)Eval("Id")) %>'

          AllowComments='true'

          ThreadTitle='<%# Eval("Title") %>'

          ThreadType='<%# Container.DataItem.GetType().FullName %>'

          GroupKey='<%# ControlUtilities.GetUniqueProviderKey("ProductCatalogSample.Data.ProductsManager", Eval("Provider.Name").ToString()) %>' />

       

          </itemtemplate>

      </telerik:RadListView>
   7. In the Properties pane of the FrontendProductsDetailsView.ascx file, change the Build Action to Embedded Resource.
2. Open the context menu of the Web folder and click UI » Public.
3. Click Add » Class...
4. In the Name input field, enter ProductDetailsView.
5. Open the file and add the following namespaces:
   using ProductCatalogSample.Model;

   using Telerik.Sitefinity.Web.UI;

   using Telerik.Sitefinity.Web.UI.ContentUI;

   using Telerik.Sitefinity.Web.UI.ContentUI.Contracts;

   using Telerik.Sitefinity.Web.UI.ContentUI.Views.Backend;

   using Telerik.Sitefinity.Web.UI.Templates;

   using Telerik.Web.UI;
6. Change the class definition to:
   public class ProductDetailsView : ViewBase

   {

   }
7. Mark the class with the following attribute:
   [ControlTemplateInfo("ProductsResources", "ProductDetailViewFriendlyName", "ModuleTitle")]
8. Reference the embedded template by pasting the following code into the class body:
   internal const string layoutTemplateName = "ProductCatalogSample.Web.UI.Public.FrontendProductsDetailsView.ascx";

    

   protected override string LayoutTemplateName

   {

       get

       {

           return null;

       }

   }

    

   public override string LayoutTemplatePath

   {

       get

       {

           return ProductsModule.ProductsVirtualPath + layoutTemplateName;

       }

       set

       {

           base.LayoutTemplatePath = value;

       }

   }
9. Provide a property for accessing the RadListView widget in the template in the following way:
   protected internal virtual RadListView DetailsView

   {

       get

       {

           return this.Container.GetControl<RadListView>("DetailsView", true);

       }

   }
10. Override the InitializeControls method in the following way:
    protected override void InitializeControls(GenericContainer container, IContentViewDefinition definition)

            {

                var detailDefinition = definition as IContentViewDetailDefinition;

                if (detailDefinition != null)

                {

                    var productsView = (ProductsView)this.Host;

                    var item = productsView.DetailItem as ProductItem;

                    if (item == null)

                    {

                        if (this.IsDesignMode())

                        {

                            this.Controls.Clear();

                            this.Controls.Add(new LiteralControl("A product item was not selected or has been deleted. Please select another one."));

                        }

                        return;

                    }

                    else

                    {

                            this.DetailsView.ItemDataBound += new EventHandler<RadListViewItemEventArgs>(DetailsView_ItemDataBound);

                            this.DetailsView.DataSource = new ProductItem[] { item };

                    }

                }

            }
11. Provide the necessary event handlers in the following way:
    private void DetailsView_ItemDataBound(object sender, RadListViewItemEventArgs e)

    {

        if (e.Item.ItemType == RadListViewItemType.DataItem || e.Item.ItemType == RadListViewItemType.AlternatingItem)

        {

     

            var productsView = (ProductsView)this.Host;

            if (productsView.HidePrices)

            {

     

                var priceControl = e.Item.FindControl("priceControl");

                priceControl.Visible = false;

            }

        }

    }
12. Save the file.

    The details view is loaded by the Products view to display details for published items. It inherits from ViewBase.

    In the markup, you first register the necessary assemblies, so that they can be used in the template. You create a RadListView to display the details for the item.

    In the ProductDetailsView.cs file, you reference the RadListView widget from the FrontendProductsDetailsView.ascx by calling GetControl. Next, you override the InitializeControls method to set the data source for the RadListView widget.