Thursday, September 22, 2011

Replace .Net Validation Summary with jQuery UI dialog

This will replace the older looking .Net Validation Summary built-in JavaScript pop-up with a more modern looking jQuery UI dialog.  It works by hiding the real Validation Summary text, then shows it via a dialog by using a wrapper panel.

A new click event (in addition to your original one) is assigned to the submission button.  When the button is clicked, if .Net sets the Page_IsValid to false, then the dialog is triggered.  Otherwise the page submits like normal.

.Net Code

    <asp:Panel ID="panError" runat="server" CssClass="ui-state-error" Style="displaynone">
        <span class="ui-icon ui-icon-circle-close" style="margin0 7px 50px 0floatleft;">
        </span><span>
            <asp:ValidationSummary ID="summaryMain" EnableClientScript="true" ShowMessageBox="false"
                ShowSummary="true" runat="server" CssClass="ui-state-error-text" style="text-align:left" />
        </span>
    </asp:Panel>

JavaScript (jQuery) Code
    <script type="text/javascript">
        jQuery(document).ready(function () {
            $("#<%= this.btnSave.ClientID %>").click(function () {
                if (!Page_IsValid) {
                    $("#<%= this.panError.ClientID %>").dialog({
                        resizable: false,
                        width: 420,
                        modal: true,
                        buttons: {
                            'Close'function () {
                                $(this).dialog('close');
                            }
                        }
                    });
                }
            });
        });
    </script>

3 comments:

mshaw

Nice info. How would you find a control that would contain the panError that is hosted in a placeholder?

martin nielsen

I think there is something wrong to this code. You said that if .Net sets the Page_IsValid to false, then the dialog should be triggered which in my case is not true, it is not getting triggered.

Nannie Co Pam

Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a .Net developer learn from .Net Core Training in Chennai. or learn thru .Net Core Training in Chennai. Nowadays Dot Net has tons of job opportunities on various vertical industry.
or Es6 Training in Chennai. Nowadays JavaScript has tons of job opportunities on various vertical industry.