Call Server From HTML Without Posting the Page

Introduction

Very often, there is a need to make server calls from the client without posting the page. Such a scenario occurs in a typical case such as:

A page contains fields namely:

• username
• password
• dropdown list to be populated from the database based on user credentials

Here, when the user enters his name and password, a server call is to be made, and based on his permissions, the values to be shown in the dropdown list should be fetched from the database. This whole activity should happen without posting the page back to the server. In such a scenario, we get stuck and don't have a solution. One of the ways to achieve this is by using the IFrame control. A sample code snippet is shown below demonstrating how to achieve this.

Using the code

The sample code below shows how to create an IFrame control to make a call to the server. Subsequently, a callback method is shown which can be called while returning back from the server. The code is commented wherever required.

// Method 1: Create IFrame and set its source to another aspx page 
// which does server processing like user validation
// and fetching data from database.

//    IFRAME RPC Call
//
//    IFrame object
var IFrameObj; 
function callToServer(targetURL) 
{
    if (!document.createElement) 
    {
        return true;
    }
    
    var IFrameDoc;

    //
    //    Call BuildQueryString to append parameters
    //    to the target page URL to be sent to server
    //
    var URL = targetURL + BuildQueryString(targetURL);

    if (!IFrameObj && document.createElement) {
        // create the IFrame and assign a reference to the
        // object in our global variable IFrameObj.
        // this will happen only the first time 
        // callToServer() is called
        try    {
            var tempIFrame=document.createElement('iframe');
            tempIFrame.setAttribute('id','RSIFrame');
            tempIFrame.setAttribute('src','tPCallsForMetaData.aspx');
            tempIFrame.style.border='0px';
            tempIFrame.style.width='0px';
            tempIFrame.style.height='0px';
            IFrameObj = document.body.appendChild(tempIFrame);

            if (document.frames) {
                // this is for IE5 Mac, because it will only
                // allow access to the document object
                // of the IFrame if we access it through
                // the document.frames array
                IFrameObj = document.frames['RSIFrame'];
            }
        } 
        catch(exception) {
            // This is for IE5 PC, which does not allow dynamic creation
            // and manipulation of an iframe object. Instead, we'll fake
            // it up by creating our own objects.
            iframeHTML='<iframe id="RSIFrame" style="';
            iframeHTML+='border:0px;';
            iframeHTML+='width:0px;';
            iframeHTML+='height:0px;';
            iframeHTML+='"><\/iframe>';
            document.body.innerHTML+=iframeHTML;
            IFrameObj = new Object();
            IFrameObj.document = new Object();
            IFrameObj.document.location = new Object();
            IFrameObj.document.location.iframe = document.getElementById('RSIFrame');
            IFrameObj.document.location.replace = function(location) 
            {
                this.iframe.src = location;
            }
        }
    }
    
    if (navigator.userAgent.indexOf('Gecko') !=-1 && !IFrameObj.contentDocument) 
    {
        // we have to give NS6 a fraction of a second
        // to recognize the new IFrame
        setTimeout('callToServer()',10);
        return false;
    }
  
    if (IFrameObj.contentDocument) 
    {
        // For NS6
        IFrameDoc = IFrameObj.contentDocument; 
    } 
    else if (IFrameObj.contentWindow) 
    {
        // For IE5.5 and IE6
        IFrameDoc = IFrameObj.contentWindow.document;
    } 
    else if (IFrameObj.document) 
    {
        // For IE5
        IFrameDoc = IFrameObj.document;
    }
    else
    {
        return true;
    }
    IFrameDoc.location.replace(URL);
    return false;
}

// Method 2: Create Callback function which will be called from the server class
// with values that can be used to populate a dropdown list say ratingList.</U>

//    This method takes 2 parameters which are return values
//    from the server. First parameter indicates whether the user credentials 
//    entered are valid or not. If it has value "unauthorized",
//    then give error message and return. If this is a valid user, then 
//    populate the "Rating" dropdown list with
//    values returned in parameter 2 "ratingList".
function handleMetaData(passResult1, ratingList) 
{
    if (passResult1 == "Unauthorized")
    {
        alert("Unauthorized access: Please enter " + 
              "valid userName, Password, Account.");
        UserName.focus();
        return;
    }
    else
    {
        //    Disable the userName, Password and account
        //    fields to disallow User modifications
        //    This is required, since the user could
        //    go to next page after validation and come back
        //    to login page and re-enter username,
        //    password and account which are invalid.
        UserName.disabled = true;
        Password.disabled = true;
        Account.disabled = true;
        
        //    If this was not a default user (login page existed),
        //    then the ratingList is available only here
        //    so populate the MetaData Rating field, if it exists
        if (document.getElementById("Rating") != null)
        {
            //    Populate the dropDown of Rating, after initializing it
            Rating.options.length = 0;
            PopulateDropDown(ratingList, Rating);
        }            
    }
}