Generate Grid using Script callback (Ajax for 2003)

Hi All,

I am back after long time. I have a requirement to display a grid using sript call back. I search on net and found that all solutions suggest that generate XML file and pass it to java script. Itrate through XML file and generate "" for each row. I found this solution bit complex and require good knowledge of javascript and XML. I was looking for some easy slotion. For the same project I was writing the code for Export to excel. The same "common" code that we found on net. :) I found that this can help me in my grid problem as GridView.RenderControl(object of HTMLWriter); generates HTML for grid. What I did is I took that generated HTML in to string and passed it to javascript. In javascript I assigned that to innerHTML of DIV. See the code below..

Javascript Code

<script language="javascript" type="text/javascript">

function GenerateGrid(object)
{
var message = document.getElementById("ddlEmployeeName").value ;
var context = '';
<%= strCallback %>
return false;
}


function GenerateGridData(message,context)
{
// Here lblGrid is name of my lable.
document.getElementById("lblGrid").innerHTML = message;
}

script>

Server Side Code

Here I have removed extra code.

public void RaiseCallbackEvent(string eventArgument)
{
// Create new GridView and Bind it
GridView gvGridView = new GridView ();
gvGridView.DataSource = ds;
gvGridView.DataBind();

// Get string writer and HTML writer
System.IO.StringWriter sw = new System.IO.StringWriter();
HtmlTextWriter ht = new HtmlTextWriter(sw);

// This will generate HTML
gvGridView.RenderControl(ht);

strData = sw .ToString();

}


public string GetCallbackResult()
{
// return value to javascript
return strData;
}


How simple!!! I have displayed the grid without XML file and iteration logic of javascript. Then I remember a good quote of my friend, the rule of "KIS (Keep It Simple)". I am working on paging and editing of grid with script callback and will soon post the blog.

Bye and do happy programming.

Script Call back in Asp.net 2.0

Script Call back in Asp.net 2.0

Today I need to use script callback in my project. I search on net for that. I found few results. But still something is missing in that and code shown by them is not working.
Then I tried to solve the problem and luckily I succeed. Example will fill Address Drop down List on change event of Name drop down list.

The Client Callback feature consists of two things: ICallbackEventHandler
interface and Page.ClientScript.GetCallbackEventReference method.

Page.ClientScript.GetCallbackEventReference method has many overloaded version. I will explian which I used in code.

string strCallbackRef = Page.ClientScript.GetCallbackEventReference(this, "message", "showResult", "context", "showError", true);

Return type of GetCallbackEventReference is string. You need to place this string at client side in java script. This string will contain reference to XMLHTTP which asynchronously call the page referred in first argument of function.

You need to implement two methods of ICallbackEventHandler interface. First is public void RaiseCallbackEvent(string strArgFromClientSide) which is the method that execute on XMLHTTP request. Second is
public string GetCallbackResult() which wil return the result of execution of first method to javascript function mentioned in third argument of GetCallbackEventReference method.

I think we read to much. Now take a look at code I used.

Below is code for aspx page.

Explanation

Once you copy past the code and do necessary changes for connection string and Select query of Data Adapter everything is done. Just press F5 and you will see the result.

Now see the view source for this page. You will see following thing.


You can see this red line in your view source (not in red J) . This is the line which cause XMLHTTP request to the page and returns the result. Now see below and you will understand what happened at run time.

I hope this has explained you how script call back works. The only remaining thing is ”context”. This argument is used when you have used more then Async XMLHTTP request. It is not sure that all XMLHTTP request retursns the result in same order as they called. You can identify each request using different context.

Conclusion

To use scrip call back first you need to get reverence of function using GetCallbackEventReference method. Use that reference in java script function.
Then you have to implement two function of ICallbackEventHandler handler.
If your XMLHTTP request execute successfully, java script function mentioned in third argument of GetCallbackEventReference is called and returns you result. If your XMLHTTP request cause an error to occur java script function mentioned in fifth argument of GetCallbackEventReference is called.

Feel free to ask any questions ( but not hard :) ).

I Cleared MCP

Hi All,

12th February Sunday is one of the most happiest day in my life. I cleared MCP (Developing Web Application using ASP.NET and C#). I and my friend Nilang both were passed exam on same day. He is the one who motivated me in preparation of exam.

I read two books. First is MS Press Developing Web Application using ASP.NET and C# and second is Exam Cram by Amit. If you have enough time first go through MS Press book and then read Exam Cram. I really appriciate Exam Cram as very very helpful book.

Last but not list if you want any help regarding Exam or material. I will surely help you. I would like to thanks two another friend who hlped me lot. Dhruvin and Chinmay Thanks a lot.