Introduction.
Lately, I ‘ve been exploring the use of jQuery in ASP.NET applications. If you haven’t got the chance yet to try it out, do so!! It is certainly an added value, even when programming in .NET.
However the modal forms can break the postback functionality of your ASP.NET pages. Read below for how to fix it.
What is a modal form ?
A modal form is nothing more than a hidden <div> element that is set to visible by running a small piece of JavaScript code in the browser. It feels very responsive and fast since there is no round trip to the server. The <div> element containing the modal form is already inplace the first time you load the page. The JavaScript just toggles the <div> element between visible and invisible. If you know a little bit about JavaScript and CSS is very easy to understand.
See some examples here.
However when you have ‘postback’ functionality in this <div> element the modal form breaks. The code behind of your ( for example) button clicks ( asp:Button that is) never execute.
Sample application in ASP.NET
Preparing your Visual Studio environment.
- Go to the jQuery download page and download the latest version
- Go to the SimpleModal webpage and download the latest version of the jQuery plugin
- Start Visual Studio and create a new website project.
- Create a new folder (I called mine: ‘scripts’)
- Drag and drop the jQuery JavaScript file into the scripts folder.
- The modal plugin contains various folders. I created a new folder called ‘modal’ in my scripts folder and I copy pasted all the modal files in this new folder
You now have everything in place. You solution explorer should look like this :
Open the default.aspx in HTML view and add a link to the 2 JavaScript files in the <head> section of your HTML page (default.aspx ). Also add a link to the SimpleModal style sheet (also included in the SimpleModal download).
Next step is to add the HTML elements. I created the following elements :
- A link that opens the modal dialog encapsulated in a <div> element
- A label ( This one will be changed by the postback )
- A hidden div element. This is our modal form.
So your results looks like this:
Note: the ID attributes ‘Actionlist’ and ‘ModalWithButtonContext’ above. These ID’s identify the elements for jQuery.
You now have all the elements in place. We only need to add the jQuery functionality. Go back to the <head> element of the page and insert the following small JavaScript. Note that it references to the id attributes of the divs, so make sure they match !!
Now we add some logic to the button. This logic will run when we click on the button in our modal form. For simplicity sake we will only update the Label1 control on the main page with the current time. You can add of course your own code instead. Open the code behind file and add the following code.
Save all your files and try running the application. As you will notice the postback logic does not execute. The label is not updated. Seems like the postback code is broken.
The fix
The problem is that the jQuery SimpelModal code adds the modal form to the end of the <body> tag. ASP.NET however, needs all of the controls within the <form> tag in order to execute properly. So our modal form is ‘out-of-scope’ and will not trigger the postback events.
Luckely we can modify this in the JavaScript code. It sort of a hack but it works for me.
- In Visual Studio go to the solution explorer and open the jquery.simplemodal.js file.
- Find and replace all occurrences of appendTo(‘body’) with appendTo(‘form’).
- Save the file and run your code again.
When you click now, on the button in the modal form. The postback will trigger, adjust the text in the label and close the modal form.
Feedback and comments welcome.
Read Full Post »
