Creating a Layout – Part II

In the last blog, we had created a layout with the static html. Now lets break this html into components and bind it all on the layout.

  1. Go to Dummy Website solution in Visual Studio.
  2. Lets create a Header component first.
  3. Create a view named “Header” and copy entire Header tag html markup in it.
    153
  4. Enter below line in place of Header tag markup in Main.cshtml
    @Html.Sitecore().Rendering(“”)
    154
  5. Go to Sitecore (http://sitecoredemo.dev.local/sitecore) >> Content Editor.
  6. Go to Rendering item (/sitecore/layout/Renderings) and create a Rendering folder and name it “Sitecore Demo”.
  7. Right Click on the new folder >> Insert >> View Rendering.
    155
  8. Enter the value “/Views/Header.cshtml” in Path field.
    156
  9. Publish the rendering item.
  10. Note the id of the Rendering from the Quick Info.
    157
  11. Switch back to Visual studio and go to Main.cshtml
  12. Paste the GUID copied from Sitecore.
    158
  13. And the above steps means that we have bound the Header component to the layout statically.
  14. Lets go to Header.cshtml
  15. Create one more view with Name “Navigation”. And copy the html markup {a div with id “sticky-header”} in it.
    159
  16. Enter below line in place of a div tag markup in Header.cshtml
    @Html.Sitecore().Rendering(“”)
    We will add the GUID once the rendering is created in Sitecore.
    160
  17. Lets auto generate the Template.cs using Unicorn and T4 templates. Please follow this blog.
  18. The difference is in the blog, I have created templates under Sitecore Demo directly and in this dummy site we have folders like Common, Containers, etc.
  19. So we need to do 2 changes, one in Unicorn.tt file and other in templates.tt file.
  20. In unicorn.tt file, we need to add a keyword “partial” before class.
    161
  21. In templates.tt file, we need to add one parameter “model” so we can mention the name of folders under Sitecore Demo folder in this parameter.
    162
  22. We will remain the Templates.tt file to Common_Templates.tt file.
  23. Accordingly, we will copy paste the Common_Templates.tt file and rename the new file to Identity_Templates.tt file.
  24. Change the model parameter to “Identity” and Save the file.
    163
  25. Similarly do it for Navigation and Social Media.
    164
  26. Publish the solution from Visual Studio.
  27. Lets go to Header.cshtml file. Add the required namespaces.
    @using Sitecore
    @using Sitecore.Mvc
    @using Sitecore.Data
    @using Sitecore.Data.Items
    @using DummyWebsite
  28. Fetch the Home Item so that we can access the Logo image.
    @{
    Database currentDb = Sitecore.Context.Database; //Extract the current Db
    Item homeItem = currentDb.GetItem(“”); //Get the item /sitecore/content/Home
    }
    165
  29. Once the item is extracted, we need to get the Image (Logo) and link in the View.
    166
  30. Use the below code to get the Link and Image in the View. At the same time, we want image inside Link.
    @Html.Sitecore().Field(“Link”, homeItem,
    new {text = @Html.Sitecore().Field(“Image”, homeItem) })
    167
  31. Publish the View & Browse the Front end (http://sitecoredemo.dev.local/en)
    168
  32. The logo started appearing and it is linked to the home page.
  33. Fetch Contact information items.
    169
  34. Use the below code to fetch the items.
    Item contactItem1 = currentDb.GetItem(“{590EE89D-444E-40CE-9193-B78A2DC325E6}”);
    Item contactItem2 = currentDb.GetItem(“{4DC1BCC5-DB9A-4019-9FAF-5454A8E64E0B}”);
    170
  35. Fetch the Text field to populate its value in the View.
    171
  36. Create a Dictionary item as “Quote” under Q. And publish the Q item.
    172
  37. Use the below code to fetch the dictionary item in the View.
    @Sitecore.Globalization.Translate.Text(“Quote”, “Fallback Text”)
    173
  38. Publish the View and Browse the front end.
    174
  39. We are almost done. We will create one controller rendering for Navigation and we are done.
  40. Lets create a Controller and name it NavigationController.
    175
  41. Delete the folder created under View.
  42. Change the name of method to HeaderNav instead of Index. And add the below code to it.
    //Get the current DB
    Database currentDb = Sitecore.Context.Database;
    //Get the datasource
    string dataSourcePath = RenderingContext.Current.Rendering.DataSource;
    Item dataSource = currentDb.GetItem(dataSourcePath);
    //Get the list of Navigation Items from the datasource
    List<Item> navigationItems = dataSource.GetChildren().ToList();
    //Pass the list of Items as a Model to the View
    return View(“/Views/Navigation.cshtml”, navigationItems);
    176
  43. Go to Navigation.cshtml file. Add the namespaces and model & also check if the Model is null.
    @using Sitecore
    @using Sitecore.Mvc
    @using Sitecore.Data
    @using Sitecore.Data.Items
    @using DummyWebsite@model List<Item>

    @if(Model == null || Model.Count <= 0)
    {
    return;
    }
    177

  44. Fetch the Home Item and replace the logo and link in the logo div. The same way as we did in the Header.cshtml. You can copy paste the code snippets.
    178
  45. Now since we have List of items as a Model we need to write a foreach loop for these items. The li tags under ul tag will be under Foreach loop so that li tags are generated programatically.
    @foreach (Item menuItem in Model)
    {
    if (menuItem.GetChildren().Count > 0)
    {
    <li>
    @Html.Sitecore().Field(Templates.NavigationLink.Fields.Link_FieldName, menuItem,
    new {text = @Html.Sitecore().Field(
    Templates.NavigationLink.Fields.Title_FieldName, menuItem) + “<i class=\”ti-angle-down\”></i>”})
    <ul class=”submenu”>
    @foreach (Item childMenuItem in menuItem.GetChildren())
    {
    <li>
    @Html.Sitecore().Field(Templates.NavigationLink.Fields.Link_FieldName, childMenuItem,
    new {text = @Html.Sitecore().Field(
    Templates.NavigationLink.Fields.Title_FieldName, childMenuItem) })
    </li>
    }
    </ul>
    </li>
    }
    else
    {
    <li>
    @Html.Sitecore().Field(Templates.NavigationLink.Fields.Link_FieldName, menuItem,
    new {text = @Html.Sitecore().Field(
    Templates.NavigationLink.Fields.Title_FieldName, menuItem) })
    </li>
    }
    }
    179
  46. Publish the Visual Studio solution.
  47. Go to Sitecore >> Content Editor >> Renderings >> Sitecore Demo
  48. Create a Controller Rendering and Name it “Header Navigation”.
  49. There are 2 fields that we need to fill for the Controller rendering item i.e. Controller and Controller Action. In Controller field, we give the value as AssemblyName.Controllers.ControllerName, AssemblyName & in the Controller Action, we give method name. So accordingly, we will give below values.
    Controller: DummyWebsite.Controllers.NavigationController, DummyWebsite
    Controller Action: HeaderNav
    180
  50. Lets give the Header Links content we created under Global item (/sitecore/content/Global/Navigation/Header) as datasource to it.
    181
  51. Publish this rendering and note its GUID from the Quick info.
  52. Go to Header.cshtml and add the GUID of this rendering.
    182
  53. Publish the Header.cshtml file and reload the Front end.
    183

And we are done with Header component for Layout. Similarly, we have to create for 3 more components – Estimation Forms, Social Media section & Footer.

We will do it in our next blog as this blog will become lengthy.

Thank you.. Keep Learning.. Keep Sitecoring.. 🙂

2 thoughts on “Creating a Layout – Part II

  1. Pingback: Creating a Layout – Part I | Sitecore Dairies

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s