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 ?
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’)
- 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 :
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.
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 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.
- 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 »