jQuery templates

jQuery templates is a useful plugin developed by Microsofts's ASP.NET team in collaboration with jquery open source team. Templates helps you to manipulate the data at client side and display in browser. It is more useful to display the dataset that is fetched from database using client side Asynch Ajax call.

jQuery Template example

In order to use jQuery templates we either need to download "jquery.tmpl.js" plugin and add reference or we can also refer it from cdn.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
     <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
  <script type="text/javascript">

      $(document).ready(function () {
          debugger;
          var loc = window.location.href;
          $.ajax({
              type: 'POST',
              url: loc + "/GetBookList",
              data: "{}",
              contentType: "application/json; charset=utf-8"

          })
        .success(function (response) {
            debugger;
            $("#bookCollection").tmpl(response.d).appendTo(".book-container");
        })
        .error(function (response) {
            alert(response.d);
        });

      });
  </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="book-container">
    
    </div>
     <script id="bookCollection" type="text/x-jQuery-tmpl">
        <div>
           <h2>${Title}</h2>
            Author: ${Author}
            price: ${Price}
        </div>
    </script>
    </form>
</body>
</html>
Here in above code below script is template to which we are going to bind the data. <script id="bookCollection" type="text/x-jQuery-tmpl"> <div> <h2>${Title}</h2> Author: ${Author} price: ${Price} </div> </script> And by using $("#bookCollection").tmpl(response.d).appendTo(".book-container"); we actually bind the data to the template and append that template to some fixed html like div.


Below code is for reference to get data from code behind method:


 [WebMethod]
        public static List GetBookList()
        {

            return new List()
                       {
                           new Book {Title = "ASP.NET", Author = "Stephen", Price = 350.9},
                           new Book {Title = "WPF", Author = "Murli", Price = 400},
                           new Book {Title = "WCF", Author = "Avinash", Price = 350}
                       };
        }
Refer link to know how to make a ajax call to code behind.


0 Comments :

Post a Comment