先上效果图：

手风琴式导航_devexpress

 

贴上代码：

@(Html.DevExtreme().Accordion()
　　.ID("accordion-drawer")
　　.DataSource(ds => ds.Mvc()
　　　　.Controller("Common")
　　　　.OnBeforeSend("beforeSend")
　　　　.LoadAction("GetMenuItems")
　　)
　　.DataSourceOptions(d => d.Paginate(false))
　　.AnimationDuration(300)
　　.Collapsible(true)
　　.Multiple(false)
　　.ItemTitleTemplate(@<text><div style="font-size:14px"><%- text %></div></text>)
　　.ItemTemplate(@<text>
　　　　@(Html.DevExtreme().List()
　　　　　　.Height("auto")
　　　　　　.DataSource(new JS("items"))
　　　　　　.OnItemClick("drawerItemClick")
　　　　　　)
　　　　</text>)
　　.OnItemTitleClick("accordionTitleClick")
)

<script>
function drawerItemClick(e) {
　　if (e.itemData.url) {
　　window.location.href = e.itemData.url;
　　}
}

function accordionTitleClick(e) {
　　if (e.itemIndex != getDrawerExpandIndex()) {
　　　　localStorage.removeItem("crm_drawer_expand_index");
　　　　expirseLocalStorage.set("crm_drawer_expand_index", e.itemIndex.toString(), loginSettings.expirseMS);
　　}
}

function getDrawerExpandIndex() {
　　var index = expirseLocalStorage.get("crm_drawer_expand_index");
　　return isNotEmpty(index) ? parseInt(index) : 0;
}
</script>

 

GetMenuItems 数据源截图：

手风琴式导航_手风琴_02

 

 

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