Copied to clipboard

Flag this post as spam?

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


  • Martin 278 posts 662 karma points
    Aug 15, 2014 @ 13:08
    Martin
    0

    Create Heading Level From Dropdown

    Hi All, New to Razor.

    I'm looking to control the html heading tag output through a custom drop-down datatype. I'm having trouble though with the syntax outputting the html value in my partial.

    I can get my dropdown h tag value returned, but cant get it to output the < & > brackets without an error. I also have a class invloved

    @Html.Raw(subnestedFs.GetValue("headingLevel"))    @Html.Raw(subnestedFs.GetValue("headingClass"))
    

    Any help would be grateful

  • Jeavon Leopold 3074 posts 13632 karma points MVP 11x admin c-trib
    Aug 15, 2014 @ 14:03
    Jeavon Leopold
    0

    Hi Martin,

    Could you please post a little more of your code, especially you loop?

    Jeavon

  • Martin 278 posts 662 karma points
    Aug 15, 2014 @ 14:59
    Martin
    0

    Hi Jeavon,

    I'm using the Archetype package with the following view. I have a dropdown datatype for the value "headingLevel".

    Thanks

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage
    @using Archetype.Models;
    @{
        var fieldset = (ArchetypeFieldsetModel)ViewData["fieldset"];
    }
    <div>
    
        @foreach (var nestedFs in fieldset.GetValue<ArchetypeModel>("imageBannerItem"))
        {
    
    
        var image = Umbraco.TypedMedia(nestedFs.GetValue("bgImage"));
    
        <div class="img-banner @fieldset.GetValue("bannerHeight") @fieldset.GetValue("messagePosition")" style="background-image:url('@image.Url')">
            <div class="row">
                <div class="ten columns centered text-center">
    
                    @foreach (var subnestedFs in nestedFs.GetValue<ArchetypeModel>("heading"))
                    {
                        <@subnestedfs.getvalue("headinglevel") class="[email protected]("headingSize")">@subnestedFs.GetValue("headingMessage")</@subnestedfs.getvalue("headinglevel")>
                    }
    
                </div>
            </div> 
        </div>
    
        }
    
    </div>
    
  • Dan Lister 416 posts 1974 karma points c-trib
    Aug 15, 2014 @ 15:14
    Dan Lister
    101

    Hi Martin,

    Could you use string.Format() along with Html.Raw() to render your heading?

    @Html.Raw(string.Format("<{0} class=\"title-{1}\">{2}</{0}>", 
                            subnestedFs.GetValue("headinglevel"), 
                            subnestedFs.GetValue("headingSize"),
                            subnestedFs.GetValue("headingMessage")))
    

    Thanks, Dan.

  • Jeavon Leopold 3074 posts 13632 karma points MVP 11x admin c-trib
    Aug 15, 2014 @ 15:21
    Jeavon Leopold
    1

    Interesting idea, I think Dan's suggestion looks spot on!

  • Martin 278 posts 662 karma points
    Aug 15, 2014 @ 15:34
    Martin
    0

    Thanks Guys, that worked great.

  • Martin 278 posts 662 karma points
    Aug 18, 2014 @ 09:36
    Martin
    0

    Hi guys, sorry to come back to this. How would I implement an if statement for each of the values?

    Thanks

  • Dan Lister 416 posts 1974 karma points c-trib
    Aug 18, 2014 @ 09:42
    Dan Lister
    0

    Hi Martin,

    Assuming you want to use the 'headinglevel' property for your if statement, you could write something like the following:

    @{
        if (subnestedFs.GetValue("headinglevel").ToString().Equals("h1"))
        {
            // ....
        } 
        else 
        {
            // ....
        }
    }
    

    Thanks, Dan.

  • Martin 278 posts 662 karma points
    Aug 18, 2014 @ 10:40
    Martin
    0

    Hi Dan, thanks for replying. I'm looking to set a default value for each of the fields.

    More specifically, i'm trying to pass a background image into a the style attribute. If an image is selected, all is fine and its showing. Without an image I get an error.

    Any help would be grateful.

    Martin

    var image = Umbraco.TypedMedia(fieldset.GetValue("backgroundImage"));
    
    @Html.Raw(string.Format("<div class=\"img-banner {0} {1}\" style=\"background-image:url('{2}')\">",
                     fieldset.GetValue("bannerHeight"),
                     fieldset.GetValue("headingSize"),
                     image.Url
                ))
    
  • Dan Lister 416 posts 1974 karma points c-trib
    Aug 18, 2014 @ 10:48
    Dan Lister
    0

    Hi Martin,

    You'll probably want to check if the background image is null and has an image first:

    var image = Umbraco.TypedMedia(fieldset.GetValue("backgroundImage"));
    
    if (image != null && !String.IsNullOrEmpty(image.Url))
    {
        @Html.Raw(string.Format("<div class=\"img-banner {0} {1}\" style=\"background-image:url('{2}')\">",
                 fieldset.GetValue("bannerHeight"),
                 fieldset.GetValue("headingSize"),
                 image.Url
            ))
    }
    else
    {
        @Html.Raw(string.Format("<div class=\"img-banner {0} {1}\">",
                 fieldset.GetValue("bannerHeight"),
                 fieldset.GetValue("headingSize")
            ))
    }
    

    Thanks, Dan.

  • Martin 278 posts 662 karma points
    Aug 18, 2014 @ 11:47
    Martin
    0

    Thanks Dan, I seem to get the following yellow screen.

    Exception Details: System.InvalidOperationException: The value of parameter 'id' must be either a string or an integer
    
    Source Error: 
    
    
    Line 10: 
    Line 11: 
    Line 12:         var image = Umbraco.TypedMedia(fieldset.GetValue("backgroundImage"));
    Line 13: 
    Line 14:         if (image != null && !String.IsNullOrEmpty(image.Url))
    
  • Dan Lister 416 posts 1974 karma points c-trib
    Aug 18, 2014 @ 11:51
    Dan Lister
    0

    Hi Martin,

    I'm guessing the return type of GetValue() is an object so try changing line 12 to:

    var image = Umbraco.TypedMedia(fieldset.GetValue("backgroundImage").ToString());
    

    Thanks, Dan.

  • Martin 278 posts 662 karma points
    Aug 18, 2014 @ 12:06
    Martin
    0

    Sorry to pester you Dan, but changing line 12 gave me this error.

    Thanks again for you help with this.

    Exception Details: System.NullReferenceException: Object reference not set to an instance of an object.
    
    Source Error: 
    
    
    Line 10: 
    Line 11: 
    Line 12:         var image = Umbraco.TypedMedia(fieldset.GetValue("backgroundImage").ToString());
    Line 13: 
    Line 14:
    
  • Martin 278 posts 662 karma points
    Aug 19, 2014 @ 09:16
    Martin
    1

    ok, ive got it working. Thanks for your help Dan.

    if(fieldset.HasValue("backgroundImage")) 
    {
        var image = Umbraco.TypedMedia(fieldset.GetValue("backgroundImage").ToString());
    
        @Html.Raw(string.Format("<div class=\"img-banner {0} {1}\" style=\"background-image:url('{2}')\">",
         fieldset.GetValue("height"),
         fieldset.GetValue("position"),
         image.Url
        ))
    }
    else
    {
        @Html.Raw(string.Format("<div class=\"img-banner {0} {1}\">",
         fieldset.GetValue("height"),
         fieldset.GetValue("position")
        ))
    }
    
Please Sign in or register to post replies

Write your reply to:

Draft