Archive

Archive for the ‘JQuery’ Category

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

July 29, 2010 Leave a comment

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>

 

Categories: Ajax, JavaScript, JQuery Tags: , ,

How to avoid dropdownlist item crop off (Auto sizing dropdownlist, Multiline Item Dropdownlist) – Asp.net, JQuery

July 29, 2010 Leave a comment

Demo:
It is always trickey to style dropdownlists while having very long list items. Specially if we need to squeeze dropdownlist in to narrow spots. However there are numorous ways in the web to achive this, but most of them break the concept of ‘list control’ in Asp.net. This is a very basic solution (pahaps an idea) how to keep very ListBox hidden (with very long items)  in the html and show it when we click an icon and then once we select a item it shows only the text in Multiline, in a narrow space
Example:
Asp.net Web Control exteneded from ListBox:

public class AutoDropDownList : ListBox
    {
        private string style = @"
            <style type=""text/css"">        
                #{0}Container #{0}Text {{ display:block; float:left; }}
                #{0}Container .List {{ 
                    display:none; 
                    position:absolute; 
                    float:left; 
                    margin-left:{2}px; 
                }}
                #{0}Container #{0}StaticContent {{ width:{1}px; float:left; min-height:20px; }}
                #{0}Container .Handle {{ float:right; border:solid 1px #aaa; }}
            </style>
        ";
        private string script = @"
            function displayItem() {{
                $(""#{0}Text"").text($(""#{0} option:selected"").text());
                $(""#{0}Wrapper"").hide();
            }}
            $(document).ready(function () {{
                $(""html"").click(function (event) {{            
                    if (event.target.id == ""{0}Handle"") {{
                        $(""#{0}Wrapper"").show();
                    }}
                    else
                        $(""#{0}Wrapper"").hide();
        
                }});
            }});        
        ";
        public override ListSelectionMode SelectionMode
        {
            get
            {
                return base.SelectionMode;
            }
            set
            {
                throw new NotSupportedException();
            }
        }
        public int ContentWidth { get; set; }
        public AutoDropDownList()
        {
            this.CssClass = "DropDownList";
            this.ContentWidth = 250;
            this.Rows = 10;
        }
        protected override void OnLoad(EventArgs e)
        {
            base.OnLoad(e);
            this.Attributes.Add("onclick", "javascript:displayItem(this)");
        }
        protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);
            this.Page.ClientScript.RegisterClientScriptBlock(this.GetType(), 
                this.ClientID, string.Format(this.script, this.ClientID), true);
            Literal litStyles = new Literal() { Text = string.Format(this.style,
                this.ClientID, this.ContentWidth, this.ContentWidth) };
            this.Page.Header.Controls.AddAt(0, litStyles);
        }
        protected override void Render(HtmlTextWriter writer)
        {
            writer.Write(string.Format("<div class=\"Auto{0}\" id=\"{1}Container\">", 
                this.CssClass, this.ClientID));
            writer.Write(string.Format("<div id=\"{0}StaticContent\" class=\"StaticContent\">", 
                this.ClientID));
            writer.Write(string.Format("<div id=\"{0}Handle\" class=\"Handle\">Drop</div>", 
                this.ClientID));
            writer.Write(string.Format("<span id=\"{0}Text\" class=\"Text\">{1}</span>", 
                this.ClientID, this.SelectedItem != null ? this.SelectedItem.Text : string.Empty));
            writer.Write("</div>");
            writer.Write(string.Format("<div id=\"{0}Wrapper\" class=\"List\">", this.ClientID));
            base.Render(writer);
            writer.Write("</div>");
            writer.Write("</div>");
        }
    }

How to use the control.

<%@ Page Language="C#" %>
<%@ Register Assembly="ActiveApplication" Namespace="ActiveApplication" TagPrefix="asp" %>
<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 runat="server">
        protected override void OnLoad(EventArgs e)
        {
            base.OnLoad(e);
            if (!this.IsPostBack)
            {
                for (int i = 0; i < 100; i++)
                    this.lstBox.Items.Add(@"
                        Very long item in the dorp downlist which will be hidden due to css width b
                        eing set to 200 - This is item " + i);
                this.lstBox.Items[5].Selected = true;
            }            
        }        
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:AutoDropDownList runat="server" ID="lstBox"></asp:AutoDropDownList>
        <asp:Button runat="server" ID="btnSave" Text="Postback" />
    </div>
    </form>
</body>
</html>
Categories: Asp.net, JQuery Tags: ,

How to register a startup (document).ready(..) script only for the first page load

July 22, 2010 Leave a comment

Snippet

    public partial class Test : Page
    {
        private string script = @"
            $(document).ready(function () {

            });
        ";
        protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);
            if (!this.Page.IsPostBack)
                this.Page.ClientScript.RegisterStartupScript(this.GetType(),
                    this.GetType().Name, this.script, true);
        }
    }
Categories: Asp.net, JavaScript, JQuery Tags: , ,