August 2007 - Posts

In this blog post, we will learn how to call a method existing on a page using Ajax.
 
First of all, the method should have the WebMethod attribute and should be static.

        [System.Web.Services.WebMethod]
        public static string GetServerTime()
        {
            return DateTime.Now.ToString();
        }
The above method will return the date time on the server.

Second, You should add the EnablePageMethods="true" attribute to the ScriptManager control to allow calling a page method.

Now on client pageload event we will call the method on the server which will return a string containing the date time and display it on a textbox inside an UpdatePanel Control

        <script language="javascript">
        function pageLoad(sender, eventArgs)
        {
    
            getTime();
        }
        function getTime()
        {
            // call the method on the server and wait till the code has completed its execution
            PageMethods.GetServerTime(OnGetServerTimeComplete)
        }
        function OnGetServerTimeComplete(result, userContext, methodName)
        {  
            // Get the textbox inside the UpdatePanel Control
            var textbox = $get('<%=txtDateTime.ClientID%>');
            // Set the result into the textbox
            textbox.value = result;
        }
        </script>

Hope this Helps,

Posted by haissam | 3 comment(s)

Below is the code which will help you create namepsace & a class to group your client side functionalities.

    function pageLoad(sender, eventArgs){
    // Register the namespace
    Type.registerNamespace('Hello');
    // Create the World Class
    Hello.World = function(test1,test2){
        this._test1 = test1;
        this._test2 = test2;
        }
       
    // Set its prototype
    Hello.World.prototype = {
        get_Title: function() {
            return this._test1;
        }
    }
    // Register the class
    Hello.World.registerClass('Hello.World');
    // Create new instance of the class and send the correct parameter
    var test = new Hello.World('haissam','testing');
    // display the value
    alert(test.get_Title());
    }

Best Regards,

Posted by haissam | with no comments

Have you wondered how to prevent a user from clicking a button more than once in case you are inserting data into the database!! Well below is an implementation

first, what you need to do is to insert an UpdatePanel control Containing a button and a gridview. On button_click server side event copy the below code which will fetch some data from the database to be inserted into the gridview.

            string connectionString = "Data Source=(local);Initial Catalog=Northwind;Integrated Security=SSPI";
            SqlConnection con = new SqlConnection(connectionString);
            con.Open();
            SqlDataAdapter da = new SqlDataAdapter("Select * from customers", con);
            DataSet ds = new DataSet();
            da.Fill(ds);
            System.Threading.Thread.Sleep(9000);
            GridView1.DataSource = ds;
            GridView1.DataBind();
            Page.DataBind();

Do not forget to import System.Data.SqlClient namespace

let's remember the client side page life cycle
 1- Initialize Request
 2- Begin Request
 3- Page Loading
 4- Page Loaded
 5- End Request

We will handle the below two events to achieve our goal
 1- beginRequest
 2- endRequest

add the below code under the <asp:ScriptManager/> control

        <script language="javascript">
       
 // Get the PageRequestManager instance
 var pageRequest = Sys.WebForms.PageRequestManager.getInstance();
 // Add the beginRequest Event
 pageRequest.add_beginRequest(beginRequest);
 // Add the endRequest Event
 pageRequest.add_endRequest(endRequest)

 // Handle the Begin event
 function beginRequest(sender, eventArgs)
 {
     // Get the button
     var Button1 = $get('<%=Button1.ClientID %>')
     // Set its text to Loading
     Button1.value = 'Loading';
     // Disable the Button
     Button1.disabled = true
 }

 function endRequest(sender, eventArgs)
 {
    // Get the Button
    var Button1 = $get('<%=Button1.ClientID %>')
    // Enable it
    Button1.disabled = false;
 }

 </script>


Hope this Helps

Posted by haissam | with no comments

 I kindly invite you to view my latest article published at aspalliance.com

 Building a Custom Confirmation Dialog Box

 Best Regards,

 

 

Posted by haissam | with no comments

As you may know the wizard control, provided by ASP.NET 2.0, allows us to create a navigation system with multiple steps. if you are not familiar with the wizard control please check below link

Wizard Control in ASP.NET 2.0

Once you create a wizard step, you can set the StepType to dynamically create the proper navigation buttons. For this example, just select Start.

To execute a javascript function for the "Next" button, you have to find the control inside that wizard and then  handle the proper event to call that method.

First, right click on the wizard control, in design mode and select "Convert to start nagivation template". Now if you look into the HTML code you will find that visual studio 2005 dynamically added the below

<StartNavigationTemplate>

<asp:Button ID="StartNextButton" runat="server" CommandName="MoveNext" Text="Next" />

</StartNavigationTemplate>


Now the Next button has an id "StartNextButton" and you can in your code behind use the below code to get this button at runtime and add the javascript code

            Button nextButton = (Button)Wizard1.FindControl("StartNavigationTemplateContainerID").FindControl("StartNextButton");
            nextButton.Attributes.Add("onclick","alert('This is the client click event');");

Hope this helps,

Posted by haissam | 1 comment(s)

In ASP.NET 2.0, there are seven reserved directories where each directory has its own role. In this blog post, I will introduce the App_Code directory.

This directory is not automatically created when you create a new project, however the developer has to do it manually or it will be created if any feature requests it. It is used to store source code (Classes) from the same language, these classes are compiled at runtime to be used by the pages. Because HTTP Requests are blocked by the ISAPI filters from browsing this reserved directory, do not add any file except source codes; if you try to add an image and you use this image inside the webform, it will not be displayed at runtime.

Like I already mentioned, you can't add for example VB classes and C# classes under this directory, you have to add only classes using the same language because remember at runtime these classes are compiled into a single assembly. However, if you have VB Classes and C# Classes and u want to add them to this directory consider doing the below.

 

For example, under this folder create two new folders:

1) CSharp

2) VB

 

And now in the web.config add the below configurations

<configuration>

<system.web>

<compilation>

<codeSubDirectories>

<add directoryName="CSharp"/>

<add directoryName="VB"/>

</codeSubDirectories>

</compilation>

</system.web>

</configuration>

 

 

 

In this way, the compiler will create 1 single assembly for each directory.

 

Hope this Helps,

Posted by haissam | with no comments
The leading UI suite for ASP.NET - Telerik radControls
Outstanding performance. Full ASP.NET AJAX support. Nearly codeless development.