Monday, November 18, 2013

page load asynchronous code after UI rendering (execute code after page render complete using script manager)

problem :
i have some events ( functions) should executed in page load but it consume some time to executed so i need to load the page first and silently load these funcitons to load page in little time.

solution :
using ajax script manager with EnablePageMethods="true"  to execute asynchronous functions
using javascipt PageMethods function.

copy and past the following code in new web site to test
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Async="true" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript">


        function CallServerSideFunction2() {
            //calling our page method 'CallFromClient1'
            debugger;
            PageMethods.CallFromClient2(OnSucceeded2, OnFailed2);
            return false;
        }


        function OnSucceeded2(result) {
            var div1 = $get("Div1");
            var oNewNode = document.createElement("LI");
            div1.appendChild(oNewNode);
            oNewNode.innerText = result;
        }


        function OnFailed2(error) {
            // Alert user to the error.
            alert(error.get_message());
        }
    </script>
</head>
<body>
    <form id="form2" runat="server">
           <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" />
        <div runat="server" id="Div1"></div>

        <div>

        You page Html  goes here 
        </div>
    </form>
</body>
</html>

vb file
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading;
using System.Web;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        ScriptManager.RegisterStartupScript(this, this.GetType(), "getprice", "CallServerSideFunction2();", true);

   

    }


    [WebMethod]
    //This is our page method!
    //This function can carry out the server processing like fetching the values from DB
    public static string CallFromClient2()
    {
        Thread.Sleep(5000);
        return "$1120";
    }
}
--------------------------
the idea is using static web method to handle the event consuming time and register startup script using script manager then get value from web method and bind it to page control using javascript handlers for the script manager .
this manner let the page loads and then call web service function to get long time operation and bind result value silently to page control using normal javascript.

problem : the web method must be static to be accessed by script manager javascript function PageMethods
so if you need to use session inside the web method you can use :HttpContext.Current.Session[""].ToString

No comments:

Post a Comment