Posts Tagged jquery

Consuming ASP.NET Handler By jQuery Ajax With JSON

Step towards Web 2.0 development nowdays, ajax is one of the important element in web development. There are various way of doing asynchronous call to server or web service to execute a job.

In this post, I am using jQuery to consume ASP.NET handler through a simple javascript codes. In the normal scenario, if client side requesting a simple string, server just have to return response context with plain/text. If you wish to return a set of data to be return in formatted string, you can either have the options like text/xml or application/json. My example code here will be using application/json with the assistance of third party component, Newtonsoft Json.

Scenario

“I Wish to use javascript to execute a job asynchronously to ASP.NET and receiving set of data in object. I do not wish to make my asynchronous call to any of my ASP.NET aspx pages because it is not a best practice. How can I do it?”

Expectation

  • Data return from server in JSON object
  • Calling ASP.NET handler
  • Using jQuery

Prerequisite Component

  • jQuery 1.3.2
  • Newtonsoft Json

Solution File Structure

0001-20090505-120336

Download hellojson_050509_1229

Tags: ,

Enhanced ASP.NET Tree View with JQuery

Recently I come across to a project which required a tree view with some ASP.NET control to be attach with some tree view node. The default ASP.NET treeview doesn’t provide this feature and there is no way to extending the default tree view. Therefore, I decided to write a composite control from scratch.

The purpose of this control is to allow user to input control such as Button, Drop Down List, Radio Button List, Radio Button, List Box, Check Box List, Check Box and TextBox into each row of tree view. Additionally, I used JQuery assisting this tree view’s behavior of Collapse and Expand.

Result of this Extend Tree View as below:

Click here to see action in video:extend-tree-view

Example of the picture above showing the tree consisting 2 root with 1 level of sub-tree. Let’s see on “TICKET” root, there is a label with drop down list. This enabling user to check on “TICKET” and there is an input control allowing user to select which “TICKET” type (just an example scenario).

To begin with using the this tree, just drag and drop this tree view control from your sidebar or you can code as below:

Attached with this post the source code of this composite control with a demo web project: Download source code here

Tags: ,