Archive for the ‘AJAX’ Category

Trigger partial postback from javascript

November 6, 2009 Leave a comment

Sometimes you would like to use javascript to trigger partial postback instead using a button click event.Here is how you do it. You can use the __doPostBack(case sensitive) to trigger a postback , if the target is an update panel ,the will intercept the request and trigger an partial postback instead.The Gotcha here is that you need to use UpdatePanel’s ClientId(which is automatically generated) rather than the UpdatePanel server side ID.
You put the following code in the markup.What you normally do is you put a button with
click event.And add a trigger in the update panel with Button ID.What I do here is that
I add a OnLoad event to the update panel and I use div’s onclick event to trigger a partial update.
You can change the javascript onclick event to any valid javascript
event to invoke the partial postback.

<asp:scriptmanager ID="myScriptManager" runat="server"></asp:scriptmanager>
 <div id="Container" onclick="__doPostBack('<% = myUpdatePanel.ClientID %>', '');">
 <asp:UpdatePanel runat="server" ID="myUpdatePanel" OnLoad="myUpdatePanel_Load">
 <asp:Literal runat="server" ID="myLiteral"></asp:Literal>
 <asp:Literal runat="server" ID="timeLiteral"></asp:Literal>
You put the following code in the code behind.
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { myLiteral.Text = "First Request"; timeLiteral.Text = DateTime.Now.ToString(); } } protected void myUpdatePanel_Load(object sender, EventArgs e) { if (IsPostBack) { myLiteral.Text = "Partial Post back"; timeLiteral.Text = DateTime.Now.ToString(); } }

You can download the code sample from here.

Categories: AJAX,

Working with jqGrid and WCF service

July 20, 2009 2 comments

Today , I am going to show how to work with jqGrid with WCF in application. jqGrid is an Ajax-enabled JavaScript control that provides solutions for representing and manipulating tabular data on the web.You can download a copy of the code from here

1. To start with , we need to download the latest version of jQuery and jqGrid plug-in. At the time of writing ,the latest version of jqGrid is jqGrid 3.5 beta. The major differences for this version is that starting with this version, jqGrid does not use a loader (which loads the needed files one by one), but all the needed code is contained in one file. The desired modules can be built using the jqGrid download manager . In order to use this, first a language file should be loaded and then the jqGrid file.

2. Next, you need to add JavaScript into your project and references using script tag. In order to use jqGrid 3.5, first a UI theme CSS file should be loaded. The detailed instruction is in the downloaded jqGrid zip file.Then,we need to create an AJAX-Enabled WCF Service in our web project. We need to create an method in the WCF service and add the following attributes to the method.

[WebInvoke(Method = "POST",
BodyStyle = WebMessageBodyStyle.WrappedRequest,
ResponseFormat = WebMessageFormat.Json
public string GetProducts()
IList personList = ProductRepository.GetProducts();
int total = 1, page = 10;
ProductJqGridView productJqGridView = new ProductJqGridView(total, page, personList);
return productJqGridView.ToJson();

GetProducts method will return a list of products.After that I am instantiate ProductJqGridView object and call ToJson method to serialize the object into the correct JOSN format so that the jqGrid can consume it.

3. Before we looked the JavaScript ,we need to see what required in the markup. We need a table to display the data ,a div for the page navigation and button to load the data.Please see the source code for details.

4. Last, we are going to look at how to write JavaScript to bind the JSON data to the jqGrid.We use function as our datatype.The function we are using is getProducts which doing an AJAX call to the server and a JSON string is returned.In the successFunction we insert all the data into the jqGrid by calling thegrid.addJSONData.

function successFunction(jsondata) {
var thegrid = jQuery("#productGridView")[0];

function getProducts() {
url: “linkification-ext” href=”http://DataLoader.svc/GetProducts” title=”Linkification: http://DataLoader.svc/GetProducts“>DataLoader.svc/GetProducts“,
data: “{}”, // For empty input data use “{}”,
dataType: “json”,
type: “POST”,
contentType: “application/json; charset=utf-8”,
success: successFunction
function dataBindToGrid() {
datatype: getProducts,
colNames: [‘ProductID’, ‘Name’, ‘ProductNumber’, ‘Color’, ‘Size’, ‘Style’],
colModel: [{ name: ‘ProductID’, index: ‘ProductID’, width: 200, align: ‘left’ },
{ name: ‘Name’, index: ‘Name’, width: 200, align: ‘left’ },
{ name: ‘ProductNumber’, index: ‘ProductNumber’, width: 200, align: ‘left’ },
{ name: ‘Color’, index: ‘Color’, width: 200, align: ‘left’ },
{ name: ‘Size’, index: ‘Size’, width: 200, align: ‘left’ },
{ name: ‘Style’, index: ‘Style’, width: 200, align: ‘left’ }
rowNum: 10,
rowList: [5, 10, 20, 50, 100],
sortname: ‘ProductID’,
pager: jQuery(‘#pageNavigation’),
sortorder: “desc”,
viewrecords: true
jQuery(document).ready(function() {
jQuery(“input#LoadData”).live(“click”, dataBindToGrid);

A word of caution…

This is only a simple example using jqGrid, many of its functionalities have not been implemented. Since this is only a “Hello World” like example, I will show some of its advanced functionalities in some other article.
The hardest part for using AJAX and jqGrid is not the concept but the level of JavaScript skills. To be able to write maintainable AJAX code, you need to learn JavaScript. I have created an article on my blog to help you learn JavaScript. Here is the link. I hope my examples can help people get started using jqGrid using WCF in an ASP.NET web application. Your feedback is much more appreciated.

kick it on

Categories: .net, AJAX, javascript, jQuery, WCF