How to use Json objects and Jqeury in Asp.net? Part -3

This is continuation of the tutorial how to use JSON objects and JQuery in Asp.net part -2
which explains the aspx page and how to use JQuery to render the data into the aspx page. This part of the tutorial explains how to use a handler to communicate between the Java script and the business logic layer and return back the json objects data. If you want to go to the starting of this article then it can be found in How to use JSON objects and JQuery in Asp.net part -1.

Lets add the handler in the Asp .net web project and name it jqAirlines.ashx.

My whole code for jqAirlines.ascx can be found here:

Code snippet - HOW TO USE JSON OBJECTS AND JQEURY IN ASP.NET? PART -3 (jqAirlines.ashx)

Now in sub ProcessRequest check the parameters received (action).

I have declared the business layer as bll and lstAir as list of my TarrifAirlines

and similarly set the contextType = "application/json" that means we will be returning json format data back

Similarly get the pageSize and startRecord and put them in variables.

Then it calls the function bll.CountAirlinesJQ that gives the count of the records and then calls the function bll.GetAirlinesJQ that gets the list of TariffAirlines which is explained in How to use Json objects and Jqeury in Asp.net? Part -1.

Now the lstAir is the list of TariffAirlines and we need to convert it to json format, so we can get stuck here and try to find the ways or even plan to write the function to convert it. It is a lengthy process so why not use opensource dll (Newtonsoft.Json.dll) by Newtonsoft which can be downloaded from Json.Net
strJsonAir = Newtonsoft.Json.JavaScriptConvert.SerializeObject(lstAir)

Now strJsonAir would have list of TariffAirlines as a serilized string in json format.

We now declare a stringBuilder named writer and lets append with count, pagesize, startRecord and data that contains the collection of TarrifAirlines ie strJsonAir in the JSON format and write it back which is then used by our javascript explained in How to use Json objects and Jqeury in Asp.net? Part -2

Now hope you understand the now how to use JQuery, and render the JSON objects in three tier ASP. net web applications. If any confusion or suggestions please feel free to comment or directly email me.

Read more!

How to use Json objects and Jqeury in Asp.net? Part -2

This is continuation of the tutorial how to use JSON objects and JQuery in Asp.net part -1 which explains how to retrieve the data and return it back to the presentation layer from data access layer and then from business layer. Now in this part i will explain aspx page where we will prepare a basic structure of the page and also learn how to use jquery in it.

- Download latest version of Jquery from Jquery.com or you can use Google API link which will be more reliable.
Lets add a aspx page in our Asp.net web project named jqAirlines.aspx
and add the javaScript link to jquery and format your aspx page. I have done mine as below:

Code snippet - How to use Json objects and Jqeury in Asp.net? Part -2 (jqAirlines.aspx) on Snipplr

Now lets analyse this code:

I have div id="pageBody" that lies inside the form. and I have 3 more divs namely "dvLoading" where loading image is displayed, "tableArea" where main grid loads but this table has structure only and finally "btnArea" where my buttons will be located, now i only have Display button.

Now we are done with our aspx page now we need main files where we do our code rendering. Lets add a javacript file called jqAirlines.js , You might have noticed link to jqAirlines.js in the aspx page. Here we write all our JQuery code from where we will render the aspx page.

Lets see the JQuery code from the link provided below and i will try to explain how this javascript functions:

Code snippet - HOW TO USE JSON OBJECTS AND JQEURY IN ASP.NET? PART -2 (jqAirlines.js code)

Now in the above js code $(function(){ is the main jquery function that is called first when page loads and that does all the job.

Now lets look step by step to this function

$("#dvLoading").hide(); --> hides the div named dvLoading

$("#airTable").hide(); --> hide the table first

Then when display is clicked

$("#cmdDisplay").click(function(){

It calls the function

list(0);

Now Lets go to the function list(startRecord, pageSize)

if the page size is not given then make it 10

Now main function $.getJSON gets the json data back after rendering the handler jqAirlines.ashx (or web service)

Analyzing the $.getJSON function it calls jqairlines.ashx and sends the parameters called action, pagesize and startRecord and gets json data "data" back which then passed to function ShowAirlineList(data) for further processing.

Now lets see the function showAirlineList(data)

This function starts assigning the value of data in an array called currentAirList

then hide and empty the table if it is already filled. Then Append the header row in #airTable thead .

Now from the data we loop through a collection inside it called Data that has been returned by jqAirlines.ashx page and append the data to tbody other seem pretty straight forward where page items are shown or hidden.

Now We have completed our .js file as well but the main portion where it calls the business layer function and converts back to json object and returns back for this .js to render is handler jqAirlines.ashx Further explanation of this handler is done in How to use Json objects and Jqeury in Asp.net? Part 3 of this Tutorial.

Read more!

How to use Json objects and Jqeury in Asp.net? Part -1

This is a very cruital article for all programmers wanting to learn jquery and apply it to their Asp .net web applications. This jquery, json and asp .net 2.0 tutorial explains step by step on how to retrieve the data from the database and render it back as json objects and display it on the web page using jquery.
When I was learning jquery, I actually was looking for similar tutorial where it can be explained using .net platform but i couldn't find exact solution and i spent so much time to get to this. Therefore i am writing this tutorial for all the .net programmers who want to learn jquery and apply it to their .Net web applications.

This tutorial assumes that the reader know basics of jquery and json objects and able to program dynamic websites in .net and knows the concept of three - tier architecture. I am not providing the full source code for this but i will try to explain the best i can with the help of code screenshots. You can definately ask questions and write comments and i will try to answer them as i get time off my work.

Ok lets begin here now:

In this tutorial I am using a table called Carriers that has carriers_code and Description Field containing 30 records and i will just show you how to retrieve these records and display in the grid with paging. I am pretty sure if you can retrieve and display records then you can easily insert, update or delete records.

Ok now lets see database layer code below ( Now if you don't know about Data access layer, business layer and presentation layer then you can learh how to develop three tier web application in .net )

Below function gets the count of the number of records:

Public Function CountTAirlinesJQ() As Integer
Dim count As Integer
Dim strSql As String
Dim dr As OleDb.OleDbDataReader

strSql = "Select Count(*) from Carriers"
db = New DBHelper("SFIA")

dr = db.ExecuteAndGetRowOLEDB(strSql)
If dr.Read() Then
count = dr(0)
Else
dr.Close()
Return 0
End If
dr.Close()

Return count
End Function

Below function retrieves the data and return as the list of TariffAirlines object.

Public Function GetTAirlinesJQ(ByVal PageSize As Integer, _
ByVal StartAt As Integer, _
ByRef ErrMsg As String) As List(Of TarrifAirlines)

Dim ds As DataSet
Dim Airs As New List(Of TarrifAirlines)
Dim strSql As String
Dim Top As Integer

Try
If PageSize > 0 Then
Top = PageSize + StartAt
strSql = "Select Top " + Top.ToString + " carriers_code,Description from Carriers"
Else
strSql = "Select carriers_code,Description from Carriers "
End If

db = New DBHelper("SFIA")
ds = New DataSet

ds = db.getDataset(strSql)

Dim dt As DataTable = ds.Tables(0)
Dim row As DataRow

Dim Airline As TarrifAirlines

Dim i As Integer
For Each row In dt.Rows
Airline = New TarrifAirlines
Airline.AirlineCode = row.Item("carriers_code").ToString()
Airline.AirlineName = row.Item("Description").ToString()

' PAGING here...............................>
'' frist get select top 10 from the table
' net time it will be top 20 and so you will pick up last 10
' because you will start at 10 now...

If i >= StartAt Then
Airs.Add(Airline)
End If
i = i + 1
Next

Return Airs
Catch ex As Exception
ErrMsg = ex.ToString()
Return Nothing
End Try

End Function

Similarly following business layer function return values to the presentation layer:

This returns the count from AirlinesDB containing above code

Public Function CountAirlinesJQ() As Integer

Dim db As New AirlinesDB
Return db.CountTAirlinesJQ()
End Function

Below function returns the list of TAirlines object retrieving from the AirlinesDB to the presentation layer:

Public Function GetAirlinesJQ(ByVal PageSize As Integer, _
ByVal StartAt As Integer, _
ByRef ErrMsg As String) As List(Of TarrifAirlines)

Dim db As New AirlinesDB
Return db.GetTAirlinesJQ(PageSize, StartAt, ErrMsg)

End Function

Ok now we have retrieved the data from the database and returned the count of the tables and list of Tairlines object. This tutorial will get longer therefore i am dividing this to different parts. Ok now Lets go to Second part of learn how to use json objects and jquery in Asp.net? Part 2.

Read more!

10 Smart Javascript Techniques to Improve Your UI

here are many clever and useful ways to improve a site from the user interface perspective. A developer can find nearly any snippet of Javascript to achieve what he or she wants to accomplish.

read more | digg story

Read more!

Ajax like look and feel from Json and what is Json?

JSON what is it and how it works?

The description of JSON is "JavaScript Object notation".
According to the official website it is a lightweight data-interchange
format. It is human readable and writeable and is a subset of the Javascript
Programming Language.
It is completely language independent.
Jason Looks like this and is in easily readable format like xml.

{
"Firstname": "John",
"Lastname": "Smith",
"emailaddrs": [
{"type": "work", "value": "abc@work.com.au"},
{"type": "home", "pref": 1, "value": "abc@work.com.au"}
],
"phones": [
{"type": "work", "pref": 1, "value": "123 12321221321"},
{"type": "mobile", "value": "123 23232323"}
],
"Experience":
["2006", "2007", "2008"]

}

You can access the jason property in javaScript as follows:



var fname = jsonObject.FirstName


I found this help from Codeville.net and I have tried this out myself and found this to be interesting topic to be explored.

Also while trying this I have a test project that i will explain it to you guys that helps you to understand about it more.

This example shows how easy it is to build dynamic lists using jason and and having the ajax experience in ASP.net

1. First step is to download the following dlls from Download Jason Dlls

2. Open a web project and put those two dlls in the bin folder of your project.

3. add a web form and name it rprateekDemo.aspx and copy the following code :
(or you can add any name and modify code as per the name of the aspx)



(note: you can get the source file on the JasonDll.rar that you downloaded above

4. Then add the following code in the code behind file rprateeDemo.aspx.cs :

using System;

namespace rprateek.blogspot
{
public partial class SimpleListDemoPage : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
TagList.Model["tags"] = new string[] { "AjaxFeel", "MVC", "JavaScript" };
}
}

protected void SubmitButton_Click(object sender, EventArgs e)
{
// Retrieve updated data model from control
string[] tags = (string[])TagList.Model["tags"];
ResultsLabel.Text = string.Format("You entered {0} tag(s): {1}", tags.Length, string.Join(", ", tags));
}
}
}

5. Add a file name it TagList.jmvc and copy the following code in the file :

(note: you can get the source file on the JasonDll.rar that you downloaded above )

6. Now save build and run the application and check out how sweetly it works.

Read more!

Block user from right clicking your web site

Just copy and paste the java script code given below to block the users from right
clicking on your web site.

function right(e) {
if (navigator.appName == 'Netscape' &&
(e.which == 3 e.which == 2))
return false;
else if (navigator.appName == 'Microsoft Internet Explorer' &&
(event.button == 2 event.button == 3)) {
alert("Please don't right click , Thanks Prateek!!");
return false;
}
return true;
}

document.onmousedown=right;
document.onmouseup=right;
if (document.layers) window.captureEvents(Event.MOUSEDOWN);
if (document.layers) window.captureEvents(Event.MOUSEUP);
window.onmousedown=right;
window.onmouseup=right;
// End -->

Read more!

To check and uncheck the radio button in web Page from Java Script

function checkRadio(StatID)
{
for (var i=0;i
{
if (document.frmOD.elements[i].type=="radio")
{
if (frmOD.elements[i].value==StatID)
{
frmOD.elements[i].checked="true";
}
}
}
}

function unCheckRadio(StatID)
{
for (var i=0;i
{
if (document.frmOD.elements[i].type=="radio")
{
if (frmOD.elements[i].value==StatID)
{
frmOD.elements[i].checked="false";
}
}
}
}

Read more!