Category: ASP.NET AJAX

Installing/Configuring AjaxControlToolKit through NuGet

I see many questions has been asked regarding installation/configuration of latest version of AjaxControlToolKit in ASP.NET, Experts-Exchange etc., forums. So i thought of writing an blog post on this.

One of the best community tool set available for ASP.NET WebForms developers is AjaxControlToolKit. Microsoft is making sure that this Ajax control tool kit is updated frequently, to make developers task easier!

In this article, i will show you how to configure AjaxControlToolKit through NuGet. Believe me it’s pretty simple process and moreover it’s fast. It’s just avoid the downloading of the package, extracting it and copying it to the Visual Studio and configuring it etc.,

With NuGet, setting up the AjaxControlToolKit in Visual Studio development environment is never so easy.

NOTE: I’m explaining this article using Microsoft Visual Studio 2010 Professional, since most of the users are working in this IDE.

Let’s get our hands dirty….

1.  Let’s create a new ASP.NET Empty Web Site.

image

image

2.  We are done creating a empty website. Now we will configure AjaxControlToolKit through NuGet.

3.  Right click on the web site and select Manage NuGet Packages

image

4. It will invoke Manage NuGet packages dialog.

image

5.  Now search for “ajaxcontroltoolkit” keyword in the textbox on the right side top corner. It will list you the latest version of AjaxControlToolKit.

image 

6.  Click on Install button to install the AjaxControlToolKit.

image

7.  Once it’s done, close this dialog.

image 

8.  Now if you open the web.config file, you can see the AjaxControlToolKit already registered.

image

9. We are done with the setup. Add a ASP.NET web page, and we will test this by adding an control from AjaxControlToolKit.

image

 

NOTE: You should use Toolkit ScriptManager control, instead of Ajax ScriptManager controls, which you can observe in the above code!

10.  Now it’s time to test. I know, you are successful.

Through NuGet, Not only AjaxControlToolKit, there are many more community developed tools available, which i leave it for you explore.

Finally, NuGet made the developer task very easy!

Happy Web Programming…

Thanks

Invoking Server Side code using ASP.NET AJAX Client Callback on Web browser close

If your ASP.NET web application creates temporary data for the each session, it needs to be deleted while user logs out. If you use InProc session mode, then you can handle Session_End event in the Global Application file(Global.asax) to clear the temporary files.

Suppose if you use other than InProc session mode[i.e., StateServer, SQLServer etc.,], then you have to write custom logic to delete the temporary files while user logs out.

Till now you everything is fine, if user logs out of the using Logout option in your web application. What if User closes the browser unintentionally? The temporary files remain undeleted!

Let us discuss a solution which handles the above problem using ASP.NET AJAX with JavaScript.  First of all we need to a notification, when user closes the browser. So let us create a JavaScript function, which notifies the Web browser close.

<script type="text/javascript">
        window.onbeforeunload = NotifyBrowserClose;
        function NotifyBrowserClose() {
            return "Are you sure to close the browser?";
        }
    </script>

The above code notifies the user, if he tries to close the browser.

NOTE: User gets notification even when he traverse to other page. So you need to use a Boolean variable to check whether  the user is traversing to other page or trying to close the browser!

Now we will create Server Side Code to delete the temporary files! Implement the ICallbackEventHandler interface to call Server Side code from Client code(JavaScript).

#region ICallbackEventHandler Members

        public string GetCallbackResult()
        {
            return "";
        }

        public void RaiseCallbackEvent(string eventArgument)
        {
            string      strTempLoc      =  Session["TempFilesDir"].ToString();
            string[]    strTempFiles    = null;

            try
            {
                if (!string.IsNullOrEmpty(strTempLoc) &&
                    Directory.Exists(strTempLoc))
                {
                    strTempFiles = Directory.GetFiles(strTempLoc);

                    //Delete all the files in the temp location
                    foreach (string strTempFile in strTempFiles)
                    {
                        File.Delete(strTempFile);
                    }

                    Directory.Delete(strTempLoc);
                }
            }
            catch (IOException)
            {

            }

        }

        #endregion

Now register the JavaScript functions to invoke the Server Side code.

protected void Page_Load(object sender, EventArgs e)
{
//Get the Client Call back event reference
            string strCallBackRef = Page.ClientScript.GetCallbackEventReference(this, "", "DeleteStatus", "");

            //Form the callback function which is invoked in the Client side
            string strCallBackScript = "function DeleteTempFiles()" + "{" + strCallBackRef + ";}";

            //Register
            Page.ClientScript.RegisterClientScriptBlock(this.GetType(),
                                                        "MyServerCall",
                                                        strCallBackScript,
                                                        true);
}//end: Page_Load function

Now invoke the function on Web browser close as shown below!

 <script type="text/javascript">

        window.onbeforeunload = NotifyBrowserClose;
        function NotifyBrowserClose() {
            //Server Side Code call back
             DeleteTempFiles();
        }

       //Client Call back
        function DeleteStatus(result) {
        }

    </script>

Hope it helps u…

Happy Web Programming!!!