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 661 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 3008 posts 13221 karma points MVP 7x 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 661 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 1973 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 3008 posts 13221 karma points MVP 7x admin c-trib
    Aug 15, 2014 @ 15:21
    Jeavon Leopold
    1

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

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

    Thanks Guys, that worked great.

  • Martin 278 posts 661 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 1973 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 661 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 1973 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 661 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 1973 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 661 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 661 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")
        ))
    }
    
  • 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.

Please Sign in or register to post replies