TechnoTips : Part 31 - How to create dynamic menu using partial view and bootstrap in Asp.net mvc

#Expected Output

#Controller Code

using MVCTutorial.Models;
using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using System.Threading;
using System.Web;
using System.Web.Mvc;

namespace MVCTutorial.Controllers
{
    public class TestController : Controller
    {

        public ActionResult Index()
        {           
            return View();
        }

        public ActionResult SideMenu() {

            List<MenuItem> list = new List<MenuItem>();

            list.Add(new MenuItem { Link = "/Test/Index", LinkName = "Home" });
            list.Add(new MenuItem { Link = "/Test/Login", LinkName = "Login" });
            list.Add(new MenuItem { Link = "/Test/Registration", LinkName = "Register" });


            return PartialView("SideMenu", list);
        }

    }
}

#Model (MenuItem.cs)

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

namespace MVCTutorial.Models
{
    public class MenuItem
    {
        public string LinkName { get; set; }
        public string Link { get; set; }
    }
}

# View Page (Index.cshtml)

@{
    ViewBag.Title = "Index";
    // Layout = null;
}

<div class="panel panel-body" style="min-height:256px">

    <div class="col-md-3">

        @{ Html.RenderAction("SideMenu", "Test");}

    </div>
    <div class="col-md-9">
        @*Write your rest content here*@
    </div>

</div>

# Partial View (SideMenu.cshtml)- Add this into shared folder

@model IEnumerable<MVCTutorial.Models.MenuItem> 

<div class="panel panel-default" >
    <div class="panel-heading">
        <h4>Menu Item</h4>
    </div>
    <div class="panel-body">
        <ul class="list-group">

            @if (Model != null)
            {

                foreach (var item in Model)
                {

                    <li class="list-group-item"><a href="@item.Link" class="btn btn-primary btn-block">@item.LinkName</a></li>

                }
            }

            <li class="list-group-item"><a href="http://google.com" class="btn btn-success btn-block">Google</a></li>
            <li class="list-group-item"><a href="http://technotipstutorial.blogspot.com" class="btn btn-warning btn-block">Official Blog</a></li>

        </ul>
    </div>
</div>


<div class="thumbnail">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">Director Message</h3>
        </div>
    </div>
    <img src="~/Content/Images/director1.jpg" alt="..." style="margin-top:-20px">
    <div class="caption">
        <h3>Ashish Tiwary</h3>
        <p>&para; Have faith in us, We will give you full satisfaction by providing best service. &para;</p>
        <p><a href="#" class="btn btn-primary" role="button">See more</a> </p>
    </div>
</div>

All Code Factory

TechnoTips

Labels

Thursday, January 26, 2017

Part 31 - How to create dynamic menu using partial view and bootstrap in Asp.net mvc

3 comments: