1. Home
  2. Forum
  3. ASP.NET Core
  4. Accordion using Razor code doesnt render the ContentTemplate

Accordion using Razor code doesnt render the ContentTemplate

Hi,

I've created a basic page with an Accordion using the code from here: https://help.syncfusion.com/aspnet-core/accordion/getting-started.

My view page looks like this:


but when it renders it looks like this:


5 Replies
MK Muthukrishnan Kandasamy Syncfusion Team March 19, 2020 12:53 PM UTC

 
Thanks for contacting Syncfusion support. 
 
We have validated your reported problem in Accordion control and it is reproducing at our end. We will validate the cause of this issue and resolve it in our future releases.  But, we suggest to use the tag helper for rendering the control in ASP.NET Core project, which is recommended to be used with ASP.NET Core. Content template is working properly when rendering the control using the tag helper syntax. 
 
Please refer the below code block. 
 
[Index.cshtml] 
/*ej-Tag Helper code to render Accordion*/ 
 
<ej-accordion id="basicAccordion1"> 
        <e-accordion-items> 
            <e-accordion-item text="ASP.NET"> 
                <e-content-template> 
                    <div> 
                        Essential Chart for ASP.NET MVC is a visually stunning, high-performance charting component that is easy to use. 
                        It includes 35 chart types ranging from simple column charts to specialized financial charts. 
                        The charts are highly customizable and have a powerful data model that makes data binding simple. 
                    </div> 
                </e-content-template> 
            </e-accordion-item> 
            <e-accordion-item text="ASP.NET MVC"> 
                <e-content-template> 
                    <div> 
                        The Model-View-Controller (MVC) architectural pattern separates an application into three main components: 
                        the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications. The ASP.NET MVC framework is a lightweight, highly testable presentation framework that (as with Web Forms-based applications) is integrated with existing ASP.NET features, such as master pages and membership-based authentication. 
 
                    </div> 
                </e-content-template> 
            </e-accordion-item> 
            <e-accordion-item text="Javascript"> 
                <e-content-template> 
                    <div> 
                        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. More recently, however, 
                        it has become common in both game development and the creation of desktop applications. 
                    </div> 
                </e-content-template> 
            </e-accordion-item> 
        </e-accordion-items> 
    </ej-accordion> 
 
 
We have also prepared sample for your convenience, please refer to the below link for the sample. 
 
 
 
Please refer to the below link for the documentation of Accordion. 
 
 
 
Please refer to the below link for live demo of Accordion control. 
 
 
 
Please let us know, if you need any assistance. 
 
Regards, 
Muthukrishnan K 


DS Derek Smith March 19, 2020 01:44 PM UTC

I don't mind using tag helper, I just can't work out how to build the accordion items dynamically using data from a database. All your examples are hard coded.

MK Muthukrishnan Kandasamy Syncfusion Team March 20, 2020 08:48 AM UTC

 
Thanks for the update. 
 
In previous update, we have suggested to use tag helper to render Accordion control in static content Template. For now, your requirement is to add the Accordion item dynamically. To achieve this requirement, you can use razor syntax. When using razor syntax, we can get the data from view data in the code behind. Please refer to the below code block. 
 
[Index.cshtml] 
 
@{ 
    Html.EJ().Accordion("multiAccordion", (Syncfusion.JavaScript.Models.AccordionProperties)ViewData["accordion"]).Render(); 
} 
 
 
[HomeController.cs] 
 
public IActionResult Index() 
        { 
            AccordionProperties obj = new AccordionProperties(); 
            obj.Items.Add(new AccordionBaseItem() { Text = "ASP.NET", ContentTemplate = new MvcTemplate<AccordionBaseItem> { RazorViewTemplate = (data) => { return "Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web pages use a compiled,……."; } } }); 
            obj.Items.Add(new AccordionBaseItem() { Text = "ASP.NET MVC", ContentTemplate = new MvcTemplate<AccordionBaseItem> { RazorViewTemplate = (data) => { return " The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller……. } } }); 
            obj.Items.Add(new AccordionBaseItem() { Text = "JavaScript", ContentTemplate = new MvcTemplate<AccordionBaseItem> { RazorViewTemplate = (data) => { return "JavaScript (JS) is an interpreted computer programming language."; } } }); 
            obj.EnableAnimation = true; 
            ViewData["accordion"] = obj; 
            return View(); 
        } 
 
 
We have prepared sample for your convenience, please refer to the below link for the sample. 
 
 
If you want to use the static content template in razor syntax while initializing Accordion, then please let us know your exact requirement. We will check consider the previously reported issue with high priority and provide you the patch with the fix. 
 
 
Regards, 
Muthukrishnan K 


DS Derek Smith March 20, 2020 09:18 AM UTC

Brilliant that did the job, thank you.

MK Muthukrishnan Kandasamy Syncfusion Team March 20, 2020 09:21 AM UTC

Hi Derek, 
 
We are glad to know that given solution works. Please let us know if you need any further assistance. 
 
Regards, 
Muthukrishnan K 


Loader.
Up arrow icon