Vijay on Asp.Net

Using XMLHttpRequest

16-Dec-2009 02:26 PM
Category: ASP.Net AJAX

Here is a demo of creating a XMLHttpRequest object and processing the response asynchronously. The server time is captured using a simple handler file and is written onto a label in the page. This refresh happens every second and happens using AJAX

Here is the HTML markup for the page. The body onload calls the function ajaxTime every second. The ajaxTime updates the label with the time at the server.


<body onload="setInterval('ajaxTime();',1000);">
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="lblServerTime" runat="server"></asp:Label>
    </div>
    </form>
</body>

The javascript for ajaxTime function is as below. For all browsers, create a new XMLHttpRequest object directly. For IE 6, create the object using the ActiveXObject interface. Handle the onreadystatechange event for processing the response and updating the label. The open method points to the page which will give us the server time.


function ajaxTime() {

    var xmlHttp;

    if (window.XMLHttpRequest) {
        // for all modern browsers
        xmlHttp = new XMLHttpRequest();
    }
    else {
        // for IE 6.0
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }


    xmlHttp.onreadystatechange = function() {
        if (xmlHttp.readyState == 4) {
            document.getElementById('lblServerTime').innerText = xmlHttp.responseText;
        }
    }
    
    xmlHttp.open('GET', 'ServerTime.ashx', true);
    xmlHttp.send(null);

}

The code for handler is straight-forward and is shown below:


public void ProcessRequest(HttpContext context)
{
    context.Response.Expires = -1;
    context.Response.ContentType = "text/plain";
    context.Response.Write(DateTime.Now.ToString());
}

0 Comment(s), Your comments?

Popup Calendar Control

05-Dec-2009 10:14 AM
Category: ASP.Net WebForms

I want a simple Calendar control. The Calendar control should function like a FileUpload control. It should have a textbox and a button. On click on a button, the calendar control should open. On selecting a date in the calendar control, the popup window should close, and the textbox should be filled with the date. I want this Popup Calendar control to be used across multiple pages in the application

We can create a Calendar UserControl. The User control should open another page with a calendar control in a separate Popup window. The HTML markup of the reusable Calendar control (PopupCalendar.ascx) is as follows:


<asp:TextBox ID="txtDate" runat="server"></asp:TextBox>
<asp:Button ID="btnOpen" runat="server" Text=".." Width="20"
OnClientClick="return openWin(this);" />

Note that OnClientClick of the Button control has the javascript to open a new window. The javascript is as follows:


<script type="text/javascript">


    function openWin(btn) {

        var adjustLeft = 35;
        var adjustTop = 15;
        
        var left = btn.offsetLeft + getLeft(btn.parentNode);
        left += window.screenLeft + adjustLeft;
        
        var top = btn.offsetTop + getTop(btn.parentNode);
        top += window.screenTop + adjustTop;

        window.open('calendar.aspx?id=<%= txtDate.ClientID %>', '_blank', 
        'menubar=no, toolbar=no, status=no, resizeable=no, scrollbars=no,' + 
        'location=no, width=250, height=220, left=' + left + ', top=' + top);
        
        return false;
    }

    function getLeft(par) {
        if (par.tagName.toUpperCase()!="BODY") {
            return par.offsetLeft + getLeft(par.parentNode);
        }

        return 0;
    }

    function getTop(par) {
        if (par.tagName.toUpperCase() != "BODY")
            return par.offsetTop + getTop(par.parentNode);

        return 0;
    }

</script>

The javascript looks a bit more complex than the standard window.open because we want to open the window right near the button control. Also, the textbox id is passed as querystring to Calendar.aspx which is the page that will be opened in the Popup window. The markup for the Calendar.aspx page is below:


<form id="form1" runat="server">
    <div>
        <asp:Calendar ID="cal" runat="server" OnDayRender="cal_DayRender"></asp:Calendar>
    </div>
</form>

We are over-riding the Calendar's OnDayRender event. In this event handler, we are replacing the existing control in the Calendar control with our custom Hyperlink control. Our hyperlink control will call a javascript within this page to set the text in the parent window TextBox. The code for the event handler is below:


protected void cal_DayRender(object sender, DayRenderEventArgs e)
{
    e.Cell.Controls.RemoveAt(0);

    HyperLink hl = new HyperLink();
    string click = string.Format("javascript: setDate('{0}');", e.Day.Date.ToShortDateString());
    hl.NavigateUrl = click;
    hl.Text = e.Day.Date.Day.ToString();
    hl.ForeColor = System.Drawing.Color.Black;
    e.Cell.Controls.Add(hl);
}

In the above code, the javascript function - setDate() is called with the SelectedDate. This javascript function will set the text of the TextBox1 from the parent window. It will also close the popup window (itself).


    function setDate(date) {
        window.opener.document.getElementById('<%= Request.QueryString["id"] %>').value = date;
        window.close();
    }

0 Comment(s), Your comments?