Asp – How to update page data after event handling

asp.netevent handlingpage-lifecycle

On Page_Init I create a table of dynamically created controls based on a couple of database tables. One of the controls is an ImageButton for moving an list item up the list. What this event handler does is to update the SortOrder column in the database for the affected items.

Now the problem is that since the controls are created in the Page_Init event and the SortOrder is updated later on when the ImageButton command event is fired. What's the best procedure for updating the table with the correct SortOrder. If I recreate the table after the event has fired the ImageButton command event does not work any more.

Should I implement a method for updating the data in the table without recreating it?
Should I reload the page in code after the event has fired?

What's your preferred way for solving this problem?

Best Answer

Page events such as Init and Load will always fire before the event handler that raised the postback. This is the basis of the Page lifecycle (For a visual representation by Peter Bromberg, see here). Most developers new to ASP.NET have a major problem understanding and appropriately handling this "quandary".

The ideal way to do this is:

a. Your Page_Init should call a procedure (let's call it BindData() for illustration) that handles the creation of the table based on database data. This method would be similar to a binding method that binds to the database data and renders UI elements on the basis of that binding. IOW, you should remove the table creation code from the Page_Init method and put it in a separate method so that it can be called when needed.

Important note: This BindData() method also handles the attaching of the eventhandler for the dynamically created ImageButton control to the control. We'll call this ImageButton_Click. This is crucial for the control to the event to fire on subsequent postback.

b. When your ImageButton_Click method executes, it calls the BindData() method to recreate the table and it's bindings but with new sort order rules.

So, the order of execution on first load is:

Page_Init
BindData()

The order of execution on subsequent loads (on postback) is:

Page_Init
BindData() - Eventhandler for ImageButton attached.
ImageButton_Click
BindData()

Related Solutions

Javascript – How to debug JavaScript / jQuery event bindings with Firebug or similar tools

See How to find event listeners on a DOM node.

In a nutshell, assuming at some point an event handler is attached to your element (eg): $('#foo').click(function() { console.log('clicked!') });

You inspect it like so:

jQuery 1.3.x

var clickEvents = $('#foo').data("events").click;
jQuery.each(clickEvents, function(key, value) {
  console.log(value) // prints "function() { console.log('clicked!') }"
})

jQuery 1.4.x

var clickEvents = $('#foo').data("events").click;
jQuery.each(clickEvents, function(key, handlerObj) {
  console.log(handlerObj.handler) // prints "function() { console.log('clicked!') }"
})

See jQuery.fn.data (where jQuery stores your handler internally).

jQuery 1.8.x

var clickEvents = $._data($('#foo')[0], "events").click;
jQuery.each(clickEvents, function(key, handlerObj) {
  console.log(handlerObj.handler) // prints "function() { console.log('clicked!') }"
})

How to import a namespace in Razor View Page

Finally found the answer.

@using MyNamespace

For VB.Net:

@Imports Mynamespace

Take a look at @ravy amiry's answer if you want to include a namespace across the app.

Best Answer

Related Solutions

Javascript – How to debug JavaScript / jQuery event bindings with Firebug or similar tools

How to import a namespace in Razor View Page

Related Topic