asp.net ajax javascript postback_问答_开发者_运维开发者技术经验分享

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:

<%@ 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 /&g开发者_运维技巧t;
        <asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="true" Width="110">
        </asp:DropDownList>

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

and here is the code behind file:

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

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.

Thanks

you can create a web method to return the country Id,

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

and in your page you can use ajax to call this method and get returned data,

$.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) ;
  }
});

and here is a good tutorial http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/

You need to learn asp.net Ajax Extension API. Please take a look at these tutorials: