Reputation: 16219
I'm working on mvc4 project.
I have following html code
which is of menu items
when we clicked on new menu it will take css class active automatically
<div class="span3">
<!-- Filter -->
<nav id="options" class="work-nav">
<ul id="filters" class="option-set" data-option-key="filter">
<li><a href="#filter" data-option-value="*" class="selected">.Net</a></li>
<li><a href="#filter" data-option-value=".javaset">Java</a></li>
<li><a href="#filter" data-option-value=".rubyset">Ruby</a></li>
</ul>
</nav>
<!-- End Filter -->
I want to convert this into Mvc4 view cshtml
All Type are coming from database so i have used foreach
but how do I apply class class="selected"
which is currently active menu?
I tried something like
foreach(item in Model)
{
<div class="row">
<div class="span3">
<!-- Filter -->
<nav id="options" class="work-nav">
<ul id="filters" class="option-set" data-option-key="filter">
<li><a href="#filter" data-option-value="*" class="selected">@item.TypeName</a></li>
</ul>
</nav>
<!-- End Filter -->
</div>
}
guide me.
Upvotes: 0
Views: 1608
Reputation: 1038930
I suppose that there's some condition on the item
that allows you to determine if it is the currently active one. And then you could use the conditional operator like that:
@{
var selected = item.IsCurrentItem ? " class=\"selected\"" : "";
}
<li><a href="#filter" data-option-value="*"@Html.Raw(selected)>@item.TypeName</a></li>
This example assumes that your model has an IsCurrentItem
boolean property. If it doesn't you should replace it with the corresponding condition that will determine if it is the current item.
UPDATE:
It appears that you are attempting to toggle the selected class on the current item when this item is clicked. You could use javascript for that.
For example:
$(function() {
$('.work-nav a').click(function() {
// remove the selected class from all anchors
$('.row a').removeClass('selected');
// Add the selected class to the currently clicked anchor
$(this).addClass('selected');
});
});
Also note that you have produced broken markup. You have used <nav id="options"
and <ul id="filters"
inside a foreach loop. This means that potentially you might have more than one element with the same id in your HTML page. This results in invalid HTML! In HTML all ids must be unique.
UPDATE 2:
In order to make the first item selected initially when the page loads you could use the following:
foreach(var i = 0; i < Model.Count; i++)
{
<div class="row">
<div class="span3">
<!-- Filter -->
<nav class="work-nav">
<ul class="option-set" data-option-key="filter">
<li>
@{
var item = Model[i];
var selected = i == 0 ? " class=\"selected\"" : "";
}
<a href="#filter" data-option-value="*"@Html.Raw(selected)>@item.TypeName</a>
</li>
</ul>
</nav>
<!-- End Filter -->
</div>
</div>
}
Upvotes: 1
Reputation: 218762
Have your viewmodel a property to store the selected item name/id.
public class PageViewModel
{
public int SelectedMenuID { set;get;}
//Now your existing viewmodel properties goes here
public List<MenuItem> MenuItems { set;get;}
}
in your action method, set the SelectedMenuID
property value.
public ActionResult Customers()
{
var vm=new PageViewModel();
vm.SelectedMenuID=5; // hardcoded for demo.
vm.MenuItems=LoadMenuItemsCollectionFromSomeWhere();
return View(vm);
}
now in your view you can check it the SelectedMenuID is same as the current item's ID in the loop.
@model PageViewModel
@forach(var menu in Model.MenuItems)
{
<div>
<a href="#filter" class="@(Model.SelectedMenuID==menu.MenuID?"selected":"")">
@menu.Name
</a>
</div>
}
Assuming MenuItem
class has 2 properties, MenuID
and MenuName
Upvotes: 1