Archive for September, 2015

Create Accordian dynamically in MVC -4

Posted: September 30, 2015 in C#
Tags:

Model.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace Accordion_Menu_MVC.Models
{
public class MenuModel
{
public List<MainMenu> MainMenuModel { get; set; }
public List<SubMenu> SubMenuModel { get; set; }
}
public class MainMenu
{
public int ID;
public string MainMenuItem;
public string MainMenuURL;
}
public class SubMenu
{
public int MainMenuID;
public string SubMenuItem;
public string SubMenuURL;
}
}

 

Controller.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Accordion_Menu_MVC.Models;
namespace Accordion_Menu_MVC.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
MenuModel ObjMenuModel = new MenuModel();
ObjMenuModel.MainMenuModel = new List<MainMenu>();
ObjMenuModel.MainMenuModel = GetMainMenu();
ObjMenuModel.SubMenuModel = new List<SubMenu>();
ObjMenuModel.SubMenuModel = GetSubMenu();
return View(ObjMenuModel);
}
public List<MainMenu> GetMainMenu()
{
List<MainMenu> ObjMainMenu = new List<MainMenu>();
ObjMainMenu.Add(new MainMenu { ID = 1, MainMenuItem = “Mobile”, MainMenuURL = “http://www.google.com&#8221; });
ObjMainMenu.Add(new MainMenu { ID = 2, MainMenuItem = “Speaker”, MainMenuURL = “#” });
ObjMainMenu.Add(new MainMenu { ID = 3, MainMenuItem = “Watch”, MainMenuURL = “#” });
ObjMainMenu.Add(new MainMenu { ID = 4, MainMenuItem = “Clothes”, MainMenuURL = “#” });
return ObjMainMenu;
}
public List<SubMenu> GetSubMenu()
{
List<SubMenu> ObjSubMenu = new List<SubMenu>();
ObjSubMenu.Add(new SubMenu { MainMenuID = 1, SubMenuItem = “Apple”, SubMenuURL = “#” });
ObjSubMenu.Add(new SubMenu { MainMenuID = 1, SubMenuItem = “Samsung”, SubMenuURL = “#” });
ObjSubMenu.Add(new SubMenu { MainMenuID = 1, SubMenuItem = “Nokia”, SubMenuURL = “#” });
ObjSubMenu.Add(new SubMenu { MainMenuID = 1, SubMenuItem = “Motorola”, SubMenuURL = “#” });
return ObjSubMenu;
}
}
}

View.cs

@model Accordion_Menu_MVC.Models.MenuModel
@{
ViewBag.Title = “Dynamic Accordion Menu Using jQuery in ASP.NET MVC”;
}
<link href=”Css/styles.css” rel=”stylesheet” type=”text/css” />
http://code.jquery.com/jquery-latest.min.js

$(document).ready(function () {
$(“#accordian h3”).click(function () {
$(“#accordian ul ul”).slideUp();
if (!$(this).next().is(“:visible”)) {
$(this).next().slideDown();
}
});
});

@using (Html.BeginForm(“Index”, “Home”))
{

  • @{
    foreach (var MenuItem in Model.MainMenuModel)
    {
    var SubMenuItem = Model.SubMenuModel.Where(m => m.MainMenuID == MenuItem.ID);

    @MenuItem.MainMenuItem

    if (SubMenuItem.Count() > 0)
    {

    }

    }
    }

}

Style.css

<style>
/*Basic reset*/
* {margin: 0; padding: 0;}
body {
background: White;
font-family: Nunito, arial, verdana;
}
#accordian {
background: #004050;
width: 250px;
margin: 100px auto 0 auto;
color: white;
/*Some cool shadow and glow effect*/
box-shadow:
0 5px 15px 1px rgba(0, 0, 0, 0.6),
0 0 200px 1px rgba(255, 255, 255, 0.5);
}
/*heading styles*/
#accordian h3 {
font-size: 12px;
line-height: 34px;
padding: 0 10px;
cursor: pointer;
/*fallback for browsers not supporting gradients*/
background: #003040;
background: linear-gradient(#003040, #002535);
}
/*heading hover effect*/
#accordian h3:hover {
text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
}
/*iconfont styles*/
#accordian h3 a {
color: white;
text-decoration: none;
font-size: 12px;
line-height: 27px;
padding: 0 15px;
/*transition for smooth hover animation*/
}
#accordian h3 a:hover {
color:#E1E1E1;
}
/*list items*/
#accordian li {
list-style-type: none;
background:#4D6974;
}
/*links*/
#accordian ul ul li a {
color: white;
text-decoration: none;
font-size: 11px;
line-height: 27px;
display: block;
padding: 0 15px;
/*transition for smooth hover animation*/
transition: all 0.15s;
}
/*hover effect on links*/
#accordian ul ul li a:hover {
background: #003545;
border-left: 5px solid lightgreen;
}
/*Lets hide the non active LIs by default*/
#accordian ul ul {
display: none;
}
#accordian li.active ul {
display: block;
}
</style>

Advertisements

Test Page

Posted: September 29, 2015 in C#

 

W3.CSS Demo

Resize this responsive page!

London

London is the capital city of England.

It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.

Paris

Paris is the capital of France.

The Paris area is one of the largest population centers in Europe,
with more than 12 million inhabitants.

Tokyo

Tokyo is the capital of Japan.

It is the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.

 

ASP.NET MVC Set – 1

Posted: September 29, 2015 in Interview, MVC Q&A

What is a MVC ?

Brief Answer


 

What is a Controller ?

Brief Answer

A Controller is one of the components in Model-View-Controller. Its role is to dictate what to do behind the scenes and to display in the view next. All actions methods we put in MVC .

  • Controller receives a request.
  • Controller decides the requested activities based on request parameters.
  • Controller delegates tasks to be performed based on request parameters
  • Controller delegates the next view to be shown.

 

What is a View ?

Brief Answer

 A view is a part of Model-View-Controller. It is nothing but user interface to view and modify the data. The data are presented in a particular format, triggered by controller’s decision to present the data.


 

What is a Model ?

Brief Answer

 Models is responsible for managing the data of the application. It responds to the request from the view and it also responds to the instruction from the controller to update itself.


 

What is a View Engine ?

Brief Answer

 Aview engine is responsible for rendering for the view in html form to the browser. By default ASP.NET MVC supports webforms(ASPX) and Razor view engine. However there are many third party view engines (like SPARK and NHAML) that are also available for ASP.NET MVC.