Click here to Skip to main content
Click here to Skip to main content

Refresh Web Controls/HTML Controls without flash

, 9 Sep 2005
Rate this:
Please Sign up or sign in to vote.
An article on updating a part of your web page without causing flash.

WebForm1 Image

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

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

Michael Chao

Canada Canada
No Biography provided

Comments and Discussions

 
GeneralDynamic Control Synchro problem PinmemberSnag King18-Jan-06 11:04 
GeneralProblems with &amp; PinmemberDataSIG4-Nov-05 11:38 
Generalsome special characters Pinmembermichael zhao8-Nov-05 1:57 
GeneralRe: some special characters Pinmembermichael zhao8-Nov-05 2:03 
Generalcan not display the right thing, Pinmembermichael zhao8-Nov-05 2:06 
GeneralRe: some special characters PinmemberDataSIG8-Nov-05 2:04 
GeneralRe: some special characters Pinmembermichael zhao8-Nov-05 2:34 
GeneralSmall Problem: Retrieved Data Does not survive postback Pinmembervladber14-Sep-05 5:32 
GeneralRe: Small Problem: Retrieved Data Does not survive postback Pinmembermichael zhao14-Sep-05 17:04 
GeneralGreat Article Pinmemberptmcomp13-Sep-05 10:47 
GeneralFine if only supporting IE PinsussAnonymous13-Sep-05 6:54 
Generalthanks for your info Pinmembermichael zhao13-Sep-05 12:30 
Generalgreat PinsussAnonymous13-Sep-05 3:41 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.150129.1 | Last Updated 9 Sep 2005
Article Copyright 2005 by Michael Chao
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid