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

Retweeted by @dyardy Hey C# peeps, we’re trying C# in browser with reference content. Try it here: docs.microsoft.com/dotnet/csharp/… reply with feedback /cc @LadyNaggaga
23 Amazing Vintage Photographs Taken Inside WWII Tank Factories ~ vintage everyday vintag.es/2017/10/23-ama…
When is AI NOT Search? Artificiality intelligence==Search Engine (there cases when this is not true)
@projectedxyz Large data vs big data? Industry has so misused buzz words to sell products, and so you end up nothi… twitter.com/i/web/status/9…