How can I add items in accordion using razor?

[Roberto]

https://ej2.syncfusion.com/aspnetcore/documentation/menu/use-case-scenarios?cs-save-lang=1&cs-lang=csharp

 List<object> Items = new List<object>() {

    new {

    text = "Appliances",

    id = "list1",

    child = new List<object>() {

    new {

    text = "Kitchen",

    id = "list1_1",

    child = new List<object>() {

    new { id = "list1_1_1" , text= "Electric Cookers" },

    new { id = "list1_1_2" , text= "Coffee Makers" },

    new { id = "list1_1_3" , text= "Blenders" }

    }

    },

    new {

    text = "Washing Machine",

    id = "list1_2",

    child = new List<object>() {

    new { id = "list1_2_1" , text= "Fully Automatic" },

    new { id = "list1_2_2" , text= "Semi Automatic" }

    }

    },

    new {

    text = "Air Conditioners",

    id = "list1_3",

    child = new List<object>() {

    new { id = "list1_3_1" , text= "Inverter ACs" },

    new { id = "list1_3_2" , text= "Split ACs" },

    new { id = "list1_3_3" , text= "Window ACs" }

    }

    }

    }

    },

    new {

    text = "Accessories",

    id = "list2",

    child = new List<object>() {

    new {

    text = "Mobile",

    id = "list2_1",

    child = new List<object>() {

    new { id = "list2_1_1", text= "Headphones" },

    new { id = "list2_1_2", text= "Memory Cards" },

    new { id = "list2_1_3", text= "Power Banks" }

    }

    },

    new {

    text = "Computer",

    id = "list2_2",

    child = new List<object>() {

    new { id = "list2_2_1", text= "Pendrives" },

    new { id = "list2_2_2", text= "External Hard Disks" },

    new { id = "list2_2_3", text= "Monitors" }

    }

    }

    }

    },

    new {

    text = "Fashion",

    id = "list3",

    child = new List<object>() {

    new { id= "list3_1", text = "Men" },

    new { id= "list3_2", text = "Women" }

    }

    },

    new {

    text = "Home & Living",

    id = "list4",

    child = new List<object>() {

    new { id= "list4_1", text = "Furniture" },

    new { id= "list4_2", text = "Decor" }

    }

    },

    new {

    text = "Entertainment",

    id = "list5",

    child = new List<object>() {

    new { id= "list5_1", text = "Televisions" },

    new { id= "list5_2", text = "Home Theatres" },

    new { id= "list5_3", text = "Gaming Laptops" },

    }

    }

    };

        ViewBag.Items = Items;

  <ejs-accordion id="accordionMenu" clicked="clicked" items="@ViewBag.Items">

                        <e-accordion-accordionitems >

                        </e-accordion-accordionitems>

                    </ejs-accordion>

[Ruksar Moosa Sait]

Hi Roberto,

We have checked on your query and suggest you to set the accordionItems to the ViewBag.items like the below code to meet your requirement.

[Index.cshtml]

<ejs-accordion id="accordionMenu" items="ViewBag.items"></ejs-accordion>

[HomeController.cs]

public IActionResult Index()

        {

            List<AccordionAccordionItem> accordionItems = new List<AccordionAccordionItem>();

            accordionItems.Add(new AccordionAccordionItem

            {

                Header = "ASP.NET",

                Expanded = true,

                Content = "Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services.",

            });

            accordionItems.Add(new AccordionAccordionItem

            {

                Header = "ASP.NET MVC",

                Content= "The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller.",

           });

            accordionItems.Add(new AccordionAccordionItem

            {

                Header = "JavaScript",

                Content = "JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.",

            });

            ViewBag.items = accordionItems;

            return View();

        }

Output:

Kindly try the attached sample and let us know if this meets your requirement.

Regards,

Ruksar Moosa Sait

Attachment: Asp.netCoreAccordionItemModel_dc4d7b55.zip

[Roberto]

HI it´s working.

But 

As the example above shows, we have an accordion inside an accordion and by the structure of the AccordionAccordionItem class, the content property is a string. How to put an accordion inside an accordion using razor?

thanks

[Ruksar Moosa Sait]

Hi Roberto,

We have checked on your query and suggest you set the id value of the nested accordion to the Content of the parent accordion like the below code snippet to achieve a nested Accordion. Kindly try the attached sample and let us know if this meets your requirement.

[Index.cshtml]

<ejs-accordion id="Parent" items="ViewBag.ParentAccordion" ></ejs-accordion>

<ejs-accordion id="Nested" items="ViewBag.NestedAccordion"></ejs-accordion>

[HomeController.cs]

public IActionResult Index()

        {

            //Parent Accordion

            List<AccordionAccordionItem> AccordionItems = new List<AccordionAccordionItem>();

            AccordionItems.Add(new AccordionAccordionItem

            {

                Header = "Videos",

                Content = "#Nested",

                Expanded = true,

            });

            AccordionItems.Add(new AccordionAccordionItem

            {

                Header = "Music",

                Content = "Music is an arrangement of sounds having melody, rhythm, and usually harmony classical music."

            });

            AccordionItems.Add(new AccordionAccordionItem

            {

                Header = "Images",

                Content = "Images are a representation of the external form of a person or thing in art."

            });

            ViewBag.ParentAccordion = AccordionItems;

 

            //Nested Accordion

            List<AccordionAccordionItem> NestedItems = new List<AccordionAccordionItem>();

            NestedItems.Add(new AccordionAccordionItem

            {

                Header = "Video 1",

                Content = "Content video 1"

            });

            NestedItems.Add(new AccordionAccordionItem

            {

                Header = "Video 2",

                Content = "Content video 2"

            });

            NestedItems.Add(new AccordionAccordionItem

            {

                Header = "Video 3",

                Content = "Content video 3"

            });

            ViewBag.NestedAccordion = NestedItems;

            return View();

        }

Output:

Regards,

Ruksar Moosa Sait

Attachment: Asp.netCoreNestedAccordionrazor_3a983a5f.zip

[Roberto]

Hi,

It is working.

thanks for your help.

[Ravikumar Venkatesan]

Hi Roberto,

Thanks for the update.

We are happy that our solution works for you.

Regards,

Ravikumar Venkatesan