X
28Oct

How to build a client side Repeater Using jQuery and ASP.NET AJAX

jTemplate is a template engine plug-in for jQuery and is commonly used to display tabular data by binding objects to the template. Before using jTemplate, we must know how to use the jTemplate syntax. The following tags are supported in jTemplate and you can see an example here

·         if..elseif..else../if

·         foreach..else../for

·         for..else../for

·         continue, break

 

jTemplates also supports “for” and “if” operators. Also, inside the “foreach” operator, you can access the following variables:

·         $index - index of the element in the table

·         $iteration - ID of the iteration (the next number begins from 0)

·         $first - is this the first iteration?

·         $last - is this the last iteration?

·         $total - the total number of iterations

 

The following below given example illustrates how to implement jTemplates in asp.net

 

Step 1: Open Visual Studio 2010. Create new ASP.NET 4 Web site from File > New > WebSite. First, I have created a Employee class which will return the Employee List as shown below.

C#

using System;

using System.Collections.Generic;

Public Class Employees

{

    public List getList()

    {

        List Employees = new List< Employee>();

       Employees.Add(new Employee { ID = 1, FullName = "Naresh Reddy", Address = "-", PhoneNo = "9036692479" });

       Employees.Add(new Employee { ID = 2, FullName = "Vinay Ramamurthy", Address = "-", PhoneNo = "8892601685"});

       Employees.Add(new Employee { ID = 3, FullName = "Pradeep Kumar", Address = "-", PhoneNo = "1234567890" });

       Employees.Add(new Employee { ID = 4, FullName = "Kalyani", Address = "-", PhoneNo = "9569879036" });

       Employees.Add(new Employee { ID = 5, FullName = "ShashiKala", Address = "-", PhoneNo = "9999999999"});

       Employees.Add(new Employee { ID = 6, FullName = "Somashekar", Address = "-", PhoneNo = "1234567890" });

       Employees.Add(new Employee { ID = 7, FullName = "Chetan", Address = "-", PhoneNo = "877467889" });

       Employees.Add(new Employee { ID = 8, FullName = "Praveen", Address = "-", PhoneNo = "9544772798" });

       Employees.Add(new Employee { ID = 9, FullName = "Sudarshan Rudrappa", Address = "-", PhoneNo = "9868058769" });

 

        return Employees;

    }

 

}

    Public Class Employee

{

    public int ID { get; set; }

    public String FullName { get; set; }

    public string Address { get; set; }

    public string PhoneNo { get; set; }

}

 

 

Step 2: Open your Default.aspx.cs page and create a static function which will return a patient list to the jQuery function from the server-side to client-side.

C#

using System.Web.Services;

[WebMethod]

public static List getAllEmployeeList()

{

    Patients pObj = new Employees();

    return pObj.getList();

}

 

 

Step 3: Now create a ‘ForEachTemplate.htm’ page in which we will add a table template to be processed by jTemplate, and the data will be populated and displayed on the browser. I have also applied CSS on this table.

 

    

        

            Id

            Full Name

            Address

            PhoneNo

                    

    

    

        {#foreach $T as Employee}

        

            

                { $T. Employee.ID }

            

            

                { $T. Employee.FullName }

            

            

                { $T. Employee.Address }

            

            

                { $T. Employee.PhoneNo }

            

        

        {#/for}

    

 

 

Now open your Default.aspx Page and add the jQuery and jTemplate reference as shown below:

    

    

 

     $(document).ready(function () {

         $.ajax({

             type: "POST",

             url: "Default.aspx/getAllEmployeeList",

             data: "{}",

             contentType: "application/json; charset=utf-8",

             dataType: "json",

             success: function (data) {

                 $('#placeholder').setTemplateURL('JTemplates/ForEachTemplate.htm');

                 $('#placeholder').processTemplate(data.d);

             }

         });

     });

    

 

 

The function accepts the JSON results retrieved from the Web Service and uses a jTemplate method to load the HTML template into a container, and finally renders the JSON result. To display the results, add a div element called ‘placeholder’ as shown below:

    

jTemplate,jQuery and JSON in ASP.NET 

 

    

 

        

    

                   

 

 

Related

Creating Simple App Using Ionic Framework

Introduction:Ionic framework is a simple, beautiful and structured Software Development Kit by using...

Read More >

Populate data as Facebook feeds in ASP.NET

Want to load the data dynamically as Facebook feeds?Need to populate the data when scrollbar comes d...

Read More >

How to use JQuery with Visual Studio .Net

What does JQuery mean?It is simply a light weight javascript library through which we can perform ac...

Read More >

Share

Try DevOpSmartBoard Ultimate complete Azure DevOps End-to end reporting tool

Sign Up

  • Recent
  • Popular
  • Tag
Monthly Archive
Subscribe
Name

Text/HTML
Text/HTML
Contact Us
  • *
  • *