JSON Tutorial

JSON or JavaScript Object Notation, is a text-based open standard designed for human-readable data interchange. It is derived from the JavaScript scripting language for representing simple data structures and associative arrays, called objects. Despite its relationship to JavaScript, it is language-independent, with parsers available for many languages. The JSON format is often used for serializing and transmitting structured data over a network connection. It is used primarily to transmit data between a server and web application, serving as an alternative to XML.

Example: How to send JSON data to Web method  i.e. ‘GetData’

1) create New website in visual studio

2) Write Below code In java script as function

    function SendData() {

       

         var jsonObjects = {

        "items": [

            {

                "compId": "1","formId": "531"

            },

            {

                "compId": "5","formId": "77"

            },

            {

                "compId": "8","formId": "89"

            }

        ]

        };

       

        $.ajax({

            url: "Default.aspx/GetData",

            data: JSON.stringify(jsonObjects),

            dataType: "json",

            type: "POST",

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

            dataFilter: function(data) { return data; },

            success: function(data) {

                alert(data.d);

            },

            error: function(XMLHttpRequest, textStatus, errorThrown) {

                alert(XMLHttpRequest.responseText);

            }

        });

    }

3) Now add new Button to call Method and send data to serverside

<asp:Button ID="Button4" runat="server" Text="Send JSON Data in Object(s)" OnClientClick="SendData();return false;" />

4) Import this libraries

using System.Collections.Generic;

using System.Web.Script.Serialization;

using System.Web.Services;

using System.Web.Script.Services;

using System.Web.Security;

5) Use this method to accept Json data and save it to RDBMS

[WebMethod]

public static string GetData(object items)

{

     //SINGLE OBJECT SAVE DATA

     List<object> lstItems = new           JavaScriptSerializer().ConvertToType<List<object>>(items);

     //now we can Acces lstItems values

     return "Send Data successfully." ;

}

Calculate GridView total using JavaScript / JQuery

Here is the code, both ASPX and the JQuery code.

The ASPX

    <asp:TemplateField>   
        <ItemTemplate>    
            <asp:TextBox ID="TextBox1" class="calculate" onchange="calculate()" runat="server" Text="0"></asp:TextBox>   
        </ItemTemplate>
    </asp:TemplateField>

The code is similar as previously. Only now we have addedd class=”calculate” to the TextBox in order to perform JQuery manipulation to all the textboxes with class=”calculate” (all textboxes will have class calculate, no matter of the number of textboxes inside the gridview, which will make easier to find and manipulate with them using JQuery).

The JQuery code:

    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        function calculate() {
            var txtTotal = 0.00;
            //var passed = false;
            //var id = 0;

            $(".calculate").each(function (index, value) {
                var val = value.value;
                val = val.replace(",", ".");
                txtTotal = MathRound(parseFloat(txtTotal) + parseFloat(val));
            });

            document.getElementById("<%=total.ClientID %>").value = txtTotal.toFixed(2);          
        }

        function MathRound(number) {
            return Math.round(number * 100) / 100;
        }
    </script>

Using this JQuery each function, we can easily iterate trough all html objects containing the class name calculate, which in our case are the text boxes.

That’s it.

Ref: http://weblogs.asp.net/hajan/archive/2010/08/27/calculating-gridview-total-using-javascript-jquery.aspx