Locations module: Create the locations details view

After you Locations module: Create the master list view, you create the details view. You use the details view to load the details for the items. To create the details view:

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

    

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

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

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

    

   <div class="locations-single content">

    

       <telerik:RadListView ID="DetailsView" ItemPlaceholderID="ItemsContainer" runat="server" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false">

           <LayoutTemplate>

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

           </LayoutTemplate>

           <ItemTemplate>

               <div class="column-small">

                   <div class="block">

                       <p id="photo" runat="server"></p>

                       <h1><sf:FieldListView ID="Title" runat="server" Text="{0}" Properties="Title" /></h1>

                       <address>

                           <sf:FieldListView ID="Address" runat="server" Text="{0}" Properties="Address" /><br />

                           <sf:FieldListView ID="City" runat="server" Text="{0}" Properties="City" />

                           <sf:FieldListView ID="Region" runat="server" Text="{0}" Properties="Region" /><br />

                           <sf:FieldListView ID="PostalCode" runat="server" Text="{0}" Properties="PostalCode" /><br />

    

                       </address>

    

                       <p><a href="<%= ResolveUrl(Telerik.Sitefinity.Web.SiteMapBase.GetActualCurrentNode().Url) %>">« All Locations</a></p>

                   </div>

               </div>

           </ItemTemplate>

       </telerik:RadListView>

   </div>
3. In the Properties pane of the DetailsView.ascx file, change the Build Action to Embedded Resource.
4. From the context menu of the Web folder, click UI » Public and then click Add » Class...
5. In the Name input field, enter DetailsView.
6. Add the following namespaces to the DetailsView class:
   using System.Web.UI;

   using LocationsModule.Model;

   using Telerik.Sitefinity.Web.UI;

   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;
7. Change the class definition to:
   public class DetailsView : ViewBase

   {

   }
8. Reference the embedded template by pasting the following code into the class body:
   protected override string LayoutTemplateName

   {

       get { return null; }

   }

    

   public override string LayoutTemplatePath

   {

       get

       {

           var path = "~/LocationTemplates/" + layoutTemplateName;

           return path;

       }

       set

       {

           base.LayoutTemplatePath = value;

       }

   }

    

   internal const string layoutTemplateName = "LocationsModule.Web.UI.Public.Resources.DetailsView.ascx";
9. Provide a property for accessing the RadListView control in the template in the following way:
   protected internal virtual RadListView DetailsViewControl

   {

       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)

    {

        // ensure a valid definition is passed

        var detailDefinition = definition as IContentViewDetailDefinition;

        if (detailDefinition == null) return;

     

        // retrieve item from host control

        var locationsView = (LocationsView)this.Host;

        var item = locationsView.DetailItem as LocationItem;

        if (item == null)

        {

            // no item

            if (this.IsDesignMode())

            {

                this.Controls.Clear();

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

            }

            return;

        }

         

        // show item details

        this.DetailsViewControl.DataSource = new LocationItem[] { item };

    }
11. Save the file.

In the code snippets above, the details view is loaded by the Locations view to display details for published items. The details view inherits from ViewBase. In the markup, you first register the necessary assemblies, so that they can be used in the template. You then create a RadListView to display the details for the item.

In the DetailsView.cs, you reference the RadListView control from the DetailsView.ascx by calling GetControl. Finally you override the InitializeControls method to set the data source for the RadListView control.