Exploring Spark View Engine for ASP.NET MVC – Part 3
If you are following along in this series, we have have already looked at getting Spark View Engine setup and some of the basics of markup and layouts. In this last section, we need to look at some of the pieces of Spark syntax that really stand out.
Conditional Syntax
One of the things that makes a view look ugly in a hurry in the Web Forms world is conditional logic. If you have an else or an else if as part of the situation, you’ve got <% %> tags all over the place. Spark makes conditional syntax flow in your html markup. You can see a good sample of Web Forms vs. Spark at the beginning of the part 1 post on Exploring Spark.
The first way to handle conditionals is with the if and else tags:
1: <if condition="!Request.IsAuthenticated">
<pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060" id="lnum2"> 2:</span> <span style="color: #0000ff"><</span><span style="color: #800000">p</span><span style="color: #0000ff">></span>Hey... Login already!<span style="color: #0000ff"></</span><span style="color: #800000">p</span><span style="color: #0000ff">></span></pre>
<pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060" id="lnum3"> 3:</span> <span style="color: #0000ff"></</span><span style="color: #800000">if</span><span style="color: #0000ff">></span></pre>
<pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060" id="lnum4"> 4:</span> <span style="color: #0000ff"><</span><span style="color: #800000">else</span> <span style="color: #ff0000">if</span><span style="color: #0000ff">="Context.User.IsInRole('Administrators')"</span><span style="color: #0000ff">></span></pre>
<pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060" id="lnum5"> 5:</span> <span style="color: #0000ff"><</span><span style="color: #800000">p</span><span style="color: #0000ff">></span>Hello - You are special.<span style="color: #0000ff"></</span><span style="color: #800000">p</span><span style="color: #0000ff">></span></pre>
<pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060" id="lnum6"> 6:</span> <span style="color: #0000ff"></</span><span style="color: #800000">else</span><span style="color: #0000ff">></span></pre>
<pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060" id="lnum7"> 7:</span> <span style="color: #0000ff"><</span><span style="color: #800000">else</span><span style="color: #0000ff">></span></pre>
<pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060" id="lnum8"> 8:</span> <span style="color: #0000ff"><</span><span style="color: #800000">p</span><span style="color: #0000ff">></span>Hello - I know you.<span style="color: #0000ff"></</span><span style="color: #800000">p</span><span style="color: #0000ff">></span></pre>
<pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060" id="lnum9"> 9:</span> <span style="color: #0000ff"></</span><span style="color: #800000">else</span><span style="color: #0000ff">></span></pre>
There is also a test tag that is very similar and there are a few variations on the how you write the markup but that is the basic principle. (Note: the single quote is converted to a double quote by Spark.) Another very cool way to handle conditionals is to put the if as part of the html tag.
1: <p if="CartTotal < 75">
<pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060" id="lnum2"> 2:</span> Get free shipping when you order more than $75 worth of our good stuff</pre>
<pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060" id="lnum3"> 3:</span> <span style="color: #0000ff"></</span><span style="color: #800000">p</span><span style="color: #0000ff">></span></pre>
This p tag will only show up if the condition is met. In addition, you can still use an else tag underneath the p tag with the if.
One other really neat trick is using conditional logic inside an attribute with a ?{ } syntax.
1: <li class="listItem inStock?{item.Quantity > 0}">
<pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060" id="lnum2"> 2:</span> ${item.Name}</pre>
<pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060" id="lnum3"> 3:</span> <span style="color: #0000ff"></</span><span style="color: #800000">li</span><span style="color: #0000ff">></span></pre>
In the case above, the class attribute “inStock” will only appear when the Quantity is greater than zero.
Iteration Syntax
To be honest, the first thing I noticed when I looked at a Spark view was how iteration was handled. It just looked elegant to me. Like the Conditional Syntax, you can use separate tags for iteration or put the iteration right inside an existing tag.
1: <for each="var movie in Movies">
<pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060" id="lnum2"> 2:</span> <span style="color: #0000ff"><</span><span style="color: #800000">p</span><span style="color: #0000ff">></span>${movie.Title}<span style="color: #0000ff"></</span><span style="color: #800000">p</span><span style="color: #0000ff">></span></pre>
<pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060" id="lnum3"> 3:</span> <span style="color: #0000ff"></</span><span style="color: #800000">for</span><span style="color: #0000ff">></span></pre>
<pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060" id="lnum4"> 4:</span>  </pre>
<pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060" id="lnum5"> 5:</span> <span style="color: #0000ff"><</span><span style="color: #800000">table</span><span style="color: #0000ff">></span></pre>
<pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060" id="lnum6"> 6:</span> <span style="color: #0000ff"><</span><span style="color: #800000">tr</span> <span style="color: #ff0000">each</span><span style="color: #0000ff">="var movie in Movies"</span><span style="color: #0000ff">></span></pre>
<pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060" id="lnum7"> 7:</span> <span style="color: #0000ff"><</span><span style="color: #800000">td</span><span style="color: #0000ff">></span>${movie.Title}<span style="color: #0000ff"></</span><span style="color: #800000">td</span><span style="color: #0000ff">></span></pre>
<pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060" id="lnum8"> 8:</span> <span style="color: #0000ff"><</span><span style="color: #800000">td</span><span style="color: #0000ff">></span>${movie.Rating}<span style="color: #0000ff"></</span><span style="color: #800000">td</span><span style="color: #0000ff">></span></pre>
<pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060" id="lnum9"> 9:</span> <span style="color: #0000ff"></</span><span style="color: #800000">tr</span><span style="color: #0000ff">></span></pre>
<pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060" id="lnum10"> 10:</span> <span style="color: #0000ff"></</span><span style="color: #800000">table</span><span style="color: #0000ff">></span></pre>
ViewData
A lot of views will use ViewData of some type and while you can wrap your ViewData request in ${ } brackets, there is a better option. With the viewdata tag, you can strongly type your variables in your view.
1: <viewdata message="string" model="IEnumerable[[Movie]]" />
Note: Spark converts the [[ ]] to < >. These double square brackets and the single quotes are the only Spark conversions I’m aware of at this point.
Inline Code
One of the really great parts of Spark is that you can continue to use your <% %> syntax if you need to or want to. If you want to convert a page from aspx to spark. Rename the file, take out your header and replace your ContentPlaceHolders. The rest of your <% %> stuff should be fine.
In addition though, if you actually need some inline code, you can just proceed the line with a # character and it will be handled as inline code. Again, I think it gives the markup a cleaner feel.
Conclusion
There is a lot more interesting pieces to dive into with Spark, but this is just meant to get you started. If you are interested in more Spark syntax, configuration, or conventions you should check out the Spark documentation.