Ajax與C#應用詳細實例


實現刷新的方法主要是Ajax,本文檔實現Ajax有兩個方法Jquery W3CJS方法);其次,使用JS也可以實現刷新數據不刷新頁面(詳見其他刷新頁面方法JS實現);對於CallbackRefresh的方法也可以實現刷新。

      上面的方法都是在頁面不刷新情況下刷新數據,Iframe實現的刷新會刷新頁面,此方法可以借鑒。

 Ajax的實現:

Javascript方式:

<script type="text/javascript">

        function loadXMLDoc(str) {

            var xmlhttp;

            var txt, x, i;

            if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari

                xmlhttp = new XMLHttpRequest();

            }

            else {// code for IE6, IE5

                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

            }

            xmlhttp.onreadystatechange = function() {

                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

                    xmlDoc = xmlhttp.responseXML;

                    //xmlDoc = xmlhttp.responseText;

                    txt = "";

                    x = xmlDoc.getElementsByTagName("TagName");

                    for (i = 0; i < x.length; i++) {

            if (x[i].childNodes[0].nodeValue.contains(str)) {

                            txt = txt + x[i].childNodes[0].nodeValue;

                        }

                    }

                    document.getElementById("txtHint").innerHTML = txt;

                }

            }

            xmlhttp.open("GET", "url", true);

            xmlhttp.send();

        }

 

jquery:

<script type="text/javascript">

        function loadXMLDoc(str) {

 

$("div").ajaxError(function(){

     alert("An error occurred!");

  });

  $("#txt").ajaxStart(function(){

     alert("AJAX 請求已成功完成");

  });

  $("div").ajaxSuccess(function(){

    alert("AJAX 請求已成功完成");

  });

  $("#txt").ajaxComplete(function(){

     alert("AJAX 請求已成功完成");

  });

  $("button").click(function(){

    $("#txt").load("url");

  });

 

 }

 

 

URL的使用:

Txt:

如果是 e.txt

xmlDoc = xmlhttp.responseText;

 

XML:

如果是e.xml

xmlDoc = xmlhttp.responseXML;

x = xmlDoc.getElementsByTagName("TagName");

x[i].childNodes[0].nodeValue

 

 

asp頁面:

如果是Asp頁面   可以用下面方法調用方法獲取返回值:

URL:"WebForm1.aspx?city=" + "beijing"

 

頁面方法一:

在被請求頁面的WebForm1.aspx.cs 的Page_Load 里面寫:

protected void Page_Load(object sender, EventArgs e)

    {

        //獲取傳遞過來的參數

        string city =Request.QueryString["city"];

        Response.Clear();

        //判斷城市名

        switch (city)

        {

            case "beijing":

                //填充相關的區域

                Response.Write("朝陽,海淀,東城,西城");

                break;

            case "shanghai":

                Response.Write("浦東,靜安,虹口,徐匯");

                break;

            case "jinan":

                Response.Write("歷下,歷城,市中,天橋");

                break;

        }

    }

 

 

頁面方法二:

直接在被請求頁面WebForm1.aspx 頁面寫代碼

<%

response.write("<table>")

    response.write("<tr><td><b>" & "asda" & "</b></td>")

    response.write("<td>" & "asdad" & "</td></tr>")

response.write("</table>")

%>

 

 

 

其他的刷新頁面方法:

方法1:

CallbackRefresh:

頁面調用方法

<script type="text/javascript">

        function FillData()

        {

           var city=document.getElementById("TextBox1").value;

     

            <% =this.ClientScript.GetCallbackEventReference(this,"city","FillDll",null)  %>;

        }

        function FillDll(strcity)

        {

           document.getElementById("DropDownList1").options.length=0;

           var indexofcity;

           var city;

           //切割傳遞來的字符串

           while(strcity.length>0)

           {

           //判斷是否是最后一個字符串

            indexofcity=strcity.indexOf(",");

            if(indexofcity >0)

            {

            city=strcity.substring(0,indexofcity);

            strcity=strcity.substring(indexofcity+1);

            //填充下拉框

            document.getElementById("DropDownList1").add(new Option(city,city));

            }

            else

            {

            // 如果是最后一個字符串

               document.getElementById("DropDownList1").add(new Option(strcity,strcity));

               break;

            }

           };

        }

    </script>

 

 

 

后台代碼:要繼承ICallbackEventHandler  (重要)

public partial class _Default : System.Web.UI.Page,ICallbackEventHandler

{

    private string _data;

    protected void Page_Load(object sender, EventArgs e)

    {

    }

 

    #region ICallbackEventHandler 成員

 

    public string GetCallbackResult()

    {

        //返回處理后的數據

        return _data;

    }

 

    public void RaiseCallbackEvent(string eventArgument)

    {

        //判斷傳遞過來的參數

        switch (eventArgument)

        {

            case "北京":

                _data = "朝陽,海淀,東城,西城";

                break;

            case "上海":

                _data = "浦東,靜安,徐匯,虹口";

                break;

            case "濟南":

                _data = "歷城,歷下,市中,天橋";

                break;

        }

    }

 

    #endregion

}

 

JS 實現局部刷新: 后台代碼如下:

protected void Page_Load(object sender, EventArgs e)

    {

        //創建字符串連接對象

        StringBuilder myscript = new StringBuilder();

        //使用字符串組織一個JavaScript腳本方法

        myscript.Append("function seekCity()    {\n");

        myscript.Append("var city=document.getElementById('TextBox1').value; \n");

        myscript.Append("switch(city)       {\n");

        myscript.Append("case '北京': \n");

        myscript.Append("FillData('" + GetCityStr("北京") +"'); \n");

        myscript.Append("break; \n");

        myscript.Append("case '上海': \n");

        myscript.Append("FillData('" + GetCityStr("上海") + "'); \n");

        myscript.Append("break; \n");

        myscript.Append("case '濟南': \n");

        myscript.Append("FillData('" + GetCityStr("濟南") + "'); \n");

        myscript.Append("break; }\n");

        myscript.Append(" }\n");

        //使用注冊腳本方法在頁面的客戶端,注冊這個字符串編寫的腳本方法。

        Page.ClientScript.RegisterClientScriptBlock(typeof(string), "seekCity", myscript.ToString(),true);

 

}

 

 

    //通過獲取城市名,返回城市的區縣字符串

    private string GetCityStr(string INcity)

    {

       string city="";

        switch (INcity)

        {

            case "北京":

                city = "朝陽,海淀,東城,西城";

                break;

            case "濟南":

                city = "歷城,歷下,市中,天橋";

                break;

        }

        //返回包含區縣的 字符串連接        return city;

    }

 

 

頁面層直接調用:

 

onclick="seekCity()"

 

 

切割字符:

   

function FillData(strcity)

        {

           document.getElementById("DropDownList1").options.length=0;

           var indexofcity;

           var city;

           //切割傳遞來的字符串

           while(strcity.length>0)

           {

           //判斷是否是最后一個字符串

            indexofcity=strcity.indexOf(",");

            if(indexofcity >0)

            {

            city=strcity.substring(0,indexofcity);

            strcity=strcity.substring(indexofcity+1);

            //填充下拉框

            document.getElementById("DropDownList1").add(new Option(city,city));

            }

            else

            {

            // 如果是最后一個字符串

               document.getElementById("DropDownList1").add(new Option(strcity,strcity));

               break;

            }

           };

        }

 

 

 

 

 

 

 

 

 

 

 

Iframe實現局部刷新:

要求刷新頁面JS代碼:

<script language="javascript">

       function Search()

       {

            var city=document.getElementById("TextBox1").value;

            if(city !="")

            {

               document.getElementById("iframe1").src="myframe.aspx?city=" +city;

            }

       }

 

 

被請求頁面代碼:

<asp:DropDownList ID="DropDownList1" runat="server" Width="154px">

 

protected void Page_Load(object sender, EventArgs e)

    {

        //獲取傳遞過來的參數

        string city = Request.QueryString["city"];

        //判斷城市名

        switch (city)

        {

            case "北京":

                //填充相關的區域

                DropDownList1.Items.Clear();

                DropDownList1.Items.Add("朝陽");

                DropDownList1.Items.Add("海淀");

                DropDownList1.Items.Add("東城");

                DropDownList1.Items.Add("西城");

                break;

        }

    }

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM