asp.net ajax javascript postback

Question

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 />
        <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

Jayantha Lal Sirisena · Accepted Answer · 2011-08-30 03:53:23Z

4

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/

edited Aug 30, 2011 at 3:53

answered Aug 30, 2011 at 3:46

Jayantha Lal Sirisena

21.4k11 gold badges74 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mikael Engver · Accepted Answer · 2014-01-31 16:01:53Z

3

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

edited Jan 31, 2014 at 16:01

Mikael Engver

4,7884 gold badges50 silver badges56 bronze badges

answered Aug 30, 2011 at 3:43

KV Prajapati

94.8k20 gold badges151 silver badges188 bronze badges

Comments

Dmitry Samuylov · Accepted Answer · 2011-08-30 03:44:45Z

1

Since you're using ASP.NET check out these tutorials asp.net tutorials

answered Aug 30, 2011 at 3:44

Dmitry Samuylov

1,5622 gold badges14 silver badges38 bronze badges

Collectives™ on Stack Overflow

asp.net ajax javascript postback

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related