razor newbie problems ( - Razor

Jimmy Dan Mortensen 77 posts 197 karma points

Dec 11, 2011 @ 18:23

Razor Newbie problems :-(

Hi Gurus :-)

I'm trying to create my first website using Razor, and I'm creating more confusion for myself than I would ever have imagined :-(

I got this Javascript "slider" that I want to integrate into Umbraco.

The below is the variables in the script, that I want to create using Razor
----------

var slide_pics       = Array('slidepics/slide1.jpg','slidepics/slide2.jpg','slidepics/slide3.jpg');

var slide_headlines   = Array('@Model.Name','@Model.Name','@Model.Name');

var slide_linktext     = Array('Se her','Se mere her','Se mere noget her');

var slide_link      = Array('http://www.google.com','http://www.yahoo.com','http://www.dmi.dk');

var slide_bottom_txt  = Array('Btn text 1','Btn text 2','Btn text 3');

------------

In Umbraco I have made a document-type called Slider. As Children I have created a document Type for each image containing the Headlines, text etc.

I've made this Razor-code, that kinda generates what I want with 2 small problems

@inherits umbraco.MacroEngines.DynamicNodeContext


@{
<var>   
  var slide_headlines= Array('
  @foreach (var picker1 in @Model.NodeById(1358).Children)
          {
          @picker1.frontHeadline@(",")
           }
           ');
  var slide_linktext     = Array('
  @foreach (var picker2 in @Model.NodeById(1358).Children)
          {
          @picker2.frontLinkText@(",")
           }
           ');
  var slide_bottom_txt= Array('
  @foreach (var picker3 in @Model.NodeById(1358).Children)
          {
          @picker3.frontBoxText@(",")
           }
           ');
  var slide_link      = Array('
  @foreach (var picker4 in @Model.NodeById(1358).Children)
          {
          @picker4.carousselLink@(",")
           }
           ');
  var slide_pics       = Array('
  @foreach (var picker5 in @Model.NodeById(1358).Children)
          {
          @picker5.carousselimage@(",")
           }
           ');                                
</var>           
}

The output I get from this is:
var slide_linktext = Array(' Link text 1,Link text 2,Link text 3, '); var slide_bottom_txt= Array(' Box text billede 1,Box text billede 2,Box text billede 3, '); var slide_link = Array(' 1129,1177,1270, '); var slide_pics = Array(' 1056,1057,1058, ');

My questions is now:

1) How do I remove the last "," from each sentence?
2) How do i use the contentpicker to get the ID instead of typing it in? (1358)
3) How do i get something usefull from the A) link and B) images
4) How do i get each sentence on their own line so it is usable in the script?

It's a lot of questions, but I hope you have the time to help me, as I'm almost out of hair by now :-)

Best regards

Jimmy Dan Mortensen

Copy Link

Rodion Novoselov 694 posts 859 karma points

Dec 11, 2011 @ 21:40

Hi. Look at this snippet below, I hope it's like what you need:

@inherits umbraco.MacroEngines.DynamicNodeContext

@{
  var slide_headlines = string.Format(
     "var slide_headlines = Array({0});",
     string.Join(", ", Model.Children.Select("\"'\" + Name + \"'\"")));
}

<script>
  @Html.Raw(slide_headlines)
</script>

It's only for "slide_headlines", but the other parts can be done in a very similar way. I hope it will help.

Copy Link

Jimmy Dan Mortensen 77 posts 197 karma points

Dec 11, 2011 @ 21:56

I might misunderstand what you are writing, but are you creating the Array for me?. My javascript needs the input exactly as:

var slide_headlines = Array('Text1','Text2','Text3');

I 'm not sure, that I can send @Html.Raw(slide_headlines), but I'll try and work with it tomorrow.

Please have in mind, that I'm a total newbie, and your code looks like missing some input like what node it should take the children from (the contentpicker node on @model.carrousselFolder) that I can't get to work unless I hardtype the ID myself.

Copy Link

Rodion Novoselov 694 posts 859 karma points

Dec 11, 2011 @ 22:30

Some explanations. For instance if you have a structure like:

Current Node
--- Foo
--- Bar
--- Buz

then the output on the page will be:

The other parts of <script> can be created the same way using something different than "Name".

In razor current page is represented by the "Model" property passed to the script automatically. So that the expression

Model.Children.Select("\"'\" + Name + \"'\"")

returns a collection of current node children names embraced with apos. (e.g. 'Foo', 'Bar', 'Buz'). Then it's joined with ", " as a delimeter and formatted to get a required expression. And finally this expression is outputted to HTML with @Html.Raw(...).

Copy Link

Jimmy Dan Mortensen 77 posts 197 karma points

Dec 12, 2011 @ 07:42

Hi Rodion

Thank you for explaining the code to me, but I'm getting a different output with the following codeblock than what I expected

@inherits umbraco.MacroEngines.DynamicNodeContext
@using umbraco.MacroEngines
@{  
  dynamic node = @Model.NodeById(1358);
  
  var slide_Name = string.Format(
     "var slide_Name = Array({0});",
     string.Join(", ", node.Children.Select("\"'\" + Name + \"'\"")));
  
  var slide_headlines = string.Format(
     "var slide_headlines = Array({0});",
     string.Join(", ", node.Children.Select("\"'\" + frontHeadline + \"'\"")));
  
  var slide_linktext = string.Format(
     "var slide_linktext = Array({0});",
     string.Join(", ", node.Children.Select("\"'\" + frontLinkText + \"'\"")));
  
  var slide_bottom_txt = string.Format(
     "var slide_bottom_txt = Array({0});",
     string.Join(", ", node.Children.Select("\"'\" + frontBoxText + \"'\"")));
  
  var slide_link = string.Format(
     "var slide_link = Array({0});",
     string.Join(", ", node.Children.Select("\"'\" + carousselLink + \"'\"")));
  
  var slide_pics = string.Format(
     "var slide_pics = Array({0});",
     string.Join(", ", node.Children.Select("\"'\" + carousselimage + \"'\"")));
}

<script>
  @Html.Raw(slide_Name)
  @Html.Raw(slide_headlines)
  @Html.Raw(slide_linktext)
  @Html.Raw(slide_bottom_txt)
  @Html.Raw(slide_link)
  @Html.Raw(slide_pics)
</script>

The Output that I get is kinda weird. I've pasted the HTML here:

var slide_Name = Array('Pic1', 'Pic2', 'Pic3'); var slide_headlines = Array('System.Func`2[umbraco.MacroEngines.DynamicNode,System.Object]','System.Func`2[umbraco.MacroEngines.DynamicNode,System.Object]','System.Func`2[umbraco.MacroEngines.DynamicNode,System.Object]'); var slide_linktext = Array('System.Func`2[umbraco.MacroEngines.DynamicNode,System.Object]','System.Func`2[umbraco.MacroEngines.DynamicNode,System.Object]','System.Func`2[umbraco.MacroEngines.DynamicNode,System.Object]');

AND so on ....

Can you see where my error lies?

Copy Link

Rodion Novoselov 694 posts 859 karma points

Dec 13, 2011 @ 16:39

What's the type of for example "frontHeadline "? It seems that the problem is that node.Children.Select doesn't convert to "IEnumerable<string>". It can be caused by that "frontHeadline" etc aren't of the string type.

Copy Link

is working on a reply...

Flag this post as spam?

Razor Newbie problems :-(