connectseekers.com

Thursday, 16 October 2014

Dynamic Vertical Css Menu Using jQuery, Css and C#.net In Asp.net MVC

10/16/2014 - By Pranav Singh 7

This article will show you how you can create a dynamic vertical css menu using jQuery, Css and C#.net In Asp.net MVC.


So for this article first we will create a new asp.net MVC application and add a model class file and add the below code into it.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MvcApplication8.Models
{
    public class MenuModel
    {
        public List<ParentMenu> ParentMenuModel { get; set; }
        public List<ChildMenu> ChildMenuModel { get; set; }
    }
    public class ChildMenu
    {
        public int ParentId { get; set; }
        public string ChildName { get; set; }
        public string ChildUrl { get; set; }
    }
    public class ParentMenu
    {
        public int Id { get; set; }
        public string ParentName { get; set; }
        public string ParentUrl { get; set; }
    }
}

In above code I have created a model class file with parent and child menu item.

Now add controller class file and add the below code into your controller class file.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcApplication8.Models;

namespace MvcApplication8.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            MenuModel objmenumodel = new MenuModel();
            objmenumodel.ChildMenuModel = new List<ChildMenu>();
            objmenumodel.ChildMenuModel = GetChildList();
            objmenumodel.ParentMenuModel = new List<ParentMenu>();
            objmenumodel.ParentMenuModel = ParentMenuList();
            return View(objmenumodel);
        }
        public List<ChildMenu> GetChildList()
        {
            List<ChildMenu> objchildmenu = new List<ChildMenu>();
            objchildmenu.Add(new ChildMenu { ParentId = 2, ChildName = "Child Product1", ChildUrl = "#" });
            objchildmenu.Add(new ChildMenu { ParentId = 2, ChildName = "Child Product2", ChildUrl = "#" });
            objchildmenu.Add(new ChildMenu { ParentId = 2, ChildName = "Child Product3", ChildUrl = "#" });
            objchildmenu.Add(new ChildMenu { ParentId = 2, ChildName = "Child Product4", ChildUrl = "#" });
            return objchildmenu;
        }
        public List<ParentMenu> ParentMenuList()
        {
            List<ParentMenu> objparentmenu = new List<ParentMenu>();
            objparentmenu.Add(new ParentMenu { Id = 1, ParentName = "Home", ParentUrl = "#" });
            objparentmenu.Add(new ParentMenu { Id = 2, ParentName = "Products", ParentUrl = "#" });
            objparentmenu.Add(new ParentMenu { Id = 3, ParentName = "About", ParentUrl = "#" });
            objparentmenu.Add(new ParentMenu { Id = 4, ParentName = "Contact Us", ParentUrl = "#" });
            return objparentmenu;
        }
    }
}

In above code I have created two function in which I have added a static data. you just replace this with your DB data by mankind your menu item collection.

Now create a view and add the below code into your view.

@model MvcApplication8.Models.MenuModel
@{
    ViewBag.Title = " Dynamic Vertical Css Menu Using jQuery, Css and C#.net In Asp.net MVC
 ";
}
<link href="../../Css/styles.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="../../Scripts/script.js" type="text/javascript"></script>

@using (Html.BeginForm("Index", "Home"))
{
    <div id='cssmenu'>
        <ul>
            @{
    foreach (var iteparent in Model.ParentMenuModel)
    {

        var childitem = Model.ChildMenuModel.Where(m => m.ParentId == iteparent.Id);
        if (childitem.Count() == 0)
        {                     
                <li><a href='@iteparent.ParentUrl'><span>@iteparent.ParentName
</span></a></li>
        }
        else
        {
                <li class='active has-sub'><a href='@iteparent.ParentUrl'><span>@iteparent.ParentName</span></a>
                    @if (childitem.Count() > 0)
                    {              
                        <ul>
                            @foreach (var itemchild in childitem)
                            {
                                <li class='last'><a href='@itemchild.ChildUrl'><span>@itemchild.ChildName</span></a>
                                </li>
                            }
                        </ul>
                    }</li>
        }

    }
               
            }
        </ul>
    </div>
}

In above code I have added the lop of parent and then  on the bases of parent I have filtered the child item, and bind it to the li and ul.

Now we have done run the application to check the output.



now click on product menu item.

About the Author

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Get Updates

Subscribe to our e-mail newsletter to receive updates.

Share This Post

7 comments:

  1. Great..Good example

    Thanks for sharing

    ReplyDelete
  2. Hi Pravin.

    Hope you doing good.

    Thanks for this wonderful and helpful article.

    Please help me with how can we put the menu in Layout file and
    call repective pages from menulink in RenderBody.

    I have tried to call the Index action using jquery post and fill the menu inside the layout page.

    For the first instance t works fine but after that it gives error.

    Please help

    Thanks
    Jay

    ReplyDelete
  3. Sorry Pranav for saying pravin really sorry

    ReplyDelete
  4. Please provide style sheet file

    ReplyDelete
  5. hello! how can we create a third level in your example?

    ReplyDelete
    Replies
    1. Hi
      Design you model as per the menu level and apply look for it.

      Delete

Please let me know your view

Free Ebooks


About Us

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Contact Us

For writing article in this website please send request by your

GMAIL ID: dotnetpools@gmail.com
Email Id : contact@aspdotnet-pools.com

Bugs and Suggestions

As we all know that this website is for sharing knowledge and providing proper solution. So while reading the article is you find any bug or if you have any suggestion please mail us at contact@aspdotnet-pools.com.

Partners


Top jQuery Plugins

Global Classified : Connectseekers.com
© 2014
back to top