Refresh Web Controls/HTML Controls without flash

• Download demo project - 14.3 Kb

Introduction

In ASP.NET, when we develop web pages, there may be a set of web controls on the page and related to each other (drop down list in this case). When the end user inputs to one control, we want another control(s) to get updated accordingly, typically extract data from the backend database and populate the front-end. Usually, the page is posted back to the server and you can see that the page flashes. Sometimes the page is pretty big and the postback will take a while. Sometimes there is only a small portion of the page to be updated and you do not want to refresh the whole page, and you do not want to be interrupted by those flashes as well, here comes one option to avoid that.

Background

This article is based on the article "Refresh Portion of your web page using XMLHTTP" on CP. I did some research on the topic, and I tried using the IFRAME, but it seems to me, IFRAME has some sort of limitation on your layout, as you have to put the controls in the IFRAME. I took the same idea from Dhandapani Ammasai and applied it to ASP.NET.

Using the code

Unzip the demo project, setup web sharing property as Refresh3 and create a web application and run it. In this demo, I did not connect to the database, as everyone has different connection strings, passwords, instance, etc. It won't be working after you download it and I just wanted to focus on the refresh part.

The working process is as follows. In the Page_Load of WebForm1.aspx, I registered JavaScript.

if (Page.IsClientScriptBlockRegistered("RefreshDropdown")==false)
{
    string script = FileReader.ReadFile(Server.MapPath(
           HttpContext.Current.Request.ApplicationPath + 
           "/RefreshDropdown.js"));

    Page.RegisterClientScriptBlock("RefreshDropdown", script);
}

if(!this.IsPostBack)
{
    this.ddlCountry.Attributes.Add("OnChange", 
         "DisplayCity(ddlCity, 
         this.options[this.selectedIndex].value);");
}

When you select an item from Country, it will trigger the DisplayCity function implemented in the JavaScript. The two major functions are DisplayCity and GetCities, let's take a look:

function DisplayCity(ddlCity, Country)
{
    if (ddlCity == null)
        return;
    ddlCity.selectedIndex = -1;

    RemoveAll(ddlCity); 
        
    var xmlStates = GetCities(Country);    
    var objXmlDom = new ActiveXObject("Microsoft.XMLDOM");
    if (!objXmlDom.loadXML(xmlStates))
    {
        var sErr = "Response XML String is messed up\n" + xmlStates;
        alert(sErr);
    }
    else
    {
        
        var nodes = objXmlDom.selectNodes("/Response/City");
        
        for (var i = 0; i < nodes.length; i++)
        {
            var objOption = document.createElement("option");
            objOption.text = nodes[i].text;

            ddlCity.add(objOption);
        }
    }
}

function GetCities(Country)
{    
    var objHTTP = new ActiveXObject("Microsoft.XMLHTTP");
    var szURL = "Process.aspx?Country=" + Country;
    var szHttpMethod = "POST";
        
    objHTTP.Open(szHttpMethod, szURL, false);
    objHTTP.SetRequestHeader("Content-Type", 
            "application/x-www-form-urlencoded");
    objHTTP.Send();
    
    var szReply = objHTTP.ResponseText;
    
    if (objHTTP.status != 200)
    {
        //failure
        szReply = "";
    }
    return szReply;
}

In GetCities, we create a XMLHTTP object and build a dynamic URL, post it to Process.aspx and get the response in XML. In DisplayCity, we parse the response XML and populate them to the City dropdown list. Please note, in order to get rid of unnecessary resopnse, we removed most of the HTML content of Process.aspx except the first line. The function of Process.aspx is to generate dymanic XML content, and connect to database if necessary. Just to illustrate, we simply hard coded different strings.

if(!this.IsPostBack)
{
    string Country = Request.QueryString["Country"];
    

    string ret = "<Response>";

    // you can also connect to database and build any
    // customized Response string to meet your requirement
    if(Country == "US")
    {
        ret += "<City value='California'>California</City>";
        ret += "<City value='Virginia'>Virginia</City>";
        ret += "<City value='Washington'>Washington</City>";
    }
    if(Country == "Canada")
    {
        ret += "<City value='Ontario'>Ontario</City>";
        ret += "<City value='Alberta'>Alberta</City>";
        ret += "<City value='BC'>British Columnbia</City>";
        ret += "<City value='Quebec'>Quebec</City>";
    }
    if(Country == "India")
    {
        ret += "<City value='1'>City1</City>";
        ret += "<City value='2'>City2</City>";
        ret += "<City value='3'>City3</City>";
    }

    ret += "</Response>";
    Response.Write(ret);

Reference

• "Refresh Portion of your web page using XMLHTTP" by Dhandapani Ammasai.