Click here to Skip to main content
12,501,486 members (51,511 online)
Click here to Skip to main content
Add your own
alternative version

Stats

57.3K views
547 downloads
34 bookmarked
Posted

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

You may also be interested in...

Pro
Pro

Comments and Discussions

 
GeneralDynamic Control Synchro problem Pin
Snag King18-Jan-06 10:04
memberSnag King18-Jan-06 10:04 
GeneralProblems with &amp; Pin
DataSIG4-Nov-05 10:38
memberDataSIG4-Nov-05 10:38 
Generalsome special characters Pin
michael zhao8-Nov-05 0:57
membermichael zhao8-Nov-05 0:57 
GeneralRe: some special characters Pin
michael zhao8-Nov-05 1:03
membermichael zhao8-Nov-05 1:03 
Generalcan not display the right thing, Pin
michael zhao8-Nov-05 1:06
membermichael zhao8-Nov-05 1:06 
GeneralRe: some special characters Pin
DataSIG8-Nov-05 1:04
memberDataSIG8-Nov-05 1:04 
GeneralRe: some special characters Pin
michael zhao8-Nov-05 1:34
membermichael zhao8-Nov-05 1:34 
GeneralSmall Problem: Retrieved Data Does not survive postback Pin
vladber14-Sep-05 4:32
membervladber14-Sep-05 4:32 
GeneralRe: Small Problem: Retrieved Data Does not survive postback Pin
michael zhao14-Sep-05 16:04
membermichael zhao14-Sep-05 16:04 
GeneralGreat Article Pin
ptmcomp13-Sep-05 9:47
memberptmcomp13-Sep-05 9:47 
GeneralFine if only supporting IE Pin
Anonymous13-Sep-05 5:54
sussAnonymous13-Sep-05 5:54 
Generalthanks for your info Pin
michael zhao13-Sep-05 11:30
membermichael zhao13-Sep-05 11:30 
Generalgreat Pin
Anonymous13-Sep-05 2:41
sussAnonymous13-Sep-05 2:41 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    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
Web02 | 2.8.160919.1 | Last Updated 9 Sep 2005
Article Copyright 2005 by Michael Chao
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid