Posted in General, Ideas

Conditional Rendering in ASP.NET AJAX 4.0

There are times when using a Prototype template or jQuery templates, we feel like “wish it had conditions & collection loops”. Conditional rendering in ASP.NET Ajax 4.0 seems to address this to some extent. Its pretty much using attributes like below in tags

  • sys:if="false" - this as the name sounds is a Javascript condition
  • sys:before="false" - is PreRender equvalent script for this XHTML Element
  • sys:after="false" - is PostRender equvalent script for this XHTML Element

Pretty basic stuff, but we can’t use loops and more JavaScript. But may be helpful.  What i would like to see is, browsers support javascript eval statements already. I think we need to write something, which just will keep the existing jQuery/prototypejs template structure. But embed <%%> like structures, which is real JS. This has to work with relatively less code, compared to the total freedom. Lets say we define our template as:

<tr>
<td>#{CountryName}</td>
<td>#{CurrencySymbol}</td>
<td>
    <# if(dataItem.States && dataItem.States.length>0) #>
        <ul>
            <# foreach s in dataItem.States #>
                <li>#{s}</li>
            </##>
        </ul>
    </##>
</td>
</tr>

For easy of development sake, we could mandate that the JS blocks must be enclosed in tags, and all tags must be closed properly. We are currently assuming its </##>, we could pick something else. not <$ $><!– –> or <%%>, as they are used already by .net, jsp, html and other languages) template. The js class, which we implement, say JsTemplate should just create grab all the JS template tags, evaluate them and create a larger template. Which will end up being jQuery Template (temptest) or prototype template. We could have some predefined variables like dataItem and stuff, similar to variables in http://msdn.microsoft.com/en-us/magazine/ee335716.aspx. We should be good. We just use JavaScript’s eval() to evaluate the JS.

Feel free to suggest improvements or ask for clarifications on this. After reading the article on MSDN, i thought we could use native JS eval() to extract more from templates, without creating much of a new laguage.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s