1

We are using DXA, Razor views with Web Components. For Menu (see below) there will be also JSON format needed in the interface.
Sample is assigning JSON string to attribute site-menu. Best way to do it?

  1. Generate the Json in the Razor view.
    Performance impact?

  2. Prepare new property in model with output for 'site-menu'. Deserialize that with HTML.Raw the view. I saw it contains text with 'alt' it could be wrong here.

  3. Can make a JObject in the model.

         try
         {
             result =
                 new JObject(
                     new JProperty("items",
                                 new JArray(
                                     from item in this.Items
                                     select new JObject(
                                         new JProperty("id", item.DataTaId),
                                         new JProperty("title", this.Title),
                                         new JProperty("url", item.Link),
                                         new JProperty("overviewLink", item.Title),
                                         new JProperty("active", false),
                                         new JProperty("expanded", false),
                                         new JProperty("subItems",
                                 new JArray(
                                     from subitem in item.Items
                                     select new JObject(
                                         new JProperty("id", subitem.DataTaId),
                                         new JProperty("title", subitem.Title),
                                         new JProperty("url", subitem.Link),
                                         new JProperty("active", false))
                                            ))))));
         }
         catch (Exception ex)
         {
         }
         var resultstr = result.ToString();
         return resultstr;
    
  4. Seperate JSON file (and include that if possible).

JSON string should be generated something like this.

<bgl-main-nav slot="mainMenu"
              site-menu='{"items":[{"id":"myId1000","title":"Home","url":"/home","active":false,"iconName":"home"},
                                   {"id":"myId2000","title":"Level 1","url":"/level1","active":false},
                                   {"id":"myId3000","title":"Level 1","url":"/level1","active":false,"overviewLink":"Description of the subhome page of level1","expanded":false,
                          "subItems":[
                                     {"id":"myId3001","title":"Level 2 item 1","url":"/level1/level2item1","active":false},
                                     {"id":"myId3002","title":"Level 2 item 2","url":"/level1/level2item2","active":false}]}],
                        "extraItems":[{"id":"myIdabdc","title":"Customservice","url":"/service","active":false,"iconName":"support"}]}'>
</bgl-main-nav>
4
  • What is the context for your Razor View? Is it the result of a custom Controller action? If so, I would consider letting the controller build a Strongly Typed object model and then serialize it to JSON (using JsonResult). See, for example, NavigationController.SiteMapJson: github.com/sdl/dxa-web-application-dotnet/blob/master/… – Rick Pannekoek Dec 10 '20 at 7:16
  • JSON Content for Menu and Footer is used on every page. Structure schema/model is not the same as JSON structure. If SiteMapJson() idea can be used for menu and footer where this to add? Must make new helper? – Frits Lesterhuis Dec 10 '20 at 10:53
  • Page template has include page url "system/include/header". That page has menu component and region "Header.cshtml"-> Entity "Menu.cshtml". – Frits Lesterhuis Dec 10 '20 at 12:57
  • I discovered sitemap.xml, navigation.json (PageTemplate 'JSON' is used there). Can I publish the structure site-menu (based on a schema 'menu' ) and add that file in the page on a browser request? On publish there should be code that has the class the should match the site-menu structure. Should I upload an assembly therefor, where? – Frits Lesterhuis Dec 10 '20 at 19:06
1

It seems that you want to implement a (multi-level) menu structure, based on the Navigation Model (navigation.json).

DXA provides OOTB support for top-level navigation, context navigation (siblings of current Page) and breadcrumb navigation. These are methods of the built-in NavigationController which delegates building of the underlying View Model to the configured INavigationProvider.

Note that the built-in StaticNavigationProvider produces the View Model for all three cases by retrieving the full Navigation Model (basically, navigation.json deserialized into an object model) and filtering the results.

If you want to create a multi-level menu structure, you could implement a similar approach in a custom Controller: retrieve the full Navigation Model from the Navigation Provider, extract the relevant entries and let the result be serialized to JSON.

In your example, you’re rendering HTML with embedded JSON, but ypu could let the front-end retrieve the JSON separately. In that manner, you will get the initial Page rendition sooner and the menu will load asynchronously.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.