Razor Code in Orchard Articles / Pages

Topics: Customizing Orchard, Troubleshooting
Apr 8, 2011 at 1:56 PM

Hi,

I am currently experimenting with Orchard for a new project. I am trying to put some custom Razor code in to the body of an article, but every time I publish the article, the code ends up with <p> tags wrapped around it.

Is there any way of stopping that?

Thanks

Richard

Apr 8, 2011 at 1:58 PM

Can you post your code and the resultant HTML? Thanks

Apr 8, 2011 at 2:01 PM
Edited Apr 8, 2011 at 2:01 PM
<p>Mi eu tortor, et ligula amet hendrerit nunc tempor, pellentesque quis  praesent amet habitasse, rerum nisl aliquam sed porttitor imperdiet  senectus, arcu vestibulum. Posuere mi sed arcu potenti, molestie in  praesent. Praesent pulvinar pellentesque elit et amet interdum, nunc  maecenas, pellentesque in mauris aenean elit sit fusce, mi eu. Mi pede  quis elit elit erat euismod, erat rem magna orci, voluptatem enim cras  nunc parturient. Arcu risus ac quis fringilla, penatibus et sit. Ut  platea eu vel dolorum, ultrices eleifend lectus erat, per at quis mauris  ipsum. Quam nibh eros eget, vivamus placerat, eget aliquam mus in,  donec mattis quis diam lectus lectus suscipit. Massa fermentum eu  adipiscing elit montes justo. Porttitor aliquam sapien voluptas semper  enim fusce, sollicitudin mi reiciendis cras egestas, sodales nec mattis,  at hendrerit in lacinia, malesuada vitae.</p>


@{    string message = "This should show here!";
@message
}


<p>Massa venetis amet at, nulla risus sagittis non magna diam, adipiscing  in accumsan et scelerisque vestibulum, amet ut mi, elementum vitae  luctus ipsum. Suspendisse vel pulvinar dolor bibendum qui, donec  fringilla, magna massa mi elementum, torquent sit vehicula mauris neque,  non facilisis ipsum urna curae. A dis euismod in. Orci vulputate lorem  vestibulum vel. Rerum arcu tempor, ante consectetuer, nam nec odio id  sem, vel mi dolor diam wisi, non eleifend odio lacinia urna posuere  augue. Habitasse id nunc praesent sunt. Elit sem mauris praesent potenti  ante, ante nec tempus, suspendisse curabitur eget adipiscing metus et,  consectetuer arcu libero tempor, tincidunt dictum imperdiet aliquam sed  morbi.</p>

The problem I am having, is that the Razor code end's up wrapped in <p></p> tags!
Apr 8, 2011 at 2:07 PM

Well... technically what you're doing is illegal in HTML, text shouldn't exist outside of allowable block-level tags (such as <p>).

But if there's a reason you need to force this, you can try:


@{ string message = "This should show here!"; <text>@message</text> }

The <text> tag is actually a razor keyword for "here's some html not wrapped in tags". You see, the Razor parser usually expects to see a complete tag inside curly braces, it's part of how it actually parses the file.


Apr 8, 2011 at 2:12 PM

Thanks mate,

That was my fault, the code should of read

@{ string message = "This should show here!"; <p>@message</p> }


However, when I click publish, the whole code block get's wrapped in <p> tags like this:



<p>@{ string message = "This should show here!";</p> <p>@message</p> <p>}</p>

Apr 8, 2011 at 2:18 PM

Eek! Really not sure what's going on there, it could actually be the browser doing the wrapping and Razor just isn't even parsing anything.

Try reformatting the code as follows:

@{
    string message = "This should show here!";
    <p>@message</p>
}


Razor can get confused in certain situations if you try to do too much on one line :)

Apr 8, 2011 at 2:35 PM

Hi randompete

Thanks for the help there. Tried it your way, but again, everything keeps getting wrapped in <p> tags. Im thinking it could be TinyMce but i'm not sure.

Are there any setting's or something that people know of to stop it happening, or are you not allowed to put Razor code directly into an artice through TinyMce?

Thanks

Richard

Apr 8, 2011 at 2:45 PM

Wait ... you're typing Razor code into TinyMce? That won't work :)

Apr 8, 2011 at 2:51 PM

do you know of any modules that will change the editor to allow it?

Apr 8, 2011 at 2:54 PM

Hang on ... are you trying to actually run the code, or just display it? If you just want to display it, you can wrap it in <pre></pre> and Tinymce won't mess with the formatting.

Apr 8, 2011 at 2:57 PM

Actually run the code. You will have to forgive my ignorance, I have moved over from PHP and this is my first .NET / MVC project. Thanks for all you help so far though :)

Apr 8, 2011 at 3:12 PM

Don''t worry. I actually haven't been using MVC or Razor all that long but I've been using ASP.NET a fairly long time. Razor hasn't even existed until recently :) ...so I'm still constantly learning things.

You've just got to remember Razor is no different to PHP but with a slightly cooler syntax. It's server code, it lives in .cshtml files - that's mixed C# and HTML - so it gets parsed and executed at the server by the runtime.

TinyMCE / body editor are just for editing static HTML or Javascript content that gets rendered "as is" out to the page and parsed by your browser.

So your browser can't understand cshtml and neither can tinymce, it's not part of any widely-used spec, it's just an arbitrary syntax invented by some really awesome developers.

However... there is a system of filters in Orchard that enable scenarios like, for instance, expanding out BBCode from the body and turning it into html.

So it would be technically possible, perhaps using the .NET dynamic runtime (DLR), to parse and execute Razor code in the body during render.

But I wouldn't particularly recommend attempting that, it'd be pretty complicated, and could be extremely dangerous unless you're very careful and it's only you who's going to be editing the content. If you let someone input artitrary code to run on the server you could create all kinds of problems.

If you want to do this kind of customisation, you should be doing it in your Theme where you can write whatever cshtml code you like. The other option is to create a ContentPart and attach it to your Page content type, you can then write cshtml display views for the part.

Apr 8, 2011 at 3:48 PM

Thanks mate - given me something to look at :)