无需 Flash 刷新 Web 控件/HTML 控件

• 下载演示项目 - 14.3 Kb

引言

在 ASP.NET 中，当我们开发网页时，页面上可能有一组 Web 控件，并且彼此相关（例如，下拉列表）。当最终用户输入到一个控件时，我们希望另一个控件（或多个控件）相应地更新，通常是从后端数据库提取数据并填充到前端。通常，页面会回发到服务器，您会看到页面闪烁。有时页面很大，回发需要一段时间。有时只有一小部分页面需要更新，您不希望刷新整个页面，并且您也不想被这些闪烁中断，这里有一种避免这种情况的选择。

背景

本文基于 CP 上的文章“使用 XMLHTTP 刷新网页的一部分”。 我对这个主题做了一些研究，并且尝试使用 IFRAME，但是在我看来，IFRAME 对你的布局有一些限制，因为你必须把控件放在 IFRAME 中。 我从 Dhandapani Ammasai 那里采用了相同的想法，并将其应用于 ASP.NET。

使用代码

解压缩演示项目，将 Web 共享属性设置为 Refresh3，然后创建一个 Web 应用程序并运行它。 在此演示中，我没有连接到数据库，因为每个人都有不同的连接字符串、密码、实例等。 下载后它将无法工作，我只是想专注于刷新部分。

工作过程如下。 在 WebForm1.aspx 的 Page_Load 中，我注册了 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);");
}

当您从 Country 中选择一个项目时，它将触发在 JavaScript 中实现的 DisplayCity 函数。 两个主要的函数是 DisplayCity 和 GetCities，让我们来看看

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;
}

在 GetCities 中，我们创建一个 XMLHTTP 对象并构建一个动态 URL，将其发布到 Process.aspx 并获取 XML 格式的响应。 在 DisplayCity 中，我们解析响应 XML 并将它们填充到 City 下拉列表中。 请注意，为了摆脱不必要的响应，我们删除了 Process.aspx 的大部分 HTML 内容，除了第一行。 Process.aspx 的功能是生成动态 XML 内容，并在必要时连接到数据库。 仅为了说明，我们简单地硬编码了不同的字符串。

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);

参考

• “使用 XMLHTTP 刷新网页的一部分”，作者：Dhandapani Ammasai。