Topics

All topics

Site components

Create the City page
Tutorial

This article contains
NEW TO SITEFINITY?

This page displays detailed information for a specific city. Hotels and restaurant suggestions are listed as well. In addition, it displays information about other places in the country of the current city

Display the detail information about a city 

You can display detailed information about a city by dropping the Cities widget on the page and configuring it to display only city details. In order to do that, select the One particular city only... option and do not select a specific city. This way, the cities widget displays only details view of the currently navigated in URL city. For example, ~/city/united-states-of-america/new-york. You also set the Details item template of the cities widget to My vacation - Full city content template.

The following screenshot shows the display of Cities widget:

travelling agency8

Use the following markup for My vacation - Full city content template:

<layouttemplate>
<div class="" data-sf-provider='<%# Eval("Provider.Name")%>' data-sf-id='<%# Eval("Id")%>' data-sf-type="Telerik.Sitefinity.DynamicModules.Model.DynamicContent">
<div class="row-holder">
<div class="txt-centered font-metric txt-uppercase h4 txt-lighter m-bottom-md-minus"><%# Eval("ParentItem.Name") %></div>
<sf:SitefinityLabel ID="mainShortTextFieldLiteral" runat="server" Text='<%# Eval("Name") %>' WrapperTagName="h1" HideIfNoText="true" CssClass="txt-centered font-metric" data-sf-field="Name" data-sf-ftype="ShortText" />
<sf:SitefinityLabel ID="SitefinityLabel1" runat="server" Text='<%# Eval("History")%>' WrapperTagName="div" HideIfNoText="true" CssClass="m-bottom-xl" data-sf-field="History" data-sf-ftype="LongText"/>
<ul class="list-unstyled txt-centered devider-top-md devider-bottom-md h6 m-bottom-xl-minus">
<li class="item-inline"><a href="<%# ((DynamicContent)Container.DataItem).GetDefaultLocation() %>" class="pill active" >Overview</a></li>
<li class="item-inline"><a href="<%# ((DynamicContent)Container.DataItem).GetLocationAtIndex(2) %>" class="pill" >Hotels</a></li>
<li class="item-inline"><a href="<%# ((DynamicContent)Container.DataItem).GetLocationAtIndex(1) %>" class="pill" >Restaurants</a></li>
</ul>
</div>
<div class='map-wrp map-and-img txt-centered'>
<sf:AddressField ID="AddressField1" runat="server" DataFieldName="Location" IsMapExpanded="false" AddressTemplate="" />
<div class="img-panoramic">
<img src='<%# Eval("MainPicture.MediaUrl")%>' alt='<%# Eval("MainPicture.AlternativeText")%>' title='<%# Eval("MainPicture.Title") %>' />
</div>
</div>
</div>
</layouttemplate>
view raw MyVacationFullCity_Template.ascx hosted with ❤ by GitHub
  • To display the name of the country where the city is locate, you can use the auto generated ParentItem property. For each item of child type, in dynamic module hierarchy, Sitefinity CMS generates system property ParentItem that can be used in the templates for retrieving information about the parent item.
    In this case, if you want to display the name of the country, the current city is located in, add <%# Eval("ParentItem.Name") %> statement to the city details template. 
    For more information, see For developers: Property descriptor.
  • Show links to other pages with contextual information about the current city. If you want to navigate to page ~/hotels and want to display contextual information about the current city, yet displaying all hotels in it, you need to generate a link like ~/hotels/united-states-of-america/new-york. Using the locations service in Sitefinity CMS, you can get a link to all pages that display information about specific type, in this case - City. Using the DynamicContentExtensions GetLocationAtIndex method, you can get URL at a specific location index – <a href="<%# ((DynamicContent)Container.DataItem).GetLocationAtIndex(2) %>" class="pill" >Hotels</a>
    In a similar manner, you can get the link to the ~/restaurants page and display all restaurants for current country. 

    NOTE: Hotels and Restaurants pages must contain Hotels and Restaurants widgets that are configured to display items from currently opened City.

Display the top hotels in a city 

Hotels are direct children of the currently opened in the URL item (city) and you can display them by dropping the Hotels widget on the page, and configuring it to display hotels From the currently open city. In addition, you need to set details page for the hotels to be the Hotel page. As list item template, select My vacation - List of hotels - Thumbnail And All hotels Link.

The following screenshot shows the display of Hotels widget:

travelling agency9

Use the following markup for List of hotels - Thumbnail And All hotels Link template:

<sf:sitefinitylabel id="title" runat="server" wrappertagname="div" hideifnotext="true" hideifnotextmode="Server" cssclass="sfitemFieldLbl" />
<telerik:RadListView ID="dynamicContentListView" ItemPlaceholderID="ItemsContainer" runat="server" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false">
<LayoutTemplate>
<ul class="list-unstyled m-top-md m-bottom-md">
<asp:PlaceHolder ID="ItemsContainer" runat="server" />
</ul>
</LayoutTemplate>
<ItemTemplate>
<li class="one-of-4 item-inline m-bottom-xl" data-sf-provider='<%# Eval("Provider.Name")%>' data-sf-id='<%# Eval("Id")%>' data-sf-type="Telerik.Sitefinity.DynamicModules.Model.DynamicContent">
<div class="thumbnail">
<img src='<%# MediaContentExtensions.ResolveThumbnailUrl(((MediaContent)Eval("MainPicture")), "v230-230", true) %>' alt='<%# Eval("MainPicture.AlternativeText")%>' title='<%# Eval("MainPicture.Title") %>' />
</div>
<h3 class="h4 m-top-xs txt-overflow">
<sf:detailsviewhyperlink id="DetailsViewHyperLink" textdatafield="Name" runat="server" data-sf-field="Name" data-sf-ftype="ShortText" tooltip='<%# Eval("Name") %>' />
</h3>
<div class="txt-smaller txt-attention rating-<%# Eval("Rating")%>"></div>
<div class='txt-smaller txt-light devider-top'>
<sf:addressfield runat="server" datafieldname="Location" ismapexpanded="false" addresstemplate="#=City# #=Country#" />
</div>
</li>
</ItemTemplate>
</telerik:RadListView>
<sf:pager id="pager" runat="server"></sf:pager>
<asp:PlaceHolder ID="socialOptionsContainer" runat="server"></asp:PlaceHolder>
<sf:dynamicdetailcontainer id="parentDetailContainer" runat="server">
<LayoutTemplate>
<p class="centered" style="text-align: center;">
<a href="<%# ((DynamicContent)Container.DataItem).GetLocationAtIndex(2) %>" class="button" >All hotels</a>
</p>
</LayoutTemplate>
</sf:dynamicdetailcontainer>
view raw HotelsListHotels_Template.ascx hosted with ❤ by GitHub

Display the top restaurants in a city

Restaurants are direct children of a City. This means that you can apply the same configuration as for the Hotels widget above. For displaying restaurants list, you use the My vacation - List of restaurants - Thumbnail and All restaurants Link template.

The following screenshot shows the display of Restaurants widget:

travelling agency10 

Use the following markup for  My vacation - List of restaurants - Thumbnail and All restaurants Link template:

<telerik:RadListView ID="dynamicContentListView" ItemPlaceholderID="ItemsContainer" runat="server" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false">
<LayoutTemplate>
<ul class="list-unstyled m-top-md m-bottom-md">
<asp:PlaceHolder ID="ItemsContainer" runat="server" />
</ul>
</LayoutTemplate>
<ItemTemplate>
<li class="one-of-4 item-inline m-bottom-xl" data-sf-provider='<%# Eval("Provider.Name")%>' data-sf-id='<%# Eval("Id")%>' data-sf-type="Telerik.Sitefinity.DynamicModules.Model.DynamicContent">
<div class="thumbnail">
<img src='<%# MediaContentExtensions.ResolveThumbnailUrl(((MediaContent)Eval("MainPicture")), "v230-230", true) %>' alt='<%# Eval("MainPicture.AlternativeText")%>' title='<%# Eval("MainPicture.Title") %>' />
</div>
<h3 class="h4 m-top-xs txt-overflow">
<sf:detailsviewhyperlink id="DetailsViewHyperLink" textdatafield="Name" runat="server" data-sf-field="Name" data-sf-ftype="ShortText" />
</h3>
<div class='txt-smaller txt-light devider-top'>
<sf:addressfield runat="server" datafieldname="Location" ismapexpanded="false" addresstemplate="#=City# #=Country#" />
</div>
</li>
</ItemTemplate>
</telerik:RadListView>
<sf:pager id="pager" runat="server"></sf:pager>
<asp:PlaceHolder ID="socialOptionsContainer" runat="server"></asp:PlaceHolder>
<sf:dynamicdetailcontainer id="parentDetailContainer" runat="server">
<LayoutTemplate>
<p class="centered" style="text-align: center;">
<a href="<%# ((DynamicContent)Container.DataItem).GetLocationAtIndex(1) %>" class="button" >All restaurants</a>
</p>
</LayoutTemplate>
</sf:dynamicdetailcontainer>
view raw RestaurantsListRestaurants_Template.ascx hosted with ❤ by GitHub

Show additional interesting places in the country of the city

When you are in a specific city, you may want to display additional information about the country that may be interesting for the users. Displaying information about the current country of the displayed city means displaying information about the parent item – Country.

To show information about the cities and festivals in a country you can drop the Countries widget, and configure it in the following way: 

  1. Select the One particular country only... option and do not select specific country. 
    This sets the mode of the widget to Details.
  2. In Single item settings, set My Vacation - More in Country (List of cities and festivals) template.
  3. Enable the countries widget to resolve a country item when the page URL is similar to ~/city/united-states-of-america/new-york.
    To do that, go to Advanced settings and set ShowDetailsViewOnChildDetailsView property to true. 

The following screenshot shows the display of Countries widget:

travelling agency11 

Configuring the countries widget in this way, gives you the ability to easily display information about it in the widget template. For example, showing cities and festivals requires only two Eval methods and two repeaters.
Use the following markup for My Vacation - More in Country (List of cities and festivals) template:

<layouttemplate>
<div class="">
<h2 class="txt-devider font-metric m-bottom-lg txt-centered">
<span>More in <%# Eval("Name") %></span>
</h2>
<div class="one-of-3 item-inline">
<h4 class="m-top-lg">
Cities
</h4>
<ul class="list-unstyled m-top-sm m-bottom-xl">
<asp:Repeater ID="RepeaterCities" runat="server" DataSource='<%# Eval("Cities") %>'>
<ItemTemplate>
<li>
<a href="<%# ((DynamicContent)Container.DataItem).GetDefaultLocation() %>" class="txt-smaller" ><%# Eval("Name") %></a>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
<div class="one-of-3 item-inline">
<h4 class="m-top-lg">
Festivals
</h4>
<ul class="list-unstyled m-top-sm m-bottom-xl">
<asp:Repeater ID="RepeaterFestivals" runat="server" DataSource='<%# Eval("Festivals") %>'>
<ItemTemplate>
<li>
<a href="<%# ((DynamicContent)Container.DataItem).GetDefaultLocation() %>" class="txt-smaller" ><%# Eval("Name") %></a>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
</div>
</layouttemplate>
view raw CountriesMyVacationMoreInCountry_Template.ascx hosted with ❤ by GitHub

 

To display all cities from a country, you can use the auto generated property Cities to access all child items. 
When child type is added to the module structure, Sitefinity CMS generates automatically property descriptors for each child type and enables you to get all child items an Eval statement.

You can display all Festivals in the same way.

Want to learn more?

Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.

Get started with Integration Hub | Sitefinity Cloud | Sitefinity SaaS

This free lesson teaches administrators, marketers, and other business professionals how to use the Integration hub service to create automated workflows between Sitefinity and other business systems.

Web Security for Sitefinity Administrators

This free lesson teaches administrators the basics about protecting yor Sitefinity instance and its sites from external threats. Configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.

Foundations of Sitefinity ASP.NET Core Development

The free on-demand video course teaches developers how to use Sitefinity .NET Core and leverage its decoupled architecture and new way of coding against the platform.

Was this article helpful?

Next article

Create the Hotel and the Restaurant pages