CodeProject: AJAX Dirty-Panel. Free source code and programming help

Have any of your users ever told you that after filling that long data entry form he accidentally closed the browser or moved to another page and forgot to click the save button? I heard this story more than once, and at the end my responses I often told he user something like "Well, you should pay more attention when you're filling out a form." Of course, I didn't say it using these words, but that was the only thing we could say.

In fact, keeping track of fields that were changed in classical ASP.NET forms is not an easy task. Since every postback fires the onbeforeunload event, there was no generic way of knowing if the postback was intentional or not. So we had to write a lot of custom JavaScript to manage that.

Now in the AJAX world, this limitation is gone. If we have a 100% "ajaxfied" page, the onbeforeunload event will fire only if the user actually leaves the page. It makes our lives much easier.

This is a Panel that automatically detects if any control inside it was changed and shows an alert if the user tries to leave the page before saving the data.

Using the code

Once again I am using the Anthem.NET library to give AJAX functionality. This webcontrol inherits from the Anthem Panel, so what you need to do is to put all your data entry controls within this panel and set the property OnLeaveMessage. This property corresponds to the message that will be shown when the user tries to leave the page without saving its contents. When the user actually clicks the save button, you need to tell the panel to store the new values so it won't show the alert when the user leaves the page. This is done by calling the panel's Reset method when the data is saved.

Conclusion

This is a simple to use, yet very useful webcontrol that can enhance the usability of your web application.

You must Sign In to use this message board.


Per page

FirstPrevNext

need licence for DirtyPanel.dll??? Urgent

t111111

22:46 7 May '09

I want to use the DirtyPanel.dll in my application. 1)Should i need any license to use it? 2)For using this I need to just add the reference for the .dll and incorporate it with the Update panel. Please correct me, if i am wrong. Thanks in advance...
Sign In·View Thread·PermaLink

Re: need licence for DirtyPanel.dll??? Urgent

Cassio Mosqueira

3:47 8 May '09

1) You don't need a license. 2) Yes, just add the reference to your project. Regards, Cassio Alves
Sign In·View Thread·PermaLink

Cross Broswer

Navneet Anuth

2:41 22 Apr '09

Doesn't works on Google chrome nAvz
Sign In·View Thread·PermaLink

AJAX 1.0 (w/o anthem)

dB.

20:38 6 Aug '07

Before I start coding this ... do you have a tested version with AJAX 1.0 (Atlas)? - Thx. dB. - dblock.org
Sign In·View Thread·PermaLink

Re: AJAX 1.0 (w/o anthem)

Cassio Alves

21:41 6 Aug '07

Sorry, I don't. Regards, Cassio Alves
Sign In·View Thread·PermaLink

Re: AJAX 1.0 (w/o anthem)

dB.

17:41 10 Aug '07

Implemented and posted. http://www.codeproject.com/useritems/ajaxdirtypanelextender.asp[^] dB. - dblock.org
Sign In·View Thread·PermaLink

asp:FormView - Not Working

Qasim Javed

3:30 18 Jul '07

I am trying to use this component with FormView but all controls disapears. Any Idea?

<asp:FormView runat="server" ID="FormView1" DefaultMode="ReadOnly">
      <PagerSettings FirstPageText="First" LastPageText="Last" NextPageText="Next" PreviousPageText="Previous"
            Mode="NextPreviousFirstLast" />

<ItemTemplate>
hello world
   <table>
            <tr>
                  <td>
                        TextBox:
                  </td>
                  <td>
                        <Anthem:TextBox runat="server" ID="txtField" />
                  </td>
            </tr>
            <tr>
                  <td>
                        DropDownList:
                  </td>
                  <td>
                        <asp:DropDownList runat="server" ID="ddlField" >
                              <asp:ListItem>Item 1</asp:ListItem>
                              <asp:ListItem>Item 2</asp:ListItem>
                              <asp:ListItem>Item 3</asp:ListItem>
                        </asp:DropDownList>
                  </td>
            </tr>
            <tr>
                  <td>
                        CheckBox:
                  </td>
                  <td>
                        <Anthem:CheckBox runat="server" ID="chkField" />
                  </td>
            </tr>
               <tr>
                  <td>
                        RadioButton:
                  </td>
                  <td>
                        <Anthem:RadioButton runat="server" ID="rbField1" GroupName="radio" /> 
                        <Anthem:RadioButton runat="server" ID="rbField2" GroupName="radio" />
                  </td>
            </tr>
            <tr>
                  <td>
                        TextArea:
                  </td>
                  <td>
                        <Anthem:TextBox runat="server" ID="txtField2" TextMode="MultiLine" />
                  </td>
            </tr>
            <tr>
                  <td>
                        DataGrid:
                  </td>
                  <td>
                        <asp:DataGrid runat="server" ID="dgFields" AutoGenerateColumns="false">
                              <Columns>
                                    <asp:TemplateColumn HeaderText="Column 1">
                                          <ItemTemplate>
                                                <asp:TextBox runat="server" ID="txtGrid" />
                                          </ItemTemplate>
                                    </asp:TemplateColumn>
                              </Columns>
                        </asp:DataGrid>
                  </td>
            </tr>
      </table>
</ItemTemplate>
</asp:FormView>

Regards
Qasim

Re: asp:FormView - Not Working

Cassio Alves

21:44 6 Aug '07

Hi, Are you using the dirty-panel inside a formview or the other way around? Regards, Cassio Alves
Sign In·View Thread·PermaLink

Tooltip Image Data

ngovanphuc

0:54 13 Jul '07

please. I don't no method how to make toolip like radtooltip. I known this control please for me apply this code . I need it for my topic in my school. Thanks Ngo Gia Phuc
Sign In·View Thread·PermaLink

it does not work when you have item template in grid view [modified]

tahhan

20:44 11 May '07

I have this template inside grid view

'asp:TemplateField ShowHeader="False" SortExpression="Delete">
ItemStyle Width="30px" />
ItemTemplate>
asp:LinkButton ID="lnkDeleteDetail" runat="server" CausesValidation="False" CommandName="Delete" Text="Delete"><img src="Images/delete.gif" style="border-width:0px" alt="Delete"> if i click on the link the message of Dirty-Panel will appear

-- modified at 1:51 Saturday 12th May, 2007

-- modified at 1:52 Saturday 12th May, 2007

(Mohammed Tahhan) thank u

Re: it does not work when you have item template in grid view

Cassio Alves

5:55 12 May '07

Are you using the Anthem.NET library?
Your LinkButton should be an Anthem LinkButton, not an ASP one.


<Anthem:LinkButton ID="lnkDeleteDetail"  runat="server" CausesValidation="False" CommandName="Delete" Text="Delete">

Keep in mind that to use this control successfully your page should not fire traditional postbacks, only AJAX callbacks. Using Anthem.NET is an excellent choice for doing this.

Regards,
Cassio Alves
Cool

Perfect timing

Bryan Avery

0:05 9 May '07

Thanks, that is perfect timing as I have been looking at doing to same thing, saved me so much time and effort
Sign In·View Thread·PermaLink

Very cool

Michael J. Collins

9:09 8 May '07

How did you get it to fire when the user clicks the window X?? That's what always got me. As to the article being short, I just checked your website, and I'm pretty sure you're not just using codeproject as a repository. Michael J. Collins Developer
Sign In·View Thread·PermaLink

Re: Very cool

Cassio Alves

11:42 8 May '07

Thanks Michael. The catch is on the onbeforeunload. It fires everytime you leave or submit the page. Regards, Cassio Alves
Sign In·View Thread·PermaLink

Re: Very cool

zhulei_20

16:32 9 May '07

thanks:
Sign In·View Thread·PermaLink

Doesn't work in Opera 9.20

richzilla

8:48 8 May '07

I just wanted to let you know that your sample link doesn't work in the latest version of Opera 9.20.
Sign In·View Thread·PermaLink

Re: Doesn't work in Opera 9.20

Cassio Alves

11:52 8 May '07

Thanks. It seems that Opera do not support the onbeforeunload event and I don´t know if there is a workaround. Regards, Cassio Alves
Sign In·View Thread·PermaLink

how to use control on on tab page

just_kideng

19:58 7 May '07

Hi Can you please tell me how to use this control on tab page.when i navigate b/w tabs,the confirmation box appears twice. Any help??
Sign In·View Thread·PermaLink

Re: how to use control on on tab page

Cassio Alves

5:01 8 May '07

Hi, I didn´t test it with tabs. I´ll try to add support for multiple panels on the same page. Regards, Cassio Alves
Sign In·View Thread·PermaLink

Re: how to use control on on tab page

just_kideng

22:27 8 May '07

Hi, Thnx Cassio for ur reply. i m waiting for ur update for multiple panels on same page.
Sign In·View Thread·PermaLink

Nice work!

Tim Brats

9:15 6 May '07

You´ve just made my life easier! Thnx a lot! Timmy
Sign In·View Thread·PermaLink

Code project is not source repository

Maruf Maniruzzaman

17:35 30 Apr '07

Thank you for sharing your knoeledge. I think you have worked hard on the material. But the article is very brief. Could you please explain more so that we understand your idea clearly. Carry on with your good job. We expect a nice article and sample demo code is cool with that. But only sample code does not make sense (I think). Tomorrow is a blank page
Sign In·View Thread·PermaLink	1.00/5

Re: Code project is not source repository

Cassio Alves

18:49 30 Apr '07

Hi Maruf,

Thank you for your feedback.
It is true that this is a very brief article. But that's because it is a extremely simple control. As I stated in the article, there are only two things you need to do in order to use it: set the message that will be shown when the user leaves the page and call the Reset method when the user saves the data. Yet I find it very useful and I've been using it on my projects.

Maybe this article isn't for you, but I hope some people will find it useful.

Regards,
Cassio Alves
Cool

5.00/5

Re: Code project is not source repository

Maruf Maniruzzaman

19:26 30 Apr '07

Hmmmm....

Actually your control may be usefull to people. (May be I'll use it for my next form ;P). But it'd be nice if u'd give a description (may be brief) how the control works. I know we all are busy (I have no article still up to now) - but I just wanted to tell people who visit this site that article is more usefull than a control. Its always better to teach people how to catch fish than to give them a fish - an old chinise proverb.

Thank you

Tomorrow is a blank page

3.00/5

Last Visit: 20:34 22 Nov '09 Last Update: 20:34 22 Nov '09

Introduction

Using the code

Conclusion