public knowledge blog_load(sender Virendra)

                                                                                                                          Nothing shocks me, I am a Software Engineer.

Posts Tagged ‘Ajax’

Set Page Position to Default after asyncPostback in AJAX

Posted by Virendra Dugar on January 20, 2010

Introduction

I will start this article, with one of the problem which I come across recently.

Background

I was working with a page. The page is divided into two parts.

1. Add/Update/Delete (I call it Area 1)
2. Listing of records (I call it Area 2)

I have used Repeater control with no paging (Though the records are more but my client hates paging.). Above the repeater control, there were some textbox, dropdowns, checkbox, listbox etc. were placed used for add/update operations. There is a link button in the repeater control for every row, which when clicked opens the records in update mode. It fills all the control with data placed on Area.
*Everything is placed in an UpdatePanel.

Problem

There were more than 10000 records listed in the repeater. When I click the very last record for editing, asynchronous postback happens and data is loaded for editing in Area 1 . But the problem was with the page position. I was not able to see the control’s of Part1, as page was maintaining it’s scroll position after async postback. This is what I don’t want. As it’s not at all user friendly. End-User will never come to know that record has been opened in edit mode. I set the “MaintainScrollPositionOnPostback” property to false but it was not working due to AJAX. Somehow, I want page position to be set to (0,0) so that I can see Area 1 controls.

Solution

The solution was to set Page position back to 0,0, at the end of ajax request. Here is what I did. See below code.

<script type="text/javascript">
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_endRequest(EndRequestHandler);
    function EndRequestHandler(sender, args) {
        window.scroll(0,0);
   }
</script>

Javascript provides a function scroll() which basically scrolls page position to the specified value. It takes two arguments Top and left. I passed it 0,0 and it worked for me.

Enjoy..

Advertisements

Posted in Ajax, ASP.NET | Tagged: , | Leave a Comment »

Update Panel, Default Button and FireFox

Posted by Virendra Dugar on March 29, 2009

ASP.Net 2.0 comes up with a new concept called “Default Button” which is one button on the form will work as default button. Whenever we press the enter button default button will be called.

As for example: In a text box after typing you press enter your default button’s event will be fired.

However, the one thing that was bothering me with the Default Button is it worked like a charm in IE. In Firefox, it behaved weirdly. The problem wasn’t that it didn’t do a postback. That it did. What it didn’t do was hit the server side event (the button click event).

When you are selected in any textbox and you press enter, IE will submit this and hit the button click even. However with FireFox, it will only submit – not call the onclick event.

To solve this add: UseSubmitBehavior="False" to your submit button. Now you can press enter whenever you want in your form and it will do the proper submit regardless of IE or Firefox.

Enjoy….

Posted in Ajax, ASP.NET | Tagged: , | 4 Comments »

Create Gmail-like loading indicator with ASP.NET Ajax

Posted by Virendra Dugar on February 2, 2009

Now days, the better user experience, richer and more interactive are the key criteria for any web application. It can be easily achieved by Ajax and Ajax is used in almost every web application. One of the best example is Gmail. I love the way they show the loading image on the screen when something happens. I am talking about loading indicator (top/right corner fixed, regardless of how the users scrolls or sizes the window). See the image below.

I wanted to have something like this for my application and I found two ways to create Gmail-like loading image.

Using CSS with Update Progress Control

Add an UpdateProgress control to the page.

Add CSS

That’s it… The result is below.

The thing to understand regarding the CSS is, I have set the top and right to 0 and I have also set the Position attribute to fixed.  fixed attribute will keep the image fixed on the screen regardless of scrolling.

On W3C School,

Fixed: An element with position: fixed is positioned at the specified coordinates relative to the browser window. The element’s position is specified with the “left”, “top”, “right”, and “bottom” properties. The element remains at that position regardless of scrolling. Works in IE7 (strict mode)

But there is a problem with this approach and that is unfortunately this solution does not work for IE6 as CSS position: fixed works with all major browsers except… IE6!

So let’s move to the second option.

Using AlwaysVisibleControl of Ajax Control ToolKit.

Add an updateProgress and AlwaysVisibleControl (AjaxControlToolKit).

Add CSS

That’s it… The result is below.

Two properties to understand about AlwaysVisibleControl are HorizontalSide and VerticalSide. HorizontalSide takes 3 values Center, Left and right and VerticalSide takes 3 values Bottom, Middle and Top. This solution works for IE 6 also.

I found some more great articles to place an animated gif over any control:

http://mattberseth.com/blog/2007/05/ajaxnet_example_using_an_updat.htmlhttp://mattberseth.com/blog/2007/06/aspnet_ajax_rendering_a_gmaill.html

Enjoy……

Posted in Ajax, ASP.NET | Tagged: , | Leave a Comment »

Unable to evaluate expression because the code is optimized or a native frame is on top of the call stack

Posted by Virendra Dugar on January 6, 2009

Few days ago, i come across with this strange error. 

“Unable to evaluate expression because the code is optimized or a native frame is on top of the call stack.”

When I debugged my code i found that this error message is coming due to following statment.

Response.Redirect(url); 

I Used the following statement will fix the error.  
Response.Redirect(url,false);  

Response.Redirect internally calls to Response.End method due to this threadabort exception occurs. The Response.End method ends the page execution and shifts the execution to theApplication_EndRequest event in the application’s event pipeline. The line of code that follows Response.End is not executed.

To work around this problem, use one of the following methods:

For Response.Redirect, use an overload, Response.Redirect(String url, bool endResponse) that  passes false for the endResponse parameter to suppress the internal call to Response.End. For example:

Response.Redirect (“nextpage.aspx”, false);

If you use this workaround, the code that follows Response.Redirect is executed.

For Server.Transfer, use the Server.Execute method instead.

Enjoy……

Posted in ASP.NET | Tagged: , | Leave a Comment »

 
%d bloggers like this: