Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Mike 62 posts 274 karma points
    Jul 29, 2013 @ 19:31
    Mike
    0

    Applying a class to a selected item in Razor

    Hey all,

    I have the following snippet which lists values from a data type:

    @foreach (dynamic entry in PreValues.GetPreValues(1023)) {
                        var preValue = entry.Value;
                        var itemUrl = Model.NodeById(Model.Id).Url;
                        <li><a href="@[email protected]" title="@preValue.Value">@preValue.Value</a></li>
    }

    How could I determine whether a particular item in the list has been clicked and therefore apply a class="selected" to the <a> tag?

    Many thanks,
    Mike

  • Fuji Kusaka 2203 posts 4220 karma points
    Jul 29, 2013 @ 19:47
    Fuji Kusaka
    0
     var selected = entry.IsAncestorOrSelf(Model) ? "class=selected" : "";
    <li><a href="@[email protected]" title="@preValue.Value" @selected >@preValue.Value</a></li>
  • Mike 62 posts 274 karma points
    Jul 29, 2013 @ 21:51
    Mike
    0

    Hey Fuji,

    Thanks so much for the reply. Looks very logical to me but unfortunately I'm getting a Razor error on the var statement:

     var selected = entry.IsAncestorOrSelf(Model) ? "class=selected" : "";

     

  • Fuji Kusaka 2203 posts 4220 karma points
    Jul 30, 2013 @ 06:47
    Fuji Kusaka
    0

    you need to add it within the foreach, can you post the whole code ?

  • Mike 62 posts 274 karma points
    Jul 30, 2013 @ 20:10
    Mike
    0

    Hey Fuji - yep the var statement is within the foreach.

    I've included the whole code below as there is a bit going on elsewhere in the script. There are two separate datatypes which are listed as links right towards the bottom of the script which include the new var statements you kindly suggested.

    Basically it saves without any errors but when it is rendered to the page it throws a generic Razor wobbly. I can't immediately see why your addition wouldn't work though.

    @inherits umbraco.MacroEngines.DynamicNodeContext
    @using System.Linq;
    @using umbraco.cms.businesslogic.datatype;
    @{
      var pagesToList = Model.Children;
      var clause = "umbracoNaviHide != true";
      var queryString = "?page={0}";
       
      if(!string.IsNullOrEmpty(Request.QueryString["design"]))
      {
        clause += " AND designCategory = \"" + Request.QueryString["design"] +"\"";
        queryString += "&design=" + Request.QueryString["design"];
      }
      if(!string.IsNullOrEmpty(Request.QueryString["piece"]))
      {
        clause += " AND pieceCategory = \"" + Request.QueryString["piece"] +"\"";
        queryString += "&piece=" + Request.QueryString["piece"];
      }
     
      pagesToList = pagesToList.Where(clause);   

      // configuration
      var itemsPerPage = String.IsNullOrEmpty(Parameter.ItemsPerPage) ? 3 : int.Parse(Parameter.ItemsPerPage);
      var previousLabel = String.IsNullOrEmpty(Parameter.PreviousLabel) ? "Previous" : Parameter.PreviousLabel;
      var nextLabel = String.IsNullOrEmpty(Parameter.NextLabel) ? "Next" : Parameter.NextLabel;

      // paging calculations
      var numberOfItems = pagesToList.Count();
      int currentPage = 1;
      if (!int.TryParse(HttpContext.Current.Request.QueryString["Page"], out currentPage)) {
        currentPage = 1;
      }
      currentPage--;
      var numberOfPages = numberOfItems % itemsPerPage == 0 ? Math.Ceiling((decimal)(numberOfItems / itemsPerPage)) : Math.Ceiling((decimal)(numberOfItems / itemsPerPage))+1;

      <div id="pfImg" class="rcol"></div>
       
      <div class="lcol">
        <figure class="portfoliothumbs">
            <ul id="pfLinks">
                @foreach(var item in pagesToList.Skip(currentPage*itemsPerPage).Take(itemsPerPage))
                {
                      <li>
                        <a href="@item.Url"><img src="@item.Media("itemImage","umbracoFile")" alt="@item.Name" title="@item.Name"></a>
                    </li>
                }
              </ul>
            <figcaption>Click thumbnails for details</figcaption> 

              <nav class="pfpagination">
                @{
                    var Pages = Enumerable.Range(1, (int)numberOfPages);
                    foreach(var number in Pages) {
                          if (number-1 != currentPage) {
                              <a href="@(string.Format(queryString, number))">@number</a>
                          } else {
                              <span class="selected">@number</span>
                          }
                          @Html.Raw("&nbsp|&nbsp");
                    }
                  }
            </nav>
            <div class="clearfix"><!--//--></div>
          </figure>
               
        <div class="portfoliofilter">       
            <nav>
                <header>
                    <h1>View by Design</h1>
                </header>
                <ul>
                    <li><a href="/portfolio/" title="All">All</a></li>
                    @foreach (dynamic entry in PreValues.GetPreValues(1075)) {
                        var selected = entry.IsAncestorOrSelf(Model) ? "class=selected" : "";
                        var preValue = entry.Value;
                        var itemUrl = Model.NodeById(Model.Id).Url;
                        <li><a href="@[email protected]" title="@preValue.Value" @selected >@preValue.Value</a></li>
                    }
                </ul>
            </nav>
            <nav>
                <header>
                    <h1>View by Piece</h1>
                </header>
                <ul>
                    <li><a href="/portfolio/" title="All">All</a></li>
                    @foreach (dynamic entry in PreValues.GetPreValues(1076)) {
                        var selected = entry.IsAncestorOrSelf(Model) ? "class=selected" : "";
                        var preValue = entry.Value;
                        var itemUrl = Model.NodeById(Model.Id).Url;
                        <li><a href="@[email protected]" title="@preValue.Value" @selected >@preValue.Value</a></li>
                    }
                </ul>
            </nav>
        </div>
        <div class="clearfix"><!--//--></div>
      </div>
      <div class="clearfix"><!--//--></div>
    }

     

  • Mike 62 posts 274 karma points
    Aug 04, 2013 @ 21:39
    Mike
    100

    Could not seem to make the IsAncestorOrSelf variable work without erroring so decided to go a different route and check the PreValue name against the QueryString.

    @foreach (dynamic entry in PreValues.GetPreValues(1075)) {
    var preValue = entry.Value;
        var itemUrl = Model.NodeById(Model.Id).Url;
        if (Request.QueryString["design"] == preValue.Value) {
        <li><a href="@[email protected]" title="@preValue.Value" class="selected">@preValue.Value</a></li>
        }
        else {
        <li><a href="@[email protected]" title="@preValue.Value">@preValue.Value</a></li>
        }
    }
  • Mike 62 posts 274 karma points
    Aug 04, 2013 @ 21:43
    Mike
    0

    Appreciate the help though Fuji. I'm sure there is a better solution but for now this is doing what it should.

Please Sign in or register to post replies

Write your reply to:

Draft