Feeds:
Posts
Comments

Archive for the ‘Ajax’ Category

I search a lot in Google for a whole day but didn’t find any perfect example to populate data into gridview. Then I decided to do it myself and I find it easy at the end of the day.

In the example which I illustrated below follows the flow:

  1. On document ready method it initiates jQuery AJAX call.
  2. Response will be redirected to the ASPX page and in tern server will respond with JSON data.
  3. jQuery AJAX call back success method used to generates HTML Table with data.
  4. Add HTML to DIV.

Here is the code:

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>Untitled Page</title>

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

<script src="js/commons.js" type="text/javascript"></script>

</head>

<body>

<form id="form1" runat="server">

<div id="divperson">

<strong>[Newly generated HTML will seat here]</strong>

</div>

</form>

</body>

</html>

Default.aspx.cs

public partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

if (Request.QueryString["id"] == "person")

GetString();

}

}

public void GetString()

{

JavaScriptSerializer _serializers = new JavaScriptSerializer();

string _personJSON = _serializers.Serialize(Person.GetPersonDetails());

Response.Clear();

Response.Write(_personJSON);

Response.End();

}

}

<strong>//Person Class and Members</strong>

public class Person

{

public string Name { get; set; }

public string State { get; set; }

public string PhoneNumber { get; set; }

public Person(string name, string state, string phone)

{

Name = name;

State = state;

PhoneNumber = phone;

}

public static List<Person> GetPersonDetails()

{

List<Person> _person = new List<Person>();

_person.Add(new Person("Hitesh", "Gujarat", "123"));

_person.Add(new Person("Urvish", "Maharastra", "345"));

_person.Add(new Person("Deepak", "Madhya Pradesh", "456"));

return _person;

}

}

I just created Person class, created some properties and a static method to generate list of Person class objects. You need to include System.Collections.Generic and System.Web.Script.Serialization name space for List Class and JavaScriptSerializer class respectively.

In Page_Load method, based on the querystring value the GetString() method will call and JSON response will be generated and submitted as response. You need to catch this response on client side to retrive values within JSON formatted data.

commons.js (a separate JS file)

$('document').ready(function(){

$.ajax({

type: "GET",

data:({id:"person"}),

url: "Default.aspx",

dataType: "json",

success:function(resultdata){

var person;

var _html='<table border="1">';

_html += '<tr>';

_html += '<th>Name</th>';

_html += '<th>State</th>';

_html += '<th>Phone</th>';

_html += '</tr>';

for(index in resultdata)

{

_html +='<tr>' ;

_html +='<td>' + resultdata[index].Name + '</td>';

_html +='<td>' + resultdata[index].State + '</td>';

_html +='<td>' + resultdata[index].PhoneNumber + '</td>';

_html +='</tr>' ;

}

_html +='</table>' ;

$('#divperson').html(_html);

}

});

});

Nothing fancy, using jquery.ajax method I made a GET request to Default.aspx page with some data. Page has return JSON data which I parsed in jquery.ajax success method.

Before you attempt to run this code in your app, make sure you have included jquery-1.4.2.min.js file.

Read Full Post »

Updatepanel is part of AJAX Extension 1.0 and later provided by Microsoft. Update panel is used to hide page refresh using some standard mechanism. But What about speed? In my experience updatepanel is the best solution if your page does not contain large number of components. And make sure controls you used is supported by updatepanel. Because controls like GridView,Treeview and more , are not supported by updatepanel. So you can expect behaviours change if you put it inside updatepanel.

I have recently trusted on updatepanel and used in my page where speed is the primary concern and that page was almost dead. So avoid using updatepanel where speed is primary requirement.

I have used Prototype AJAX in my application. It’s faster and better. Give it a try.  I tried to use jQuery AJAX but it has not that much support for ASP.net 2.0, its very good if you working on ASP.net 3.0 or ASP.net 3.5 version of .net.

So the conclusion is , avoid using updatepanel to get better speed , insted you can use Prototype or jQuery AJAX to get the best speed and performance of your application.  Googling around the web and you will get many working example of protory and jquery.

Read Full Post »

Most of us use Microsoft AJAX Toolkit and Controls but we don’t know when Ajax Request starts and when it ends. Sometimes we need to do enabling and disabling controls during postback. This can be done using the code below.

var _employee=null;
var _department=null;
var _subdepartment=null;

function pageLoad(sender, args){
// Register start request and end request event handler Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequest); }

// fired when ajax request starts
function beginRequest(sender, args){
_ employee = $get('ctl00_ContentPlaceHolder1_ddlemployee);
_ department = $get('ctl00_ContentPlaceHolder1_ddldepartment);
_ subdepartment = $get('ctl00_ContentPlaceHolder1_ddlsubdepartment);
_ employee.disabled=true;
_ department.disabled=true;
_ subdepartment.disabled=true; }

// fired when ajax request ends
function endRequest(sender, args) {
_ employee.disabled=false;
_ department.disabled=false;
_ subdepartment.disabled=false;
}

Here I have added two event handlers to request manager class instance. Event will be fired when request starts or ends. Isn’t it easy? 🙂

Ref : http://mattberseth.com/blog/

Read Full Post »