Charith's Blog

Tuesday, November 02, 2010

How to disable past days in asp.net calender control

<%@ Page Language="C#" %>
<html>   
<head id="Head1" runat="server">  
    <script runat="server">
        protected void DisablePastDays(object sender, DayRenderEventArgs e)
        {
            if (e.Day.Date < DateTime.Now)
            {
                e.Cell.Enabled = false;
                e.Day.IsSelectable = false;
                e.Cell.BackColor = System.Drawing.Color.Gray;
            }
        } 
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:Calendar runat="server" ID="calDate" OnDayRender="DisablePastDays" />
    </form>
</body>
</html>

How to add detail textbox opon the check of a check box

Demo:
Example:
Markup:

<%@ Page Language="C#" %>
<html>   
<head id="Head1" runat="server">  
</head>
<body>
    <form id="form1" runat="server">
        <asp:FreeCheckBox runat="server" 
            ID="freeCheckBox" 
            DetailPlaceHolderId="phDetails" 
            Text="Are you disabled?" 
            DetailLabel="Please please provide details" />
        <asp:PlaceHolder runat="server" ID="phDetails" />
        <hr />
        <asp:Button runat="server" ID="btnSave" Text="Save" />
    </form>
</body>
</html>

Control:

public class FreeCheckBox : CheckBox
{
    private TextBox txtDetail;
    private Panel pnlDetail;
    private string script = @"
    function ShowHideDetailPanel(detailPanel, source) {            
        var panel = document.getElementById(detailPanel);
        if (panel == undefined) return;
        if (source.checked == true)
            panel.style.display = ""block"";
        else
            panel.style.display = ""none"";
    }
";
    public string DetailLabel { get; set; }
    public string Details { get; set; }
    public string DetailPlaceHolderId { get; set; }
    public bool IsMultiline { get; set; }
    public FreeCheckBox()
    {
        this.DetailPlaceHolderId = string.Empty;
        this.IsMultiline = false;
    }
    protected override void OnInit(EventArgs e)
    {
        base.OnInit(e);
        this.CreateControlHeirarchy();
    }
    public void CreateControlHeirarchy()
    {
        this.pnlDetail = new Panel() { ID = string.Concat(this.ID, "_DetailPanel"), CssClass = "DetailPanel" };
        this.txtDetail = new TextBox() { ID = string.Concat(this.ID, "_TextBox"), 
                                            CssClass = "DetailTextBox", TextMode = TextBoxMode.MultiLine };
        if (this.IsMultiline) this.txtDetail.TextMode = TextBoxMode.MultiLine;
        this.pnlDetail.Controls.Add(new Label() { Text = this.DetailLabel, CssClass = "DetailLabel" });
        this.pnlDetail.Controls.Add(this.txtDetail);
        PlaceHolder phDetail = this.Page.FindControl(this.DetailPlaceHolderId) as PlaceHolder;
        Control parent = this.Parent;
        while (phDetail == null)
        {
            phDetail = parent.FindControl(this.DetailPlaceHolderId) as PlaceHolder;
            if (phDetail == null) parent = parent.Parent;
            if (parent == null) break;
        }
        if (phDetail != null) phDetail.Controls.Add(pnlDetail);
        this.Attributes.Add("onclick", 
                string.Format("javascript:ShowHideDetailPanel('{0}', this)", pnlDetail.ClientID));
    }
    protected override void OnLoad(EventArgs e)
    {
        base.OnLoad(e);
        if (this.Checked)
            this.pnlDetail.Attributes.Add("style", "display:block;");
        else
            this.pnlDetail.Attributes.Add("style", "display:none;");
    }
    protected override bool LoadPostData(string postDataKey, NameValueCollection postCollection)
    {
        bool value = base.LoadPostData(postDataKey, postCollection);
        if (this.Checked)
            this.Details = this.txtDetail.Text;
        return value;
    }
    protected override void OnPreRender(EventArgs e)
    {
        base.OnPreRender(e);
        this.Page.ClientScript.RegisterClientScriptBlock(
                this.GetType(), this.GetType().Name, this.script, true);
    }
}

How to download images

Demo:
Code:

<%@ Page Language="C#" %>
<html>   
<head id="Head1" runat="server">  
    <script runat="server">
        public void DownloadPicture(object sender, EventArgs e)
        {
            ImageButton button = sender as ImageButton;
            if (button != null)
            {
                string fileName = button.CommandArgument;
                this.Response.AddHeader("content-disposition", 
                    string.Format("attachment;filename={0}", Path.GetFileName(fileName)));
                this.Response.ContentType = "image/jpg";
                this.Response.WriteFile(this.Server.MapPath("~/Images/" + fileName));
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ImageButton runat="server" ID="btnPic1" Text="Pic 1" CommandArgument="Image1.jpg" 
            OnClick="DownloadPicture" Width="100" Height="75" ImageUrl="~/Images/Image1.jpg" />
        <asp:ImageButton runat="server" ID="btnPic2" Text="Pic 2" CommandArgument="Image2.jpg" 
            OnClick="DownloadPicture" Width="100" Height="75" ImageUrl="~/Images/Image2.jpg" />
        <asp:ImageButton runat="server" ID="btnPic3" Text="Pic 3" CommandArgument="Image3.jpg" 
            OnClick="DownloadPicture" Width="100" Height="75" ImageUrl="~/Images/Image3.jpg" />
        <asp:ImageButton runat="server" ID="btnPic4" Text="Pic 4" CommandArgument="Image4.jpg" 
            OnClick="DownloadPicture" Width="100" Height="75" ImageUrl="~/Images/Image4.jpg"/>
        <asp:ImageButton runat="server" ID="btnPic5" Text="Pic 5" CommandArgument="Image5.jpg" 
            OnClick="DownloadPicture" Width="100" Height="75" ImageUrl="~/Images/Image5.jpg"/>
    </form>
</body>
</html>

Monday, November 01, 2010

How to implement a custom default button for a page

<%@ Page Language="C#" %>
<html>   
<head id="Head1" runat="server">
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script language="javascript">
        $(document).ready(function () {
            $(".TextBox").bind("keyup", function (evt) {
                evt = (evt) ? evt : window.event
                var charCode = (evt.which) ? evt.which : evt.keyCode
                if (charCode == 13)
                    __doPostBack('<%= btnDefault.UniqueID %>', '');
                return true;
            });
            $(".TextBox").bind("keypress", function (evt) {
                evt = (evt) ? evt : window.event
                var charCode = (evt.which) ? evt.which : evt.keyCode
                if (charCode == 13)
                    return false;
                return true;
            });
        });
    </script>      
    <script runat="server">
        protected void Default(object sender, EventArgs e)
        {
            Response.Write(string.Format("Default button clicked at {0}",DateTime.Now.ToString("hh:mm:ss")));
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:TextBox runat="server" ID="TextBox1" CssClass="TextBox" onkeypress="return false" />
        <asp:TextBox runat="server" ID="TextBox2" CssClass="TextBox" onkeypress="return false" />
        <asp:TextBox runat="server" ID="TextBox3" CssClass="TextBox" onkeypress="return false" />
        <asp:TextBox runat="server" ID="TextBox4" CssClass="TextBox" onkeypress="return false" />
        <asp:TextBox runat="server" ID="TextBox5" CssClass="TextBox" onkeypress="return false" />        
        <hr />
        <asp:Button runat="server" ID="btnDefault" Text="Default" OnClick="Default" UseSubmitBehavior="false" />
        <asp:Button runat="server" ID="Button1" Text="Other" />
        <asp:Button runat="server" ID="Button2" Text="Other" />
        <asp:Button runat="server" ID="Button3" Text="Other" />
        <asp:Button runat="server" ID="Button4" Text="Other" />
        <asp:Button runat="server" ID="Button5" Text="Other" />
    </form>
</body>
</html>

How to add select other/details textbox next to selection

How to remember the TreeView selection during postbacks

Markup:

<asp:TreeView runat="server" ID="trvItems" EnableClientScript="false" />
<asp:Button runat="server" ID="btnSave" Text="Save" />

Code:

public partial class Test : Page
{
    protected List<string> SelectedNodes
    {
        get { return (List<string>)(ViewState["TREENODECOLLECTION"] ?? (ViewState["TREENODECOLLECTION"] = new List<string>())); }
        set { ViewState["TREENODECOLLECTION"] = value; }
    }
    protected override void OnLoad(EventArgs e)
    {
        base.OnLoad(e);
        this.trvItems.TreeNodeExpanded += new TreeNodeEventHandler(TreeNodeExpanded);
        this.trvItems.TreeNodeCollapsed += new TreeNodeEventHandler(TreeNodeCollapsed);
        this.trvItems.SelectedNodeChanged += new EventHandler(SelectedNodeChanged);
        if (!this.IsPostBack)
        {
            this.InitalizeTreeView();
            this.trvItems.DataBind();
            this.trvItems.CollapseAll();
            this.SelectedNodes = new List<string>();
        }
        else
            this.SetExapandNodes(this.trvItems.Nodes);
            
    }
    protected void InitalizeTreeView()
    {
 
    }
    protected void SelectedNodeChanged(object sender, EventArgs e)
    {
            
    }
    protected void TreeNodeCollapsed(object sender, TreeNodeEventArgs e)
    {
        this.SelectedNodes.Remove(e.Node.Value);
        this.SetExapandNodes(this.trvItems.Nodes);
    }
    protected void TreeNodeExpanded(object sender, TreeNodeEventArgs e)
    {
        this.SelectedNodes.Add(e.Node.Value);
        this.SetExapandNodes(this.trvItems.Nodes);
    }
    protected void SetExapandNodes(TreeNodeCollection nodes)
    {
        foreach(TreeNode n in nodes)
        {
            if(this.SelectedNodes.Exists(x=>x.Equals(n.Value)))
                n.Expand();
            if(n.ChildNodes.Count>0)
                this.SetExapandNodes(n.ChildNodes);
        }
    }
}

Thursday, October 28, 2010

How to change a theme dynamically

We need to assign a theme in the page preInit event to legimately change the theme dynamically.

protected override void OnInit(EventArgs e)
{
    this.Theme = "Blue";
    base.OnInit(e);
}

However there are couple of challanges if you let users to chose the theme. First one is by the pre-init phase, there are not values loaded for page controls has LoadViewState has not yet been executed.
Solution 1: You can use Request.Form[...] collection.

protected override void OnInit(EventArgs e)
{
    string theme = this.Request.Form[ddlTheme.UniqueID];
    if (!string.IsNullOrEmpty(theme))
        this.Theme = theme;
    else
        this.Theme = "Default";
    base.OnInit(e);
}

Solution 2: You can use a Session variable but we have to re-execute the page to see the session variable.

protected override void OnInit(EventArgs e)
{
    string theme = Session["theme"] as string;
    if (!string.IsNullOrEmpty(theme))
        this.Theme = theme;
    else
        this.Theme = "Default";
    base.OnInit(e);
}
protected void ddlTheme_SelectedIndexChanged(object sender, EventArgs e)
{
    Session["Theme"] = this.ddlTheme.SelectedValue;
    Server.Transfer("Page.aspx");
}

First request takes long time in a Asp.net web application

Application Pool recycle time interval.
When you deploy an Asp.net web application to IIS, as you already know each application get assigned to an Application Pool. Each application pool has a recycle interval.
InetMgr-> Application Pools -> [your application pool ] -> Advanced Settings

When the application pool execution time exceeds its configured recycle time interval application pools get recycled. When a application pool get recycled all the temporary classes which represents aspx pages need to be recreated and also all the application need re-initialize. This process may cause your uses experience long time delays for the first request to the server.
Application Pool ideal timeout.
Application Pool has ideal timeout, which means if there are no requests to the application pool for a time greater than ideal timeout IIS shutdown the Application Pool to free up resources. Zero means no timeout. So if you experience delays due to ideal timeout, you can disable ideal timeout by setting value to zero. But most of the shared hosts have this value configured to maximize the efficiency of resource utilization.
netMgr-> Application Pools -> [your application pool ] -> Advanced Settings

With asp.net 4.0
When you redeploy the site, it is inevitable for the first request it takes time as application need to re-initialize. Fortunately in Asp.net 4.0 there is a option to wake up an application immediately after you deploy the application.

<applicationpools>
  <add name="MyApplicationPool" startMode="AlwaysRunning" />
</applicationpools>

Please see this section for more information.

Thursday, October 21, 2010

Useful regular expressions

Match style tag in VS: style=(("(([:b]*[^"]*[\n]*[:b]*)*)")|('(([:b]*[^']*[\n]*[:b]*)*)'))

Sunday, October 17, 2010

How to show budy cursor while processing a request

Please note this example deos not work in Mozilla Firefox.

Demo:

<%@ Page Language="C#" %>
<html>
<head id="Head1" runat="server">
    <script runat="server">
        public void Save(object sender, EventArgs e)
        {
            System.Threading.Thread.Sleep(5000);
            this.lblLastUpdate.Text = DateTime.Now.ToString("hh:mm:ss");
        }
    </script> 
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager runat="server" ID="pageScriptManager">
        </asp:ScriptManager>
        <script language="javascript" type="text/jscript">
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function () {
                document.body.style.cursor = "auto";
            });
            Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(function () {
                document.body.style.cursor = "wait";
            });
        </script>
        <asp:UpdatePanel runat="server" ID="upnlInsertContent">
            <ContentTemplate>                
                <asp:Button runat="server" ID="btnSave" OnClick="Save" Text="Save" />
                <asp:Label runat="server" ID="lblLastUpdate" />
            </ContentTemplate>
        </asp:UpdatePanel>    
    </form>
</body>
</html>

Page.RegisterRequiresRaiseEvent

When you implement IPostBackEventHanlder RaisePostBackEvent method get automatically get called only if you postback the form with _EVENTTARGET equal to UniqueID of the web control [__doPostBack(‘ctrl001$mybutton1’,’’)]. But if you need to develop complex postback enable control which will invoke the RaisePostBackEvent as a response to custom __EVENTTRAGETs [__doPostBack(‘custom_target’)] not the UniqueID of the control, then you can register the complex postback enable control with Page.RegisterRequiresRaiseEvent

Example 1: This control postback with the __EVENTTARGET, which is equal UniqueID of the control. This picks up the RaisePostBackEvent method automatically.

public class CustomButton : WebControl, IPostBackEventHandler
{
    public event EventHandler Click;
    protected override void RenderContents(HtmlTextWriter writer)
    {
        writer.Write(string.Format(
            @"<input type=""button"" name=""{0}"" id=""{1}"" 
                value=""Click"" onclick=""javascript:__doPostBack('{0}','')"" />",
            this.UniqueID, this.ClientID));
    }
    public void RaisePostBackEvent(string eventArgument)
    {
        if (this.Click != null)
            this.Click(this, new EventArgs());
    }
}

Example 2: This control postback with the __EVENTTARGET which is NOT equal to UniqueID of the control. So RaisePostBackEvent will NOT get raised automatically. Thus we need to call Page.RegisterRequiresRaiseEvent explicitly. However this approach does not pick up the eventArgument from the postback call.

public class ComplexButton : WebControl, IPostBackEventHandler
{
    public event EventHandler Click;
    public void RaisePostBackEvent(string eventArgument)
    {
        if (this.Click != null)
            this.Click(this, new EventArgs());
    }
    protected override void OnLoad(EventArgs e)
    {
        base.OnLoad(e);
        this.Page.RegisterRequiresRaiseEvent(this);
    }
    protected override void RenderContents(HtmlTextWriter writer)
    {
        writer.Write("<div>");
        writer.Write(string.Format(
            @"<input type=""button"" name=""{0}"" id=""{1}"" 
                value=""Save"" onclick=""javascript:__doPostBack('{0}','')"" />",
            this.UniqueID + "$Name", this.ClientID + "_Name"));
        writer.Write(string.Format(
            @"<input type=""button"" name=""{0}"" id=""{1}"" 
                value=""Edit"" onclick=""javascript:__doPostBack('{0}','')"" />",
            this.UniqueID + "$Age", this.ClientID + "_Age"));
        writer.Write("</div>");
    }
}

Example 3: If you need to map different buttons inside the same web control to different event, it is better to use same name as the custom controls UniqueID for the __EVENTTARGET and use eventArgument to distinguish which button get clicked.

public class ComplexButton : WebControl, IPostBackEventHandler
{
    public event EventHandler Save;
    public event EventHandler Edit;
    public void RaisePostBackEvent(string eventArgument)
    {
        if (string.IsNullOrEmpty(eventArgument)) return;
        if (eventArgument.Equals("Save"))
        {
            if (this.Save != null)
                this.Save(this, new EventArgs());
        }
        else if (eventArgument.Equals("Edit"))
        {
            if (this.Edit != null)
                this.Edit(this, new EventArgs());
        }
    }
    protected override void RenderContents(HtmlTextWriter writer)
    {
        writer.Write("<div>");
        writer.Write(string.Format(
            @"<input type=""button"" name=""{0}"" id=""{1}"" 
                    value=""Save"" onclick=""javascript:__doPostBack('{0}','Save')"" />",
            this.UniqueID, this.ClientID + "_Name"));
        writer.Write(string.Format(
            @"<input type=""button"" name=""{0}"" id=""{1}"" 
                    value=""Edit"" onclick=""javascript:__doPostBack('{0}','Edit')"" />",
            this.UniqueID, this.ClientID + "_Age"));
        writer.Write("</div>");
    }
}