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.
Great article and very well explained…Thanks so much!!!
From where can I get those css files.
They are included in the download of the simple modal jQuery plugin
http://www.ericmmartin.com/projects/simplemodal/
Thanks! Helped me out a lot … didnt’ work initially cos my JQuery initiating code was further down the page, it must be at the top (obviously – duh!!)
Thanks so much! Saved my day!
Thanks for the articale, it helped a lot,but i have an issue as soon as i click on the Save button which is in my modal popup, it is inserting the data which i want but automatically getting close, may be it is getting postback that is why….but how to stop that ..!!?
No need to do a global change in the jquery.simplemodal.js file. This is an overridable option i.e.
$(“#modalBox”).modal({appendTo: ‘form’});
p.s. You also must not have CssClass=”simplemodal-close” set on your asp:button. So I have the following
function OpenIndicitiveErrorBox() {
$(“#IndicitiveErrorBox”).modal({
appendTo: ‘form’,
escClose: false,
opacity: 80,
overlayCss: { backgroundColor: ‘#fff’ },
containerCss: { backgroundColor: ‘#fff’,
borderColor: ‘#0063dc’,
height: 250,
padding: 5,
width: 700
}
});
};
Please note
My Message Here
That didn’t display right – let’s try using < and >
<script type=”text/javascript”>
function OpenIndicitiveErrorBox() {
$(“#IndicitiveErrorBox”).modal({
appendTo: ‘form’,
escClose: false,
opacity: 80,
overlayCss: { backgroundColor: ‘#fff’ },
containerCss: { backgroundColor: ‘#fff’,
borderColor: ‘#0063dc’,
height: 250,
padding: 5,
width: 700
}
});
};
</script>
<div style=”display: none;” id=”IndicitiveErrorBox”>
<table id=”MessageBox”>
<tbody>
<tr class=”header”>
<td>
Please note
</td>
</tr>
<tr class=”message”>
<td>
<p>
Unfortunately our online annuity planner has encountered a problem, though your
work and any previous quotes will have been saved.</p>
<p>
<strong>Please call us on
<cms:cmsDiv ID=”cmsDiv” runat=”server”>
<Html>
{cms:phone}
</Html>
</cms:cmsDiv>
where we can check your selections and provide you with comparitive quotes over
the phone.</strong></p>
</td>
</tr>
<tr class=”message”>
<td style=”text-align: center;”>
<asp:Button ID=”btnIndicitiveErrorBoxClose” runat=”server” Text=”Close”></asp:Button>
</td>
</tr>
</tbody>
</table>
</div>
Love ya man you saved my day
You are a saint! I’ve been scratching my head on this all day with different approaches. In the end i just needed to change one word in my .js!
Thanks!
Hello,
How I can force close dialog after finished back proses from codebehind?
Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button2.Click
‘run process
‘close jquery modal
Dim sb As StringBuilder = New StringBuilder
sb.Append(“$(function(){$(‘#basic-modal-content’).dialog(‘close’); return false;});”)
Me.Page.ClientScript.RegisterStartupScript(GetType(Page), “myscript”, sb.ToString, True)
End Sub
My code above not working, do you know how to fix it or other method to close dialog as long I can use from code behind.