May 30, 2013

JSON Tutorial

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." ;
}

May 29, 2013

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.

Mar 30, 2013

Get Next Number with REPLICATE In SQL Server

Get Next max value for custom identification of table value


SELECT 'PR' + Substring( '2012-2013', 3, 2 )
       + Replicate('0', 4-Len(Count(*)+1))
       + Cast(Count(*)+1 AS VARCHAR(4)) AS NewCode
FROM   tablename
WHERE  pro_finyear = '2012-2013' 



OUTPUT
=================

NewCode 
PR120012

Mar 9, 2013

Jquery animation cutting Ribbon with scissors




<body>
    <form id="form1" runat="server">
        <img class="RibbonL" src="Images/LeftRibbon.png" />
        <img class="RibbonR" src="Images/RightRibbon.png" />
        <img id="imgFollow" style="position: relative;" class="imgFollow" width="145px" height="145px" src="Images/scissors.png" />
        <script src="jquery-1.6.2.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function () {



                $(document).mousemove(function (e) {
                    $('#imgFollow').offset({
                        left: e.pageX + 30,
                        top: e.pageY - 20
                    });
                    $('#imgFollow').css('z-index', '1000');

                });

                $(".RibbonR, .RibbonL ").click(function () {
                    $(".RibbonL").hide(1000);
                    $(".RibbonR").hide(1000);

                    setTimeout(function () { //redirect after a certain time
                        $(window.location).attr('href', 'http://itapps.cgglobal.com/cgict/');
                    }, 1200);
                });

            });
        </script>
    </form>
</body>

Dec 7, 2012

How to fix Column of Gridview or scrollable grid in Asp.net


Jquery plugin js file for scrollable grid



=========================================================
1. ScrollableGridPlugin.js


(function ($) {
    $.fn.Scrollable = function (options) {
        var defaults = {
            ScrollHeight: 300,
            Width: 0
        };
        var options = $.extend(defaults, options);
        return this.each(function () {
            var grid = $(this).get(0);
            var gridWidth = grid.offsetWidth;
            var gridHeight = grid.offsetHeight;
            var headerCellWidths = new Array();
            for (var i = 0; i < grid.getElementsByTagName("TH").length; i++) {
                headerCellWidths[i] = grid.getElementsByTagName("TH")[i].offsetWidth;
            }
            grid.parentNode.appendChild(document.createElement("div"));
            var parentDiv = grid.parentNode;

            var table = document.createElement("table");
            for (i = 0; i < grid.attributes.length; i++) {
                if (grid.attributes[i].specified && grid.attributes[i].name != "id") {
                    table.setAttribute(grid.attributes[i].name, grid.attributes[i].value);
                }
            }
            table.style.cssText = grid.style.cssText;
            table.style.width = gridWidth + "px";
            table.appendChild(document.createElement("tbody"));
            table.getElementsByTagName("tbody")[0].appendChild(grid.getElementsByTagName("TR")[0]);
            var cells = table.getElementsByTagName("TH");

            var gridRow = grid.getElementsByTagName("TR")[0];
            for (var i = 0; i < cells.length; i++) {
                var width;
                if (headerCellWidths[i] > gridRow.getElementsByTagName("TD")[i].offsetWidth) {
                    width = headerCellWidths[i];
                }
                else {
                    width = gridRow.getElementsByTagName("TD")[i].offsetWidth;
                }
                cells[i].style.width = parseInt(width - 3) + "px";
                gridRow.getElementsByTagName("TD")[i].style.width = parseInt(width - 3) + "px";
            }
            parentDiv.removeChild(grid);

            var dummyHeader = document.createElement("div");
            dummyHeader.appendChild(table);
            parentDiv.appendChild(dummyHeader);
            if (options.Width > 0) {
                gridWidth = options.Width;
            }
            var scrollableDiv = document.createElement("div");
            if (parseInt(gridHeight) > options.ScrollHeight) {
                gridWidth = parseInt(gridWidth) + 17;
            }
            scrollableDiv.style.cssText = "overflow:auto;height:" + options.ScrollHeight + "px;width:" + gridWidth + "px";
            scrollableDiv.appendChild(grid);
            parentDiv.appendChild(scrollableDiv);
        });
    };
})(jQuery);


=========================================================
2. Default page with GridView

 <script src="../App_Themes/Theme1/ScrollableGridPlugin.js" type="text/javascript"></script>

 <script type="text/javascript" language="javascript">
    
     $(document).ready(function () {
        $('#<%=gridview1.ClientID %>').Scrollable({
            ScrollHeight: 300
        });
    });

</script>
=========================================================

What is the use of n-tier architecture and 3-tier architecture?

how to implement 3-tier architecture in asp.net using c#. 3-Tier architecture is also called layered architecture. Some people called it ...