Wednesday, January 19, 2011

How to show system time in ASP.NET web page


I’m going to achieve this using a timer and update panel.
Add the following code into page source.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Clock</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="smClock" runat="server">
        </asp:ScriptManager>
        <asp:Timer ID="tmrClock" runat="server" Interval="1000" OnTick="tmrClock_Tick">
        </asp:Timer>
        <asp:UpdatePanel ID="aupTime" runat="server" RenderMode="Inline" UpdateMode="Conditional">
            <ContentTemplate>
                <table>
                    <tr>
                        <td>
                            <asp:Label ID="lblTm" runat="server" Font-Bold="True" Font-Size="XX-Large" Text="CurrentTime ="></asp:Label>
                        </td>
                        <td>
                            <asp:Label ID="lblTime" runat="server" Font-Bold="True" Font-Size="XX-Large"></asp:Label>
                        </td>
                    </tr>
                </table>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="tmrClock" EventName="Tick" />
            </Triggers>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

It is important to use an update panel, otherwise the whole page will get refreshed in every second (we are going to change the value of the label once in every 1000 milliseconds.). Make sure to put your timer within the update panel as well.

Add the following to your code file in order to get the system time and format it in the label.

    protected void Page_Load(object sender, EventArgs e)
    {
        lblTime.Text = DateTime.Now.ToString("HH:mm:ss");
    }
    protected void tmrClock_Tick(object sender, EventArgs e)
    {
        lblTime.Text = DateTime.Now.ToString("HH:mm:ss");
    }

Here I added the code inside the “Page_Load” event as well to make sure to display the time when page loads. Otherwise we have to wait 1 second to see the time.

Then you can see the system time like this,


Here I’m displaying in 24h format. If you want to display in 12h format use ("hh:mm:ss") instead of ("HH:mm:ss").

Good Luck!!!
Happy Programming :)
Posted by Sandun at 1:31 PM 0 comments

Sunday, January 9, 2011

How to pass a value to a popup from an ASP.NET web page

For this demonstration I’m using an ASP.NET web page, WebUserControl and AjaxControlToolKit.

First create ASP.NET web site and add the AjaxControlToolKit into your solution. If you don’t know how to add the AjaxControlToolKit correctly, refer my early article "How to add AJAX control tool kit into ASP.NET web project correctly".


After that add a Web User Control in to your project. Add a TextBox to display the receive value from the web page. Add a button to close the popup.

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="UserCon.ascx.cs" Inherits="UserCon" %>

<asp:Panel ID="pnlPopup" runat="server">
  <asp:TextBox ID="txtDisplay" runat="server"></asp:TextBox>
  <asp:Button ID="btnClose" runat="server" Text="Close" OnClick="btnClose_Click"/>
</asp:Panel>
<asp:LinkButton ID="lnkDummy" runat="server"></asp:LinkButton>
<ajaxToolkit:ModalPopupExtender ID="mpePopup" runat="server" TargetControlID="lnkDummy"
    PopupControlID="pnlPopup" Enabled="true">
</ajaxToolkit:ModalPopupExtender>


Here I’m using the AJAX “ModalPopupExtender” within the Web User Control. In the above piece of code you can see a Link Button. Just give it as the target control Id of the ModalPopupExtender. There’s no use other than that.

In Web User Control’s code file create a public method to receive the incoming value from the web page.

public void LaunchPopup(string incomingParam)
{
      txtDisplay.Text = incomingParam;
      mpePopup.Show();
}

protected void btnClose_Click(object sender, EventArgs e)
{
      mpePopup.Hide();
}

Then go to the web page and add a Textbox and a button. Make sure to register and add the earlier created Web user control.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Src="UserCon.ascx" TagName="UserCon" TagPrefix="uc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>San Demo Popup</title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="aupShowPopup" runat="server">
        <ContentTemplate>
            <asp:TextBox ID="txtName" runat="server" Text="Sandun"></asp:TextBox>
            <asp:Button ID="btnShowPopup" runat="server" Text="Show Popup" OnClick="btnShowPopup_Click" />
            <uc1:UserCon ID="ucModal" runat="server" />
        </ContentTemplate>
    </asp:UpdatePanel>
    <div>
    </div>
    </form>
</body>
</html>


Add the following code in to button’s click event.

protected void btnShowPopup_Click(object sender, EventArgs e)
{
      ucModal.LaunchPopup(txtName.Text.ToString().TrimEnd());
}

Now you can see the entered value of the text box in pop up’s text box when you click the “Show Popup” button.

Good Luck!!!
Happy Programming :)
Posted by Sandun at 11:35 AM 1 comments
Subscribe to: Posts (Atom)