多级手风琴式导航

先上效果图： 

贴上代码：

@(Html.DevExtreme().Accordion()
        .ID("accordion-drawer")       
        .DataSource(ds => ds.Mvc()
            .Controller("SampleData")
            .LoadAction("GetMenuItems")
        )
        .DataSourceOptions(d => d.Paginate(false))
        .AnimationDuration(300)
        .Width(300)
        .Collapsible(true)
        .Multiple(false)
        .ItemTitleTemplate(new TemplateName("itemTitleTemplate"))
        .ItemTemplate(new TemplateName("drawerTemplate"))
        .OnItemTitleClick("accordionTitleClick")
)

@using (Html.DevExtreme().NamedTemplate("drawerTemplate"))
{
<div>
    <%
    var nextAccordionId = "accordion-drawer" + id;
    if (!isNav) {
    %>
    @(Html.DevExtreme().List()
                            .Height("auto")
                            .DataSource(new JS("items"))
                            .OnItemClick("drawerItemClick")
                        )
    <% } else{%>

    @(Html.DevExtreme().Accordion()
                          .ID(new JS("nextAccordionId"))
                       .DataSource(ds => ds.Mvc()
                           .Controller("SampleData")
                           .LoadAction("GetMenuItems")
                           .LoadParams(new { id = new JS("id") })
                       )
                       .AnimationDuration(300)
                       .Collapsible(true)
                       .Multiple(false)
                       .ItemTitleTemplate(new TemplateName("itemTitleTemplate"))
                       .ItemTemplate(new TemplateName("drawerTemplate"))
                       .OnItemTitleClick("accordionTitleClick")       
                   )
    <% }%>
</div>
}

@using (Html.DevExtreme().NamedTemplate("itemTitleTemplate"))
{
    <div><%-text%></div>
}
<script>
    // 展开菜单
    function accordionTitleClick(e) {
        //  console.log(e);
    }
    // 打开菜单页面
    function drawerItemClick(e) {
        // console.log(e)
        if (e.itemData.url) {
            window.location.href = e.itemData.url;
        }
    }
</script>

GetMenuItems 数据源截图：

提醒：DataSource(new JS("items")) 这里绑定的数据就是上面截图里面的  items对象。