I am trying to create a glossary page. This page is to have the alphabet accross the top which should be clickable to display all node items alphabeticaly.. All these items will be children of the glossary section
I am not sure how to get them to display only when the letter is clicked..e.g If I press letter "c" all node names with first letter starting with "c" should only show and so on..
This is my code so far..any ideas..
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
Layout = "master.cshtml";
var glossary = CurrentPage.Children();
var glossaryItems = glossary.OrderBy("name");
string letter=String.Empty;
char c;
}
<div class="divide80"></div>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-12">
<h4>@Umbraco.Field("title", altFieldAlias: "pageName")</h4>
<p>@Umbraco.Field("bodyText")</p>
<!--tab-content-->
<!-- Nav tabs -->
<div class="row">
<div class="col-xs-12 gloss-tab">
<!--tab-nav-->
<ul class="nav nav-tabs" role="tablist">
@for (c = 'A'; c <= 'Z'; ++c)
{
<li role="presentation" class="active"><a href="#block-a" aria-controls="home" role="tab" data-toggle="tab">@c</a></li>
}
</ul>
<!--tab-panes-->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="block-a">
@foreach (var item in glossaryItems)
{
<div class="col-sm-12 gloss-term">
<h5>@item.Name</h5>
<p>@item.Description</p>
</div>
}
@foreach (var item in glossaryItems)
{
if (!letter.Equals(item.Name.Substring(0, 1)))
{
letter = item.Name.Substring(0, 1);
<div class="heading">@letter</div>
}
<div>@item.Name</div>
}
</div>
<!--/block a-->
@*<div role="tabpanel" class="tab-pane" id="block-e">
<div class="col-sm-12 gloss-term">
<h5>Everything</h5>
<p>These are the sum total of late or overdue payments for ground rent, maintenance charges or any other regular payment.</p>
</div>
</div>*@<!--/block e-->
</div>
</div>
<!--/tab-content-->
</div>
</div>
</div>
<div class="divide30"></div>
</div>
</div>
</div><!--side navigation container-->
seems like no one has a clue on this.. after some research I have chose to use examine indexer..so that is the way to go if anyone else wants to do this..
There are a few different ways you could go about doing this, some involve Examine, some simply involve putting some filtering logic in your page view.
I've not had to do something like this for any of the sites I've made so far but after a quick think about it you need to consider a few elements.
1) How do you want the initial page to load?
2) Do you want each "view" to have the same url with an appended query string?
3) Do you really want to load everything when the page first loads, or just the nodes that are needed?
You could for example, use javascript to request the contents of each "tab/letter category" from a custom controller each time a letter is clicked. This could either directly read the tree like you did in your sample code and then filter, or you could query examine in a serverside action and return a partial view or some json with the results in it.
------------ Edit ------------
A quick observation from the code you posted above, you are pretty much there for a basic implementation. You just need to make your tab generation dynamic:
Change the tabs at the top to dynamically create the link id
I have managed to get my examine index working..BUT.. when i click on other letters nothing happens..I think this is where jquery might come in?? any ideas please..
This is what I have so far..any help is greatly appreciated:
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@using Examine;
@using Examine.SearchCriteria;
@using UmbracoExamine;
@using umbraco.NodeFactory;
@{
Layout = "master.cshtml";
var glossary = CurrentPage.Children();
var glossaryItems = glossary.OrderBy("name");
string letter = String.Empty;
var contentSearcher = ExamineManager.Instance.SearchProviderCollection["AzSearcher"];
ISearchCriteria csc = contentSearcher.CreateSearchCriteria();
IBooleanOperation query = csc.Field("__IndexType", "content").And().OrderBy(new string[] { "Name" });
<div class="col-sm-12">
<div class="row">
<div class="col-sm-12">
<h4>@Umbraco.Field("title", altFieldAlias: "pageName")</h4>
<p>@Umbraco.Field("bodyText")</p>
<!--tab-content-->
<!-- Nav tabs -->
<div class="row">
<div class="col-xs-12 gloss-tab">
<!--tab-nav-->
<ul class="nav nav-tabs" role="tablist">
<li><a href="#A-filter">A</a></li>
<li role="presentation"><a href="#block-b" aria-controls="profile" role="tab">B</a></li>
<li><a href="#B-filter">B</a></li>
<li><a href="#C-filter">C</a></li>
<li><a href="#D-filter">D</a></li>
<li><a href="#E-filter">E</a></li>
<li><a href="#F-filter">F</a></li>
<li><a href="#G-filter">G</a></li>
<li><a href="#H-filter">H</a></li>
<li><a href="#I-filter">I</a></li>
<li><a href="#J-filter">J</a></li>
<li><a href="#K-filter">K</a></li>
<li><a href="#L-filter">L</a></li>
<li><a href="#M-filter">M</a></li>
<li><a href="#N-filter">N</a></li>
<li><a href="#O-filter">O</a></li>
<li><a href="#P-filter">P</a></li>
<li><a href="#Q-filter">Q</a></li>
<li><a href="#R-filter">R</a></li>
<li><a href="#S-filter">S</a></li>
<li><a href="#T-filter">T</a></li>
<li><a href="#U-filter">U</a></li>
<li><a href="#V-filter">V</a></li>
<li><a href="#W-filter">W</a></li>
<li><a href="#X-filter">X</a></li>
<li><a href="#Y-filter">Y</a></li>
<li><a href="#Z-filter">Z</a></li>
</ul>
@try
{
List<SearchResult> results = contentSearcher.Search(query.Compile()).ToList();
foreach (var r in results)
{
if (r.Fields.ContainsKey("pageTitle"))
{
r.Fields["sortValue"] = r.Fields["pageTitle"];
}
else
{
r.Fields["sortValue"] = r.Fields["nodeName"];
}
}
for (char c = 'A'; c <= 'Z'; c++)
{
var filter = from n in results where n.Fields["sortValue"].ToUpper().ToCharArray()[0] == c orderby n.Fields["sortValue"] select n;
if (c == 'A')
{
@Html.Raw("<div role=\"tabpanel\" class=\"tab-pane\" id=\"block-\"" + c + "\">")
}
else
{
//@Html.Raw("<div class=\"tab-pane\" id=\"" + c + "-filter\" style=\"display:none\">")
@Html.Raw("<div class=\"tab-pane\" id=\"" + c + "-filter\" style=\"display:none\">")
}
<div class="tab-content">
@foreach (var l in filter)
{
var n = Umbraco.Content(l.Fields["__NodeId"]);
<div class="col-sm-12 gloss-term">
<h5>@n.Name</h5>
<p>@n.Description</p>
</div>
}
</div>
@Html.Raw("</div>")
}
}
catch { }
</div>
</div>
</div>
</div>
</div>
}
it does not seem to like using lambda expressions when geting objects dynamically:
@foreach (var item in glossaryItems.Where(gi=>gi.Name.ToLower().StartsWith(c.ToLower())
I understand that trying to get the node name..put it to lower-case..then check it starts with same letter as my selected option..any razor way of writing this?
That's no problem. Could you paste the rest of the view, I suspect something is getting incorrectly set somewhere as my test code is working correctly.
Alphabetical node list
Hi All,
I am trying to create a glossary page. This page is to have the alphabet accross the top which should be clickable to display all node items alphabeticaly.. All these items will be children of the glossary section
I am not sure how to get them to display only when the letter is clicked..e.g If I press letter "c" all node names with first letter starting with "c" should only show and so on..
This is my code so far..any ideas..
Thanks
Nav
nobody else has this function on there website??
this is what I am trying to acheive:
http://index.wsu.edu/Default.aspx?al=A
seems like no one has a clue on this.. after some research I have chose to use examine indexer..so that is the way to go if anyone else wants to do this..
Thanks
Nav
Hi Naveed,
There are a few different ways you could go about doing this, some involve Examine, some simply involve putting some filtering logic in your page view.
I've not had to do something like this for any of the sites I've made so far but after a quick think about it you need to consider a few elements.
1) How do you want the initial page to load? 2) Do you want each "view" to have the same url with an appended query string? 3) Do you really want to load everything when the page first loads, or just the nodes that are needed?
You could for example, use javascript to request the contents of each "tab/letter category" from a custom controller each time a letter is clicked. This could either directly read the tree like you did in your sample code and then filter, or you could query examine in a serverside action and return a partial view or some json with the results in it.
------------ Edit ------------
A quick observation from the code you posted above, you are pretty much there for a basic implementation. You just need to make your tab generation dynamic:
Change the tabs at the top to dynamically create the link id
Then for the tabs something like this:
I have managed to get my examine index working..BUT.. when i click on other letters nothing happens..I think this is where jquery might come in?? any ideas please..
This is what I have so far..any help is greatly appreciated:
Hi Naveed,
I've just updated my previous reply with a possible solution (it doesn't use examine).
If you want to go down the examine route then it could potentially be a bit more complex to implement.
awesome thanks for that..
it does not seem to like using lambda expressions when geting objects dynamically:
I understand that trying to get the node name..put it to lower-case..then check it starts with same letter as my selected option..any razor way of writing this?
Thanks for all the help
Nav
Try changing:
to
This should switch it from dynamic to IPublishedContent for you.
Hi,
If I do the above I cannot use CurrentPage or Current..
I am using MVC if that changes anything...
Apologies, that should have been
not
You might have to adjust the following as well:
to be
argh now it is saying that umbraco.core.models.iplublishedcontent does not take 1 argument..
I even removed the "tolower" still the same :-(
Naveed,
Can you paste the current code you are using that replaced this block:
Thanks,
yup..
Thank you for helping me
That's no problem. Could you paste the rest of the view, I suspect something is getting incorrectly set somewhere as my test code is working correctly.
yup this is all of it.
That should work for you, you might need to tweak a few little bits but that works in my test site I quickly knocked up.
Thank you very very much
That works great
You saved me lot of time :-)
Thanks again
Nav
is working on a reply...
This forum is in read-only mode while we transition to the new forum.
You can continue this topic on the new forum by tapping the "Continue discussion" link below.