Monday, May 2, 2011

LinkButton inside ListView within UpdatePanel cause full postback

Hi Friends,

Today I was creating a listing page with ASP.Net 4.0. I wanted below items on the page

  • A result for my search, I have used ListView for it
  • Inline editing for 1-2 column of my list
  • Edit & Update/Cancel button
    • Generally I am using ImageButton to display Edit/Update/Cancel buttons
    • This time I thought lets use LinkButton, I have also used AjaxControlToolkit’s HoverMenu extender.
  • Apply Ajax on the page, I have placed ListView inside UpdatePanel and set ChildrenAsTriggers as true.

Ok, now I have implemented all the items I required on the page. When I clicked on the Edit link, I was surprised, LinkButton was causing Synchronized Postback (Full page postback). There are many causes where your page do full postback like

  • Page HTML have some unclosed tags
  • there is some JavaScript error
  • You have generated control dynamically but forgot to assign ID to your control

Well I have verified all of them but my problem was different, I was totally confused that how to overcome this issue “I have a update panel, have ChildrenAsTriggers true, Ajax framework is loaded, still my LinkButton causing full postback”

I have given a try, I have converted my LinkButton to Button, everything works fine and page is now doing Partial postback. Now I knew that there is a problem with LinkButton.

By lots of trial and error I figured it out, we need to add

<pages clientIDMode="AutoID"></pages>

ClientIDMode specifies, how will ASP.Net 4.0 generates the id attribute for rendered HTML controls/elements. In previous version of ASP.Net there was not any concept of client id generation, but it was similar to AutoID configuration we have set. Currently default settings for client ID is Predictable.

Hope this will help you to solve your problem

Nirav