Private: MY Note

http://www.nyokiglitter.com/tutorials/horizontal.html

randomnumber = Math.round(14 * Math.random());
document.write (randomnumber);

Web applications work on the underlying Http protocol and Http is stateless by nature. It uses the Request - Response pattern between the client and the server, to process the logic at the server and present the information in HTML to the client browser. In the case of long running applications, it would be helpful to the end user to see some status on the browser when the application is processing some complex logic on the server. This article shows a convenient way of showing status information in such cases. The sample demos show how to achieve this in .NET 2.0 using the CallBack infrastructure provided in the framework and also a means to achieve the same effect using the .NET 1.1 framework.

ref: http://www.c-sharpcorner.com/UploadFile/deepakvraghavan/AjaxProgressBars09082006171908PM/AjaxProgressBars.aspx

http://mattberseth.com/blog/2007/11/antialiased_rounded_corners_wi.html

<asp:UpdatePanel ID=”updatePanel” runat=”server”>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID=”btnSearch” EventName=”Click” />
    </Triggers>
    <ContentTemplate>
        <asp:GridView ID=”gvCustomers” runat=”server” AllowPaging=”true” AllowSorting=”true”
            PageSize=”20″ DataSourceID=”sqldsCustomers” Width=”95%”>
            <AlternatingRowStyle BackColor=”aliceBlue” />
            <HeaderStyle HorizontalAlign=”Left” />
        </asp:GridView>
    </ContentTemplate>
</asp:UpdatePanel>
<ajaxToolkit:UpdatePanelAnimationExtender ID=”upae” BehaviorID=”animation” runat=”server” TargetControlID=”updatePanel”>
    <Animations>
        <OnUpdating>
            <Parallel duration=”0″>
                <%– place the update progress div over the gridview control –%>
                <ScriptAction Script=”onUpdating();” /> 
                <%– disable the search button –%>                      
                <EnableAction AnimationTarget=”btnSearch” Enabled=”false” />
                <%– fade-out the GridView –%>
                <FadeOut minimumOpacity=”.5″ />
             </Parallel>
        </OnUpdating>
        <OnUpdated>
            <Parallel duration=”0″>
                <%– fade back in the GridView –%>
                <FadeIn minimumOpacity=”.5″ />
                <%– re-enable the search button –%> 
                <EnableAction AnimationTarget=”btnSearch” Enabled=”true” />
                <%–find the update progress div and place it over the gridview control–%>
                <ScriptAction Script=”onUpdated();” />
            </Parallel>
        </OnUpdated>
    </Animations>
</ajaxToolkit:UpdatePanelAnimationExtender>
<div id=”updateProgressDiv” style=”display: none; height: 40px; width: 40px”>
    <img src=”Img/dot-net-green.gif” mce_src=”Img/dot-net-green.gif” />
</div>Like I mentioned earlier, centering the animated gif was only slightly more work.  To accomplish this I included a fixed width div tag containing the image and set its display style to none.  Then when the OnUpdating animation fires the ScriptAction, I find the div, set the display back to visible, figure out the bounds of both the GridView and the progress div, and finally I do the math to determine when the div needs to be placed to overlay the GridView.  The onUpdated function just sets the display style of the div back to none.  Here are the functions …

function onUpdating(){
    // get the update progress div
    var updateProgressDiv = $get(’updateProgressDiv’);
    // make it visible
    updateProgressDiv.style.display = ”;

    //  get the gridview element       
    var gridView = $get(’<%= this.gvCustomers.ClientID %>’);
   
    // get the bounds of both the gridview and the progress div
    var gridViewBounds = Sys.UI.DomElement.getBounds(gridView);
    var updateProgressDivBounds = Sys.UI.DomElement.getBounds(updateProgressDiv);
   
    //    do the math to figure out where to position the element (the center of the gridview)
    var x = gridViewBounds.x + Math.round(gridViewBounds.width / 2) - Math.round(updateProgressDivBounds.width / 2);
    var y = gridViewBounds.y + Math.round(gridViewBounds.height / 2) - Math.round(updateProgressDivBounds.height / 2);
   
    //    set the progress element to this position
    Sys.UI.DomElement.setLocation (updateProgressDiv, x, y);       
}

function onUpdated() {
    // get the update progress div
    var updateProgressDiv = $get(’updateProgressDiv’);
    // make it invisible
    updateProgressDiv.style.display = ‘none’;
}

Here is the complete markup for the page …

<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”Default.aspx.cs” Inherits=”_Default” %>
<%@ Register Assembly=”AjaxControlToolkit” Namespace=”AjaxControlToolkit” TagPrefix=”ajaxToolkit” %>

<!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 id=”Head1″ runat=”server”>
    <title>Untitled Page</title>
    <script type=”text/javascript” language=”javascript”>
   
    function onUpdating(){
        // get the update progress div
        var updateProgressDiv = $get(’updateProgressDiv’);
        // make it visible
        updateProgressDiv.style.display = ”;

        //  get the gridview element       
        var gridView = $get(’<%= this.gvCustomers.ClientID %>’);
       
        // get the bounds of both the gridview and the progress div
        var gridViewBounds = Sys.UI.DomElement.getBounds(gridView);
        var updateProgressDivBounds = Sys.UI.DomElement.getBounds(updateProgressDiv);
       
        //    do the math to figure out where to position the element (the center of the gridview)
        var x = gridViewBounds.x + Math.round(gridViewBounds.width / 2) - Math.round(updateProgressDivBounds.width / 2);
        var y = gridViewBounds.y + Math.round(gridViewBounds.height / 2) - Math.round(updateProgressDivBounds.height / 2);
       
        //    set the progress element to this position
        Sys.UI.DomElement.setLocation (updateProgressDiv, x, y);       
    }

    function onUpdated() {
        // get the update progress div
        var updateProgressDiv = $get(’updateProgressDiv’);
        // make it invisible
        updateProgressDiv.style.display = ‘none’;
    }
   
    </script>

</head>
<body>
    <form id=”form” runat=”server”>
        <asp:ScriptManager ID=”scriptManager” runat=”server” />
        <div>
            <asp:SqlDataSource ID=”sqldsCustomers” runat=”server”
                SelectCommand=”select customerid, companyname, contactname, contacttitle from dbo.customers”
                SelectCommandType=”Text” ConnectionString=”server=mberseth;database=northwind;Trusted_Connection=yes;” />
           
            <p>
                Example of using an UpdatePanelAnimationExtender to place an animated gif over a GridView while the
                GridView is being refreshed.
            </p>
            <br />
            <table border=”0″ width=”95%”>
                <tr>
                    <td align=”center”>Customer ID</td>
                    <td align=”right”><asp:TextBox ID=”txtCustomerID” runat=”server” /></td>
                    <td align=”center”>Company Name</td>
                    <td align=”right”><asp:TextBox ID=”txtCompanyName” runat=”server” /></td>
                    <td align=”center”>Contact Name</td>
                    <td align=”right”><asp:TextBox ID=”txtContactName” runat=”server” /></td>
                </tr>                               
                <tr>
                    <td colspan=”6″ align=”right”><asp:Button ID=”btnSearch” runat=”server” Width=”75″ Text=”Search” OnClick=”BtnSearch_Click” /></td>
                </tr>
            </table>
            <br />
           
            <asp:Label ID=”lblTitle” runat=”server” Text=”Customers” BackColor=”lightblue” Width=”95%” />
            <asp:UpdatePanel ID=”updatePanel” runat=”server”>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID=”btnSearch” EventName=”Click” />
                </Triggers>
                <ContentTemplate>
                    <asp:GridView ID=”gvCustomers” runat=”server” AllowPaging=”true” AllowSorting=”true”
                        PageSize=”20″ DataSourceID=”sqldsCustomers” Width=”95%”>
                        <AlternatingRowStyle BackColor=”aliceBlue” />
                        <HeaderStyle HorizontalAlign=”Left” />
                    </asp:GridView>
                </ContentTemplate>
            </asp:UpdatePanel>
            <ajaxToolkit:UpdatePanelAnimationExtender ID=”upae” BehaviorID=”animation” runat=”server” TargetControlID=”updatePanel”>
                <Animations>
                    <OnUpdating>
                        <Parallel duration=”0″>
                            <%– place the update progress div over the gridview control –%>
                            <ScriptAction Script=”onUpdating();” /> 
                            <%– disable the search button –%>                      
                            <EnableAction AnimationTarget=”btnSearch” Enabled=”false” />
                            <%– fade-out the GridView –%>
                            <FadeOut minimumOpacity=”.5″ />
                         </Parallel>
                    </OnUpdating>
                    <OnUpdated>
                        <Parallel duration=”0″>
                            <%– fade back in the GridView –%>
                            <FadeIn minimumOpacity=”.5″ />
                            <%– re-enable the search button –%> 
                            <EnableAction AnimationTarget=”btnSearch” Enabled=”true” />
                            <%–find the update progress div and place it over the gridview control–%>
                            <ScriptAction Script=”onUpdated();” />
                        </Parallel>
                    </OnUpdated>
                </Animations>
            </ajaxToolkit:UpdatePanelAnimationExtender>
            <div id=”updateProgressDiv” style=”display: none; height: 40px; width: 40px”>
                <img src=”Img/dot-net-green.gif” mce_src=”Img/dot-net-green.gif” />
            </div>
        </div>
    </form>
</body>
</html>

 ref: http://mattberseth.com/blog/2007/05/ajaxnet_example_using_an_updat.html

Compared to some other JavaScript libraries, such as Prototype and its derivatives, the Microsoft AJAX Library doesn’t offer a whole lot of DOM manipulation. Still, it’s beta than nothing.

$get()
The dollar function $() was dumped in favor of $get() which is an alias for document.getElementById(). It takes two parameters: the id of an element to locate, and an element to traverse for a match. If the second parameter is omitted, the entire document is searched. The following sample searches for the content paragraph within the article element:

<div id=”article”>    <h1>Lorem Ipsum Dolor Sit Amet.</h1>    <p id=”blurb”>Quisque a sapien viverra tellus…</p>    <p id=”content”>Integer est felis, commodo ut…</p> </div> <script type=”text/javascript”> var article, content;  article = $get (’article’); content = $get (’content’, article);  /* Same as … */ content = $get (’content’); </script>
addCssClass(), removeCssClass (), containsCssClass
These names should be self-explanatory. These functions take two parameters: an element and a class name.

var blurb = $get (’blurb’); Sys.UI.DomElement.addCssClass (blurb, ‘highlight’); var isHighlighted =     Sys.UI.DomElement.containsCssClass (blurb, ‘highlight’); Sys.UI.DomElement.removeCssClass (blurb, ‘highlight’);
Please, note that you can add several CSS class names to an element. There’s nothing wrong with <p id=”blurb” class=”foo highlight bar”></p>, for example.

toggleCssClass()
The code above could be written with toggleCssClass() as follows:

Sys.UI.DomElement.toggleCssClass (blurb, ‘highlight’); var isHighlighted =      Sys.UI.DomElement.containsCssClass (blurb, ‘highlight’); Sys.UI.DomElement.toggleCssClass (blurb, ‘highlight’);
getLocation ()
Returns absolute coordinates of an element (with scrolling taken into account!) You don’t have to position an element with CSS. Wherever it is on the page, you’ll get its coordinates. E.g.:

var position = Sys.UI.DomElement.getLocation (blurb); alert (’x = ‘ + position.x + ‘; y = ‘ + position.y);
setLocation()
Absolutely positions an element with CSS. Note that when an element is positioned this way, i.e. by applying a position: absolute CSS rule, it’s taken out of the page flow. If there are elements that preceed and follow it, they will collapse to close the gap.

getBounds ()
Gets the absolute coordinates of an element along with its height and width. The (x, y) coordinates are obtained via a call to getLocation() discussed above.

N.b.: When it comes to calculating coordinates and dimensions of an element, it gets hairy fast. There are margins, paddings, borders on the element and/or on its parent and the parent’s parent, etc. Check out Measuring Element Dimension and Location to see for yourselves. So don’t be surprised if you come up a few pixels short here and there in a complex layout.

var bounds = Sys.UI.DomElement.getBounds (article); /* The absolute (x, y) coordinates of the article box along  * with its height and width are in: *  * bounds.x, bounds.y, bounds.width and bounds.height */
setAccessibilityAttribute()
To be honest, I don’t understand this function besides the fact that it allows you to set an attribute with a namespace (via setAttributeNS), the namespace being that of the Accessible, Adaptable Applications (AAA). If somebody knows what the deal here is, please leave a comment.

Conclusion
That’s pretty much it for DOM manipulation with the “core” library. Not a whole lot, if you ask me. I wish there were more variants of the $get() function to find elements by CSS selectors. I wish I could add and remove arbitrary styles, not just the CSS class name. The omnipresent getElementsByClassName () is missing too. And so forth. But then again—maybe that wasn’t the intention.

If the Microsoft AJAX Library is meant to give a leg up with building web apps, I think the team needs to beef it up.

http://encosia.com/

In most scenarios, the easiest way to add a script file to an ASP.NET page is in markup, as in the following example:

<asp:ScriptManager ID="SMgr" runat="server">
  <Scripts>
    <asp:ScriptReference Path="./Script.js" />
  </Scripts>
</asp:ScriptManager> 

This topic addresses a simple page developer scenario. For adding script references in custom controls, see Adding Client Behaviors to Web Server Controls by Using ASP.NET AJAX Extensions.

http://encosia.com/index.php/2007/07/11/why-aspnet-ajax-updatepanels-are-dangerous/

http://encosia.com/index.php/2007/07/18/how-to-improve-aspnet-ajax-error-handling/

http://encosia.com/index.php/2007/07/13/easily-refresh-an-updatepanel-using-javascript/

http://weblogs.asp.net/scottgu/archive/2006/10/29/Tip_2F00_Trick_3A00_-Handling-Errors-with-the-UpdatePanel-control-using-ASP.NET-AJAX.aspx

http://msmvps.com/blogs/luisabreu/archive/2006/10/29/UpdatePanel_3A00_-having-fun-with-errors.aspx

1 <script type=“text/javascript“ language=“javascript“>
2
3 /*
4 Sys.WebForms.PageRequestManager.instance.add_beginRequest(beginRequestHandler)
5 Sys.WebForms.PageRequestManager.instance.remove_beginRequest(beginRequestHandler)
6
7 Sys.WebForms.PageRequestManager.instance.add_endRequest(endRequestHandler)
8 Sys.WebForms.PageRequestManager.instance.remove_endRequest(endRequestHandler)
9
10 Sys.WebForms.PageRequestManager.instance.add_initializeRequest(initializeRequestHandler)
11 Sys.WebForms.PageRequestManager.instance.remove_initializeRequest(initializeRequestHandler)
12
13 Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoadedHandler)
14 Sys.WebForms.PageRequestManager.getInstance().remove_pageLoaded(pageLoadedHandler)
15
16 Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(pageLoadingHandler)
17 Sys.WebForms.PageRequestManager.getInstance().remove_pageLoading(pageLoadingHandler)
18
19 Method:
20
21 Stops all updates that would occur as a result of an asynchronous postback.
22 Syntax:
23 Sys.WebForms.PageRequestManager.getInstance().abortPostBack();Remarks
24
25 Example:
26 */
27
28 Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
29 Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
30
31 function BeginRequestHandler(sender, args)
32 {
33 var elem = args.get_postBackElement();
34 var snd = sender._postBackSettings.sourceElement.id;
35 ActivateAlertDiv(‘visible‘, ‘AlertDiv‘, snd + ‘ ‘ + elem.value + ‘ processing…‘);
36 }
37
38 function EndRequestHandler(sender, args)
39 {
40 ActivateAlertDiv(‘hidden‘, ‘AlertDiv‘, ”);
41 }
42
43 function ActivateAlertDiv(visstring, elem, msg)
44 {
45 var adiv = $get(elem);
46 adiv.style.visibility = visstring;
47 adiv.innerHTML = msg;
48 }
49  
55 </script>
56