Using JsRender with JavaScript and HTML

JsRender is a JavaScript library that allows you to define a boilerplate structure once and reuse it to generate HTML dynamically. JsRender brings a new templating library to HTML5 development that has a codeless tag syntax and high performance, has no dependency on jQuery nor on the Document Object Model (DOM), supports creating custom functions and uses pure string-based rendering.

The following sample will utilize a method within a MVC controller to output json string via jquery ajax call.

        public JsonResult GetCustomers()
        {
            var customers = new List(){
                new Customer() { ID= "1", Name= "Bobby Jones", Birthday= "1902-03-17" },
                new Customer() { ID= "2", Name= "Sam Snead",   Birthday= "1912-05-27" },
                new Customer() { ID= "3", Name= "Tiger Woods", Birthday= "1975-12-30" }
            };           
            return this.Json(customers, JsonRequestBehavior.AllowGet);
            }
        }

	public class Customer{
	    public string ID {get; set;}
	    public string Name {get; set;}
	    public string Birthday {get; set;}
	}
	

You can render templates using JavaScript in several ways. First you’ll want to define your template either as a string or in a <script> tag. The <script> tag option is nice when you want to define your templates in the HTML, give them an id and reuse them. You can also create templates from strings, which gives you the ability to create them on the fly in code or even pull them from a data store..  The JavaScript on the page is as follows


        
        
            comments powered by Disqus
        
    

Categories

Recent Tweets

@jeffrey_doucet @Brian_Bancroft Canadians, self define themselves as NOT American, rather than being Proud Canadians
Retweeted by @dyardy Why do so many Canadians obsess over American policy that won’t impact us while being fairly ambivalent to day-to-d… twitter.com/i/web/status/9…
@melrobbins I was looking for 50$ earlier today, and still can't find it...ideas :)
Trump Watches Up To 8 Hours Of TV Per Day | HuffPost #SmartNews ===that explains everything huffingtonpost.com/entry/trump-te…
Retweeted by @dyardy Boston https://t.co/QmtMIF8P0F