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>

2 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.