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

"Setting up and Getting Started with Power BI Embedded | Data Exposed" channel9.msdn.com/Shows/Data-Exp… #webcast #feedly
Retweeted by @dyardy @scottgu @victoriabeckham Worlds collide, double take on that photo!
@scottgu @victoriabeckham Worlds collide, double take on that photo!
@projectedxyz It is really easy, what are you doing (isn't this data which on the web)