Client side data grid with JSON and Web Service

• Download Client_Grid_with_JSONWebService-noexe.zip - 76 KB
• Download Client_Grid_with_JSONWebService.zip - 83.4 KB

Introduction

Data Grid is most important part in web application. Most of the time we need to add the more value in data grid, again its also need to update/delete those data which are already stores in grid. But problem is postback. In every cases when we want to insert/update/delete from the grid, the page call the postback event and as a result it becomes to slow. In this article I developed a datagrid using Web Service and JSON. The JSON I used with Ajax. As a result I could avoid the postback event and also fast insert/delete/update with grid. But First I am discussing about some topic related the article.

• What is JSON 
• JSON with Ajax
• XML
• How Web Service Work
• How JSON connect with Web Service
• How My Created Client Grid is Working
• Importance/Limitation

What is JSON

JSON means Java Script Object Notation is lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. JSON is a text format that is completely language independent but uses conventions that are familiar to programmers of the C-family of languages, including C, C++, C#, Java, JavaScript, Perl, Python, and many others. These properties make JSON an ideal data-interchange language.

JSON is built on two structures:

• A collection of name/value pairs. In various languages, this is realized as an object, record, struct, dictionary, hash table, keyed list, or associative array.
• An ordered list of values. In most languages, this is realized as an array, vector, list, or sequence.

These are universal data structures. Virtually all modern programming languages support them in one form or another. It makes sense that a data format that is interchangeable with programming languages also be based on these structures.

JSON with Ajax

We often use JSON with in Ajax. Ajax is a term for the ability of a webpage to request new data after it has loaded into the web browser, usually in response to user actions on the displayed webpage.

As part of the Ajax model, the new data is usually incorporated into the user interface display dynamically as it arrives back from the server. An example of this in practice might be that while the user is typing into a search box, client-side code sends what they have typed so far to a server that responds with a list of possible complete search terms from its database. These may be displayed in a drop-down list beneath the search, so that the user may stop typing and select a complete and commonly used search string directly. When it was originally described in the mid-2000s, Ajax commonly used XML as the data interchange format but many developers have also used JSON to pass Ajax updates between the server and the client

XML

XML is very familiar data storing format for any operating system. XML stores its data in structured and serialize way. Various XML-based protocols exist to represent the same kind of data structures as JSON for the same kind of data interchange purposes. When data is encoded in XML, the result is typically larger than an equivalent encoding in JSON, mainly because of XML's closing tags. In XML (as with JSON) there are alternative ways to encode the same information because some values can be represented both as child nodes and attributes. Sample data format in XML:

 <Country>
    <name>Bangladesh</name>
    <capitalName>Dhaka</capitalName>
    <shortDetails>
        <Independence>1971</Independence>
        <Language>Bangla</Language>
        <popularSports> Cricket </popularSports>
    </shortDetails>
</Country>

How Web Service Work 

Web service is a technology framework, which allows machine-to-machine (M2M) interaction over the network. It can call application component. This protocol communicates with XML. It is not tied to any one operating system or programming language. It mainly works with:

1. SOAP (Simple Object Access Protocol)
2. UDDI (Universal Description, Discovery and Integration)
3. WSDL (Web Services Description Language)

for more knowledge about web service please read those article

How JSON connect with Web Service

First JSON send a request to web server with the reference of web service. Web Server executes
the web service according to parameter. After execution the web service send SOAP message (XML formatted serialize data) to browser (via web server). JSON then fetch the xml formatted data use it.

The below figure will clear the communication between JSON and web service. 

First create a web application and add a web service (.asmx) file. Now create a Get method to fetch the value form database.

[WebMethod]
   public List<Employee> GetEmployeeDetails()
   {
       // getting connection string
       string conStr = WebConfigurationManager.ConnectionStrings["TESTDB"].ConnectionString;
       DataTable dt = new DataTable();
       SqlDataReader dr = null;
       // Creating Sql Connection
       using (SqlConnection conn = new SqlConnection(conStr))
       {
           // Creating insert statement
           string sql = string.Format(@"Select * from [SampleInfoTable]");
           SqlCommand cmd = new SqlCommand();
           cmd.Connection = conn;
           cmd.CommandText = sql;
           cmd.CommandType = CommandType.Text;
           conn.Open();
           dr = cmd.ExecuteReader();
           dt.Load(dr);
           conn.Close();
           cmd = null;
       }
       int countRow = dt.Rows.Count;
       foreach (DataRow drEmp in dt.Rows)
       {
           Employee objemployee = new Employee();
           objemployee.id = Convert.ToInt32(drEmp["id"].ToString());
           objemployee.Name = drEmp["Name"].ToString();
           objemployee.Email = drEmp["Email"].ToString();
           objemployee.Phone = drEmp["Phone"].ToString();
           objemployee.Address = drEmp["Address"].ToString();
           list.Add(objemployee);
       }
       return list;
   }

this method will send the data with SOAP message to web server. 

Now add a web page and create the method of use JSON with Ajax in javascript region. For checking browse the webservice, you will get the XML data which actually need for JSON. Look on the 

reference of Ajax url.

function GetEmployeeDetails() {

           $.ajax({
               type: "POST",
               url: "hr_webservice.asmx/GetEmployeeDetails",
               data: "{}",
               contentType: "application/json; charset=utf-8",
               dataType: "json",
               success: function (response) {
                   BindTable(response.d);
               },
               failure: function (msg) {
                   alert(msg);
               }
           });
       }

url: "hr_webservice.asmx/GetEmployeeDetails",

the web service make ready the data in that link

this is the real communication between JSON and Web service. after getting the data I bind a table with javascript. also added a edit and delete control with event.

The output getting from web service which coming with xml serialization, When the success property of JSON getting the data, it calls another method with result object. Actually the whole table considered as a object Employee. 

I have created a table for header value and another div for generate the table from javascript.  

 

In the BindTable first I am checking that the table which is generated dynamically is exist or not. if exist then removing the table as I will generate with updated data.

   <span class="Apple-tab-span" style="white-space: pre;">	//
        // The method used to generate the grid with table, This method fire when the
        // JSON find the well serealized data from webService.
        //
<span class="Apple-tab-span" style="white-space: pre;">	function BindTable(Employees) {
            var root = document.getElementById('mydiv');
            try {
                var tblId = document.getElementById('tblGridValue');
                if (tblId != null) {
                    root.removeChild(tblId);
                }
            }
            catch (e) 
            {
            }  

Then A table is created inside of a div. Also added the id for the table, also width, style, others property. 

var tab = document.createElement('table');
          tab.setAttribute("id", "tblGridValue");
          tab.setAttribute("class", "tableStyle");
          tab.setAttribute("cellspacing", "3px");
          var tbo = document.createElement('tbody');

 Lets see how the grid row is generated: I applied a foreach loop to the LIST object to get every row of LIST, and

var row, cell;
      // the list object now extract the value for each row
      $.each(Employees, function (index, employee) {
          row = document.createElement('tr');
          row.setAttribute("class", "tableRaw");

I created row for each row. As my each list cell contains 5 column for that I needed to split/detect and that why I again used a loop for each column. In the loop I am creating <td> for each column. 

 

the row is binding form the getting object of result object, as a result the number of row is generated by the number of row of each row. the number of column is binding according to the values of object. the property also added for each column 

for (var j = 0; j < 5; j++) {
            cell = document.createElement('td');
            cell.setAttribute("width", "200px");
            var empId = employee.id;
            var empName = employee.Name;
            var empEmail = employee.Email;
            var empPhone = employee.Phone;
            var empAddress = employee.Address;
            if (j == 0) {
                //Create an input type dynamically.
                var hiddenId = document.createElement("input");
                //Assign different attributes to the element.
                hiddenId.setAttribute("type", "hidden");
                hiddenId.setAttribute("id", "hfRow_" + employee.Id);
                hiddenId.setAttribute("value", employee.Id);
                cell.appendChild(hiddenId);
                cell.appendChild(document.createTextNode(employee.Name));
            }
            else if (j == 1) {
                var spanValue = document.createElement("span");
                cell.setAttribute("width", "200px");
                spanValue.setAttribute("display", "inline-block");
                spanValue.appendChild(document.createTextNode(employee.Email));
                cell.appendChild(spanValue);
            }
            else if (j == 2) {
                cell.setAttribute("width", "200px");
                cell.appendChild(document.createTextNode(employee.Phone));
            }
            else if (j == 3) {
                cell.setAttribute("width", "200px");
                cell.appendChild(document.createTextNode(employee.Address));
            }

there used some hidden field to store the primary key and action mode of button. the primary key is used for update and delete. the action mode is used for tag that insert/update/delete which action request button is sending.

There also created the edit and delete button dynamically at last column

// at the last column
else if (j == 4) {
            //
            // in this state loop generates Edit and Delete button for each row
            //
            var element = document.createElement("img");
            element.setAttribute("src", "images/edit-icon.gif");
            element.setAttribute("width", "15px");
            cell.setAttribute("width", "100px");

            //
            // This loop also adding a click event EditMode()
            //
            element.setAttribute("onclick", "EditMode('"
                                                + empId + "','"
                                                + empName + "','"
                                                + empEmail + "','"
                                                + empPhone + "','" 
                                                + empAddress + "')");
                       
            cell.appendChild(element);

            //
            // Same way the row created Delete button
            //
            var elementDelete = document.createElement("img");
            elementDelete.setAttribute("src", "images/DeleteRed.png");
            elementDelete.setAttribute("width", "15px");

            //
            // Also created the Delete Method in onclick event
            //
            elementDelete.setAttribute("onclick", "return DeleteMode('" + empId + "')");
            cell.appendChild(elementDelete);
        }
//
//
//

the button also added the click event which will fire on click for edit mode. 

So, when edit image button click the EditMode() method fire

//
// While the Edit button clicks, the values sets on entry fields, at the same time the button
// name also changed to UPDATE and Hidden field value also changed to UPDATE. When I will sent the hidden field 
// to procedure as action mode, the procedure will work for update
//
function EditMode(empId, empName, empEmail, empPhone, empAddress) {
    var hfEditedId = document.getElementById('hfEditedId');
    var txEditedName = document.getElementById('txEditedName');
    var txEditedEmail = document.getElementById('txEditedEmail');
    var txEditedPhone = document.getElementById('txEditedPhone');
    var txEditedAddress = document.getElementById('txEditedAddress');
    var hfActionMode = document.getElementById('hfActionMode');
    var btnEntry = document.getElementById('btnEntry');
    hfEditedId.value = empId;
    txEditedName.value = empName;
    txEditedEmail.value = empEmail;
    txEditedPhone.value = empPhone;
    txEditedAddress.value = empAddress;
    hfActionMode.value = "UPDATE";
    btnEntry.value = "Update";
}

at the same time the the mode changed easy way. In this state the hidden field store the selected rows primary key. 

after click the update button the edit method fire which is again sending the edited value to direct database

//
    // Edit Employee Data
    //
    function EditEmployeeData() {
       var editedName = document.getElementById('txEditedName');
       var editedEmail = document.getElementById('txEditedEmail');
       var editedPhone = document.getElementById('txEditedPhone');
       var editedAddress =document.getElementById('txEditedAddress');
       var hfEditedId = document.getElementById('hfEditedId');
       var hfActionMode = document.getElementById('hfActionMode');
       // Blank validation check
       if (BlankValidation(editedName, editedEmail, editedPhone, editedAddress) == true) {
        // call ajax JSON method
        $.ajax({
            type: "POST",
            url: "hr_webservice.asmx/EditEmployeeData",
            data: "{ 'employeeId': '" + hfEditedId.value
                    + "','editedName': '" + editedName.value
                    + "', 'editedEmail': '" + editedEmail.value
                    + "','editedPhone':'" + editedPhone.value
                    + "','editedAddress':'" + editedAddress.value
                    + "','action_mode':'" + hfActionMode.value + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                BindTable(response.d);
            },
            failure: function (msg) {
                alert(msg);
            }
        });
      ResetText();
    }
    }

and also delete method calls onclick event of generated image button

//
// This is delete mode with JSON, When the button fire the onclick event the
// method call with the hidden primary key.
// actually the hidden field set on create the row.
//
function DeleteMode(deleteEmpId) {

    var agree = confirm("Are you sure you want to delete this information ?");
   if (agree) {
       $.ajax({
           type: "POST",
           url: "hr_webservice.asmx/DeleteEmployeeData",
           data: "{ 'employeeId': '" + deleteEmpId + "'}",
           contentType: "application/json; charset=utf-8",
           dataType: "json",
           success: function (response) {
               BindTable(response.d);
           },
           failure: function (msg) {
               alert(msg);
           }
       });
       }
}

when JSON calls the edit method to webservice, the web service method fires and the method directly working with database. 

//
// Edit Employee Data
//
[WebMethod]
public List<Employee> EditEmployeeData(string employeeId, string editedName, string editedEmail, string editedPhone, string editedAddress, string action_mode)
{
    // getting connection string
    string conStr = WebConfigurationManager.ConnectionStrings["TESTDB"].ConnectionString;
    int rowsInserted = 0;
    // Creating Sql Connection
    using (SqlConnection conn = new SqlConnection(conStr))
    {
        SqlCommand cmd = new SqlCommand();
        cmd.Connection = conn;
        cmd.CommandText = "sp_sample_info";
        cmd.CommandType = CommandType.StoredProcedure;
        cmd.Parameters.Add("@id", employeeId);
        cmd.Parameters.Add("@Name", editedName);
        cmd.Parameters.Add("@Email", editedEmail);
        cmd.Parameters.Add("@Phone", editedPhone);
        cmd.Parameters.Add("@Address", editedAddress);
        cmd.Parameters.Add("@Action", action_mode);

        conn.Open();
        rowsInserted = cmd.ExecuteNonQuery();
        conn.Close();
        cmd = null;
    }
    list = GetEmployeeDetails();
    return list;
}

delete action doing at the same way. 

sample output of client side data grid:

Importance/Limitation

Importance

• When using JSON with Ajax, a web application can request only the grid command(insert/update/delete) that needs to be updated, thus drastically reducing bandwidth usage and specially load time.
• The web application will be operated faster or more responsive, even if the application has not changed on the server side.
• Ajax enable to reduce connections to the server, since scripts and style sheets only have to be requested once.
• State can be maintained throughout a Web site such as Javascript variables.

Limitation
Any user whose browser does not support Ajax or JavaScript, or simply has JavaScript disabled, will not be able to use its functionality

History 

25-November-2012