title: asp.net ajax javascript postback
body: <p>I am having a very basic application containing 1 label and two drop down lists. You select a player name from the first drop-down and immediately the corresponding country will be displayed in the other drop down list. Here is the markup:</p>
  
  <pre><code>&lt;%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestDropDownList.aspx.cs" Inherits="Demos_TestDropDownList" %&gt;
  
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head runat="server"&gt;
      &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
      &lt;div&gt;
  
          &lt;asp:Label ID="Label1" runat="server"&gt;&lt;/asp:Label&gt;
          &lt;br /&gt;
          &lt;br /&gt;
          &lt;asp:DropDownList ID="DropDownList1" runat="server" 
              onselectedindexchanged="DropDownList1_SelectedIndexChanged"
              AutoPostBack="true"&gt;
          &lt;/asp:DropDownList&gt;
  
          &lt;br /&gt;
          &lt;br /&gt;
          &lt;asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="true" Width="110"&gt;
          &lt;/asp:DropDownList&gt;
  
      &lt;/div&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and here is the code behind file:</p>
  
  <pre><code>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();
      }
  }
  </code></pre>
  
  <p>Currently the whole page refreshes when I select some name from the first drop down list. I don't want that to happen. I heard from my colleague that we have to use AJAX so I have started learning that now. Any help / resources shall be appreciated.</p>
  
  <p>Thanks</p>