asp.net ajax постбэк JavaScript - PullRequest
Новая
       6

asp.net ajax постбэк JavaScript

0 голосов
/ 30 августа 2011

У меня очень простое приложение, содержащее 1 ярлык и два раскрывающихся списка.Вы выбираете имя игрока из первого раскрывающегося списка, и сразу же соответствующая страна будет отображаться в другом раскрывающемся списке.Вот разметка: 

<%@ 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, поэтому я начал изучать это сейчас.Любая помощь / ресурсы будут оценены.

Спасибо

Ответы [ 3 ]

4 голосов
/ 30 августа 2011

вы можете создать веб-метод для возврата идентификатора страны 

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

3 голосов
/ 30 августа 2011

Вам нужно выучить asp.net Ajax Extension API. Пожалуйста, посмотрите на эти уроки:

  1. Общие сведения об обновлении частичных страниц с помощью ASP.NET AJAX
  2. Введение в элемент управления UpdatePanel.
1 голос
/ 30 августа 2011

Поскольку вы используете ASP.NET, ознакомьтесь с этими учебными пособиями asp.net учебными пособиями

...