Easy HTML Templating with JQuery
I have been wanting to write a blog about this for a while and my first post on Devlicious is the perfect place. Firstly I have to thank Jess Chadwick for his help with this when I first started out with the Bundl.it project. Working with ASP.NET MVC has been wonderous, but when I was first starting out I was confused how I would replicate some of the behavior I was used to on my heavy server controls.
I wanted my page to be quick, and to do this I wanted only the amount of HTML I need to display to be on the page. When I was using webforms I would probably do this with a repeater, but I'm using .NET MVC so I thought dynamically generating the HTML was the way to go.
Your first step is creating your template; your template is the HTML that gets added to the page. You want it to be hidden; throwing it in a script tag is a good way to do this. You need to give it an ID that can be referenced in your code. You can create multiple templates as well. I am creating an unordered list.
My template looks like this:
<script id="ItemTemplate" type="text/html">
<li class="item" value="|rowNumber|">
<input type=”text” id=”input|rowNumber|” />
</li>
</script>
Now within my code I need to put a place holder where I want my HTML to go. I have my unordered list called url_list.
<ul id="url_list"></ul>
Now, you see that most of my items look like this “|rowNumber|” I have a variable in my code called nextUniqueItemID (I believe in extremely descriptive variable names). Here is my “addItem” function.
function addItem() {
var list = $('#url_list'),
items = list.find('li');
list.append($('#ItemTemplate’)
.html().replace(/\|rowNumber\|/gi, nextUniqueItemID++));
}
The list item gets added on user action. You can interpret it how you want The first thing it does is find my unordered list using the ID selector. Then the append function locates my template using the same selector and adds it to the html inside the url_list. It also replaces the rowNumber with the nextUniqueItemID, that way when I can reference this particular input when submitting my form. . It's that easy!
Similar Posts
- ASP.NET MVC Translated for the Web Forms Programmer (4 in a series)
- ASP.NET MVC Translated for the Web Forms Programmer (3 in a series)
- ASP.NET MVC Translated for the Web Forms Programmer (1 in a series)
Comments
jon on on 12.07.2009 at 8:48 AM
Even easier than rolling your own - use JQueryTemplates: plugins.jquery.com/.../jquerytemplate
John Bubriski on on 12.07.2009 at 10:33 AM
Awesome concept. I know a buddy of mine makes use of templates. This stuff is great for if you append rows to a grid or list.
Also, it would probably be great for having some sort of "viewer". You could have a list of documents, and use jQuery to get JSON data, then put the data into the template. Something like viewing invoices or other formatted docs.
Just to be picky too, according to w3schools.com, the "value" tag is deprecated? But I guess it is still technically valid. I like to be "valid" when I can :)
Robert on on 12.08.2009 at 2:20 PM
Been using: http://jtemplates.tpython.com
On a ajax chat system with 20K simultaneous users for over a year now. Snippets, caching, ajax, all good :)
kolorowanki on on 12.18.2009 at 6:18 PM
Very useful information Schipps, this article realy help me. Thanks it really looks promising! Jon thanks for this link- plugins.jquery.com/.../jquerytemplate
gambling conventions on on 12.31.2009 at 5:12 AM
Unfortunately, due to the amount of XP systems sold, the distance between upgrades and the resistance to the vista upgrade paths, I think we’ll still be seeing quiet a bit of IE6 for the next few years. At least until IE8 ships as a windows update patch.
Gry Planszowe on on 1.05.2010 at 1:53 PM
Very useful post. It's written very clearly and even such a noob as me can understand what to change in the code;)
Astrology on on 2.12.2010 at 6:47 AM
I'm wondering how you generate those formatted code snippets that you put in your blog posts. I've used things like GeSHi for wordpress, but it doesn't format exactly like Visual Studio. Are you pasting code from VS into your Html Help Builder and then copying that Html to your blog posts? I downloaded your app to see if you could do that, but just wondering if you have a plug-in or something that is allowing you to format these posts in a more automated fashion.
Luxury bedding ensembles on on 3.03.2010 at 8:58 AM
An article very well written. And yet another thumbs up for Schipps.I agree with what your writing. It’s best that people take notice of that.