I am using MVC 4 with Razor view engine.
I want to display a nested unordered list comprised of years as parents and months as children.
Consider the following HTML:
<div>
<ul>
#foreach (var yr in Dates.Select(x => x.Year).Distinct())
{
<li>#yr</li>
<ul class="child" style="display: none">
#foreach (var mo in Dates.Where(x => x.Year == yr).Distinct())
{
<li id="#yr">#mo.ToString("MMMM")</li>
}
</ul>
}
</ul>
</div>
I have added the following script to make the ".child" (dis)appear when I click on ".parent" anchor.
<script type="text/javascript">
$(function () {
$(".parent").click(function () {
$(this).closest("ul").find(".child").toggle("fast")
return false;
});
});
</script>
However it toggles ALL ".child" items in the document. How to make it toggle only the child one?
Your html is invalid: you can't have a <ul> element nested directly within another <ul>.
Your <ul class="child"> should be within the same <li> element as the corresponding anchor element:
<div>
<ul>
#foreach (var yr in Dates.Select(x => x.Year).Distinct())
{
<li>#yr
<ul class="child" style="display: none">
#foreach (var mo in Dates.Where(x => x.Year == yr).Distinct())
{
<li id="#yr">#mo.ToString("MMMM")</li>
}
</ul>
</li>
}
</ul>
</div>
Then you can do this:
$(function () {
$(".parent").click(function () {
$(this).siblings(".child").toggle("fast");
// OR
$(this).next().toggle("fast");
return false;
});
});
The way you had it, $(this).closest("ul") goes up to the top-level <ul>, so then when you use .find(".child") it finds all elements with that class anywhere in the top-level <ul>.
Related
In View have the following foreach loop to display links:
#model List<IGrouping<string, FileInfo>>
#{
ViewData["Title"] = "Index";
int i = 0;
}
<div class="container-fluid main-container">
<div class="col-md-3 sidebar">
<ul class="nav nav-pills nav-stacked">
#foreach (var link in #Model)
{
<li>#link.Key <span>(***)</span></li>
foreach(var item in Model[i])
{
#item.Culture;
}
i++;
}
</ul>
</div>
The nested foreach displays the correct info but on a different line - I would like it positioned where the *** is in code listing.
Also I would like a comma ',' placed between each culture.
Any help appreciated.
Current output showing as:
EDIT: updated code to following and still getting same issue
#foreach (var link in #Model)
{
<li>
#link.Key
<span>
#foreach(var item in link)
{
#item.Culture
}
</span>
</li>
}
What about something like this? (untested)
<div class="container-fluid main-container">
<div class="col-md-3 sidebar">
<ul class="nav nav-pills nav-stacked">
#foreach (var link in #Model)
{
<li>#link.Key <span>
#String.Join(", ", link.Select(item => item.Culture).ToArray())
</span></li>
}
</ul>
</div>
Do you mean like this ?
<div class="container-fluid main-container">
<div class="col-md-3 sidebar">
<ul class="nav nav-pills nav-stacked">
#foreach (var link in #Model)
{
<li>#link.Key <span>
foreach(var item in Model[i])
{
#item.Culture;
#:,
}
</span></li>
i++;
}
</ul>
With the power of razor something like this should work.
Edit: just realised you want all cultures so:
#foreach (var link in #Model)
{
var Culture = "";
#foreach( var item in Model[i])
{
Culture += string.format("{0}," #item.culture;)
}
<li>#link.Key <span>(#Culture.trimend(','))</span></li>
i++;
}
Currently this is my code to pull a list of items from database an show under a Menu item:
<div class="top">
<ul>
<li class='itemCaption f17o'> </li>
#foreach (var category in Model.CatList)
{
<li>
<a href="/c/#category.Id/#category.Name" class='white'>#category.Name</a>
</li>
}
</ul>
</div>
but this displays all the items under one column only.How can i split the list into another column as i reach 8th item in one column?
#foreach (var category in Model.CatList.Select((Value, i => new { i, Value }))
{
if (category.i % 8 == 0)
{
#("</ul></li><li><ul>")
}
<li>
<a href="/c/#category.Value.Id/#category.Value.Name" class='white'>#category.Value.Name</a>
</li>
}
I have a bunch of tabs, each tab should contain a carousel (e.g Tab1 to Carousel1, Tab2 to Carousel2 etc.) However only the first tab's carousel renders. I have tried everything from generating unique ids to using class selectors, still can't get it to work as desired. Thanks
Html with razor hooks
<div class="tabbable">
<ul id="myTab" class="nav nav-tabs">
#{int incs=0;}
#foreach(var row in db.Query(queryCategory))
{
<li>#row.Category_Name</li>
}
</ul>
<div class="tab-content">
#{bool first = true;}
#foreach(var row in db.Query(queryCategory))
{
var ids= #row.Category_ID;
<div class="#{if (first){<text>tab-pane active</text> first = false;}else{<text>tab-pane</text>}}" id=#ids>
<p>I'm in #row.Category_Name.</p>
<ul id="#("customselect"+#incs++)" class="elastislide-list carousel">
#foreach(var row1 in db.Query("SELECT * FROM Food WHERE Category_ID = #0", ids))
{
<li><a href="#row1.Food_ID" class="link">
<div class="image-box"><img src="img/food.jpg"></div>
<span>#row1.Food_Name</span>
</a>
</li>
}
</ul>
</div>
}
</div><!--tabbable-->
Jquery
$('.carousel').each(function(index) {
$(this).elastislide();
});
Try call .elastislide() when tab was changed.
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
$("div.tab-content").find('ul.carousel').elastislide();
});
I got a strange errror. My html helper is supose to render html for a menu, simple ul's and li's. now the problem becomes that it starts to render a tags around other elements. The string returned from the html is correct, it seems something after that is causing the problem. I just cant figure out why. So i thought maybe a fresh pair of eys could spot it.
method
public static MvcHtmlString TopMenuLinks(this HtmlHelper helper, List<IMenuItemNodeViewData> menuItem)
{
if (menuItem != null && menuItem.Count > 0)
{
var count = 0;
var resultString = "";
var ulTag = new TagBuilder("ul");
foreach (var item in menuItem.Where(x => x.IsVisibleInMenu))
{
count++;
var liTag = new TagBuilder("li")
{
InnerHtml = string.Format("<a href=\"{0}\"><img src=\"{1}\" alt=\"{1}\" />{2}", item.URL, "/Content/images/image.png", item.Name)
};
ulTag.InnerHtml += liTag.ToString();
if (count % 3 == 0 || count == menuItem.Where(x => x.IsVisibleInMenu).Count())
{
resultString += ulTag.ToString(TagRenderMode.Normal);
ulTag = new TagBuilder("ul");
}
}
return MvcHtmlString.Create(resultString);
}
return null;
}
partialview
<div class="top-columns link-container">
<div class="links">
<%= Html.TopMenuLinks(Model.MenuItems) %>
</div>
</div>
<div class="top-columns icons">
<div class="icons-contain">
<img src="/Content/images/image.png" alt="image" />
</div>
</div>
It renders the following
<div class="links">
<ul>
<li>..</li>
<li>..</li>
<li>..</li>
</ul>
<ul>
<li>..</li>
<li>..</li>
</ul>
</div>
</div>
<a href="url">
<div class="top-columns icons">
<div class="icons-contain">
</div>
</a>
</div>
It suppose to be
<div class="links">
<ul>
<li>..</li>
<li>..</li>
<li>..</li>
</ul>
<ul>
<li>..</li>
<li>..</li>
</ul>
</div>
<div class="top-columns icons">
<div class="icons-contain">
</div>
</div>
you forgot to close <a> tag in the following line :
InnerHtml = string.Format("<a href=\"{0}\"><img src=\"{1}\" alt=\"{1}\" />{2}", item.URL, "/Content/images/image.png", item.Name)
try this :
InnerHtml = string.Format("<img src=\"{1}\" alt=\"{1}\" />{2} ", item.URL, "/Content/images/image.png", item.Name)
Working on a jQuery show hide box for filter checkboxes on my MVC3 razor page.
I have a page which changes depending on whether these checkboxes are checked or not, but I'd like them to stay open if any of the checkboxes are unchecked.
Currently the show/hide works, but how do I determine whether the page loads with them shown/hidden based on if any checkboxes are checked?
I can return a boolean value to state if any are unchecked or not, and was really looking for a jQuery genius to help me with the best/tidiest way to achieve this.
Here is an example of one of the filters, where modeFilterList is a generic list for each checkbox, containing the name, ID and checked status:
<div id="filterwrap">
<h2 class="filter">Filter your results</h2>
#using (Html.BeginForm())
{
<ul id="filter">
<li>
<h2>
Modes</h2>
<div class="filtercontent">
#foreach (var item in modeFilterList)
{
<div class="radiorow">
#Html.CheckBox("mode_" + item.ID, item.Checked)
#item.Name
</div>
}
</div>
<!-- end of filtercontent -->
</li>
</ul>
}
</div>
This is the jquery code for showing and hiding:
$('#filterwrap li h2').live('click', function (e) {
$(this).next('div.filtercontent').slideToggle() ;
e.preventDefault(); //stops page jumping to top
});
I thought about having a hidden field containing a true/false value just below the h2 that could be read when the page reloads, but there must be a nicer way to do it with jQuery!
you can use Jquery toggle() function or $("componentID").show() or hide() function
Ok, not crazy about the solution I've come to, so if anyone has anything better and tidier, let me know.
So, for each filter, I pass a bool parameter via viewbag to show if any checkboxes have been selected.
bool modeStatus = ViewBag.modeStatus;
I then added a hiddenfield with class:
<div id="filterwrap">
<h2 class="filter">Filter your results</h2>
#using (Html.BeginForm())
{
<ul id="filter">
<li>
#Html.Hidden("mode", modeStatus, new { #class = "filteritem" })
<h2>
Modes</h2>
<div class="filtercontent">
#foreach (var item in modeFilterList)
{
<div class="radiorow">
#Html.CheckBox("mode_" + item.ID, item.Checked)
#item.Name
</div>
}
</div>
<!-- end of filtercontent -->
</li>
</ul>
}
</div>
and this code within the (document).ready
$("input.filteritem:hidden").each(function () {
if ($(this).val() == "True") {
$(this).nextAll('div.filtercontent').show();
}
});