asp.net ajax javascript postback

我有一個非常基本的應用程序，包含1個標籤和兩個下拉列表。您從第一個下拉列表中選擇一個玩家名稱，並立即將相應的國家/地區顯示在另一個下拉列表中。下面是標記：asp.net ajax javascript postback

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestDropDownList.aspx.cs" Inherits="Demos_TestDropDownList" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 

     <asp:Label ID="Label1" runat="server"></asp:Label> 
     <br /> 
     <br /> 
     <asp:DropDownList ID="DropDownList1" runat="server" 
      onselectedindexchanged="DropDownList1_SelectedIndexChanged" 
      AutoPostBack="true"> 
     </asp:DropDownList> 

     <br /> 
     <br /> 
     <asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="true" Width="110"> 
     </asp:DropDownList> 

    </div> 
    </form> 
</body> 
</html>

，這裏是隱藏文件中的代碼：

public partial class Demos_TestDropDownList : System.Web.UI.Page 
{ 
    DataRow CreateRow(DataTable dt, string name, string country) 
    { 
     DataRow dr = dt.NewRow(); 
     dr["Name"] = name; 
     dr["Country"] = country; 
     return dr; 
    } 

    DataRow CreateRow(DataTable dt, string country) 
    { 
     DataRow dr = dt.NewRow();   
     dr["Country"] = country; 
     return dr; 
    } 

    protected void Page_Load(object sender, EventArgs e) 
    { 
     if (!Page.IsPostBack) 
     { 
      // creating the data table 
      DataTable dt = new DataTable("Player Details"); 

      // adding two columns Name and Country 
      dt.Columns.Add("Name", typeof(String)); 
      dt.Columns.Add("Country", typeof(String)); 

      // create 3 rows   
      dt.Rows.Add(CreateRow(dt, "Rafael Nadal", "Spain")); 
      dt.Rows.Add(CreateRow(dt, "Li Na", "China")); 
      dt.Rows.Add(CreateRow(dt, "Roger Federer", "Switzerland")); 

      // create a data view 
      DataView dv = new DataView(dt); 

      DropDownList1.DataSource = dv; 
      DropDownList1.DataTextField = "Name"; 
      DropDownList1.DataValueField = "Country"; 
      DropDownList1.DataBind(); 
     } 
    } 
    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e) 
    { 
     Label1.Text = DropDownList1.SelectedItem.Text; 

     // creating the data table 
     DataTable dt = new DataTable("Particular Player Details"); 

     // adding 1 column Country  
     dt.Columns.Add("Country", typeof(String)); 

     if (Label1.Text.CompareTo("Li Na") == 0) 
     { 
      dt.Rows.Add(CreateRow(dt, "China")); 
     } 

     if (Label1.Text.CompareTo("Rafael Nadal") == 0) 
     { 
      dt.Rows.Add(CreateRow(dt, "Spain")); 
     } 

     if (Label1.Text.CompareTo("Roger Federer") == 0) 
     { 
      dt.Rows.Add(CreateRow(dt, "Switzerland")); 
     } 

     // create a data view 
     DataView dv = new DataView(dt); 

     DropDownList2.DataSource = dv; 
     DropDownList2.DataTextField = "Country"; 
     DropDownList2.DataValueField = "Country"; 
     DropDownList2.DataBind(); 
    } 
}

目前，當我從第一個下拉列表中的一些名字全頁面刷新。我不希望這種情況發生。我從我的同事那裏聽說我們必須使用AJAX，所以我現在開始學習。任何幫助/資源將不勝感激。

感謝

來源

2011-08-30 VVV

您可以創建一個Web方法返回國家Id，

[WebMethod] 
    public static string GetCountryId(string playerId) 
    {//get country id here 
    return countryId.ToString(); 
    }

在你的頁面，你可以使用Ajax調用這個方法，並得到返回的數據，

$.ajax({ 
    type: "POST", 
    url: "PageName.aspx/GetCountryId", 
    data: {playerId:$("#DropDownList1:selected").val()}, 
    contentType: "application/json; charset=utf-8", 
    dataType: "json", 
    success: function(countryId) { 
    //change second drop down here according to the returned countryId using javascript 
     $("#DropDownList2").val(countryId) ; 
    } 
});

，這裏是一個很好的教程http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/

來源

2011-08-30 03:46:17