Wednesday, July 28, 2010

How to jQuery to show hide a panel based on a condition

Please add a generic hanlder (Right click on Web Project > Add > New Item > Web > Generic Hanlder). In this case I have created a folder called Hanlder for Generic handlers.
Generic Hanlder:
/// <summary>
/// Summary description for CheckAccountInfo
/// </summary>
public class CheckAccountInfo : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        string accountId = context.Request.QueryString.Get("AccountId");
        if (!string.IsNullOrEmpty(accountId))
        {
            ///
            /// Validate account here I have just taken fake condition 
            /// to show the diffrence
            ///
            if (DateTime.Now.Second % 2 == 0) context.Response.Write("true");
            else context.Response.Write("false");
        }
        else
            context.Response.Write("false");
    }
 
    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

 
Consuming Page:

<%@ Page Language="C#" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        var accountId = "-1";
        function checkStatus() {
            if (accountId == "-1") accountId = $(".AccountId").attr("value");
            $.ajaxSetup({                
                cache: false
            });
            $.ajax({
                url: "Handlers/CheckAccountInfo.ashx?AccountId=" + accountId,
                success: function (data) {
                    if (data == "false") $(".AccountInformation").hide("slow");
                    else $(".AccountInformation").show("slow");
                }
            });
        }
    </script>
    <script runat="server">
        protected override void OnInit(EventArgs e)
        {
            base.OnInit(e);
            this.ckboxAccountStatus.Attributes.Add("onclick""javascript:checkStatus()");
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:CheckBox runat="server" ID="ckboxAccountStatus" Text="Account Closed" />
        <asp:Panel runat="server" ID="pnlAccountInformation" CssClass="AccountInformation">
            <asp:TextBox runat="server" ID="txtAccountNo" Text="ACC12345676" CssClass="AccountId"></asp:TextBox>
            <asp:TextBox runat="server" ID="txtMemeberNo" Text="MEM12345678"></asp:TextBox>
        </asp:Panel>
    </div>
    </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...