Thursday, August 12, 2010

How to show validation summary in a dialogue box (not alert box) using jQuery

Please register a script to wrap the validation summary div with suitable wrapper element and then call to show dialogue. Use page clientscript register start up script to register the script if validation fails in the code behind.


Example:
<%@ Page Language="C#" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head2" runat="server">
    <link href="Scripts/ui/css/jquery.ui.all.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/ui/jquery-ui-1.8.4.min.js" type="text/javascript"></script>
    <script runat="server">
        private string script = @"
            $(document).ready(function () {
                $("".ValidationSummary"").wrap(""<div class='dialogue'></div>"");
                $("".dialogue"").dialog();
            });
        ";
        protected void ValidateDateOfBirth(object sender, ServerValidateEventArgs e)
        {
            DateTime dob;
            e.IsValid = DateTime.TryParse(this.txtDob.Text, out dob);
        }
        protected void Save(object sender, EventArgs e)
        {
            this.Page.Validate();
            if (this.IsValid)
            {
 
            }
            else
                this.ClientScript.RegisterStartupScript(this.GetType(), 
                    this.GetType().Name, this.script, true);
        }
    </script>
</head>
<body>
    <form id="form2" runat="server">    
        <asp:ValidationSummary runat="server" ID="ValidationSummary" CssClass="ValidationSummary" />
        <asp:TextBox runat="server" ID="txtName" />
        <asp:RequiredFieldValidator runat="server" ID="rvalName" 
            ControlToValidate="txtName" ErrorMessage="Please enter a name" Display="None" />
        <asp:TextBox runat="server" ID="txtDob" />
        <asp:CustomValidator runat="server" ID="cvalDob" 
            OnServerValidate="ValidateDateOfBirth" ErrorMessage="Invalid date of birth" />
        <asp:Button runat="server" ID="btnSave" Text="Save" OnClick="Save" />
    </form>
</body>
</html>

No comments:

Azure Storage Account Types

Defferent Types of Blobs Block blobs store text and binary data. Block blobs are made up of blocks of data that can be managed individually...