多级导航菜单 递归

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication3
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        Model1 db = new Model1();
        public IEnumerable<Category> Categories { get; set; }
        protected void Page_Load(object sender, EventArgs e)
        {
            Categories = db.Category;
        }
        protected string RenderCategory(int parendId)
        {
            StringBuilder sb = new StringBuilder();
            sb.Append("<ul>");
            foreach (var item in Categories)
            {
                if (item.ParentId == parendId)
                {
                    sb.AppendFormat("<li><a>{0}</a>", item.Name);
                    sb.Append(RenderCategory(item.Id));
                    sb.Append("</li>");

                }
            }
            sb.Append("</ul>");
            return sb.ToString();
        }
    }
}

前端

<%=RenderCategory(0) %>

委托的方法

前端

<%
    int count = 0;
    RenderCategory = parentId =>
    {
%>
<ul <%= parentId==0?"id=\"categories\" class=\"dropdown-menu\"":"class=\"sub-item\"" %>>
    <%
        foreach (var item in Categories)
        {
            if (item.ParentId == parentId)
            {
                // 有子类
    %>
    <li>
        <a href="<%=UrlHelper.CategoryUrl(item.Id)%>"><%if (parentId == 0)
                                                        {%><i class="icon-main icon-<%=count++ %>"></i><%}%><%= item.Name %></a>
        <% RenderCategory(item.Id); %>
    </li>
    <%
            }
        }
    %>
</ul>
<%
    };
%>
<% RenderCategory(0); %>

后端比之前的方法 多了个    public Action<int> RenderCategory { get; set; } 属性

时间: 2024-11-03 17:36:45

多级导航菜单 递归的相关文章

vue+element UI实现多级导航菜单

1.前言 在某次日常开发中,项目要求页面的导航菜单需要动态加载,即菜单不能在页面上写死,菜单上的数据由后端开发从数据库中获取返回给前端使用,前端拿到数据后再通过解析数据最终将菜单渲染出来.由于菜单有可能是多级的,所以我们需要使用递归的方式,一层一层的递归数据,将多级菜单完整显示出来.本篇博文借助element UI组件库中的Navmenu导航菜单组件,将其进行改造后封装成一个多级导航菜单组件. 2.工作流程 组件封装好之后,由父组件调用该组件,父组件先向后端发送请求获取菜单数据,然后将菜单数据传

基于jQuery垂直多级导航菜单代码

基于jQuery垂直多级导航菜单代码是一款黑色风格的jQuery竖直导航菜单特效下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <ul class="ce"> <li> <a class="xz" href="#">目录A</a> </li> <li> <a href="#">目录B <img class=&qu

多级导航菜单

<html> <head> <title>树状列表结构测试</title> <style type="text/css"> * { margin:0; padding:0; border:0; } body { font:12px/130% verdana, geneva, arial, helvetica, sans-serif, 宋体; } li { list-style:none; } .clearfix:after {

Angular+Bootstrap3导航菜单

Angular+Bootstrap3导航菜单 AngularJS体验式编程系列文章,将介绍如何用angularjs构建一个强大的web前端系统.angularjs是由Google团队开发的一款非常优秀web前端框架.在当前如此多的web框架下,angularjs能脱颖而出,从架构设计上就高人一等,双向数据绑定,依赖注入,指令,MVC,模板.Angular.js创新地把后台技术融入前端开发,扫去jQuery一度的光芒.用angularjs就像写后台代码,更规范,更结构化,更可控. 关于作者 张丹(

20款jquery下拉导航菜单特效代码分享

jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应式导航菜单支持手机导航菜单代码 jquery鼠标导航下滑显示图片列表效果 jQuery个性动画二级下拉导航代码 jquery网站下拉菜单制作企业网站导航菜单代码 jQuery游戏网站顶部滑动导航菜单代码 jquery.superfish.js导航菜单插件制作网页无限级下拉菜单代码 jquery hover事件实用的企业网站二级导航菜单样式 j

实用js+css多级树形展开效果导航菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

js手机相应式多级导航分享

js手机相应导航,可以在自适应屏幕的时候运用,当网站屏幕小到一定程度是,让该导航出现,该导航效果如下图:多级导航! 主要的设计思路是:在菜单中往往会有很多内容或者有多个层次的子菜单,为了更加简洁和节省空间,在这个下拉菜单中将每个子菜单都隐藏在一个主导航按钮下方,当点击的时候通过细微的动画显示出来:当再次点击层级菜单时,可以再次以不同形式的动画展示下一级菜单.因为此菜单是流体布局的,所以可以很容易的适应于响应式布局当中. html代码: <div id="dl-menu" clas

MVC+Bootstrap 企业通用框架搭建--左侧导航菜单的实现(1)

导航菜单的实现:Navbar_Menu public class Navbar_Menu { /// <summary> /// 导航菜单编号 /// </summary> private int _nav_menuid; public int Nav_menuid { get { return _nav_menuid; } set { _nav_menuid = value; } } /// <summary> /// 菜单名称 /// </summary>

Web前端开发实战6:CSS实现导航菜单结合二级下拉式菜单的简单变换

前面几篇博文都在讲导航菜单和二级下拉式菜单,其实有很多方法都可以实现的,具体的情况还要视情况而定. 在后面学习到jQuery框架之后,会有更丰富的动画效果,由于在学习Ajax和jQuery的初步阶段,对于很多的复杂的导 航菜单和二级下拉式菜单没法做,但是学习了CSS和JS还是能实现一些简单的变换的.这篇博文就来说说用CSS实现 导航菜单结合二级下拉式菜单的两个简单变换吧. 首先还是在前面博文的基础上加以实现,其实只用HTML和CSS还是可以做出不错的效果,但是相较于JS和 jQuery来说就有很