当前位置： 文江博客话题详情

asp.net ajax javascript 回发

发布于 2024-12-02 04:25:44 字数 3537 浏览 1 评论 0原文

我有一个非常基本的应用程序，包含 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，所以我现在已经开始学习了。任何帮助/资源将不胜感激。

谢谢

原文

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

恬淡成诗 2024-12-09 04:25:44

您可以创建一个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/

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/

回复 原文
西瓜 2024-12-09 04:25:44

您需要学习asp.net Ajax Extension API。请查看这些教程：

  1. 了解使用 ASP.NET AJAX 进行部分页面更新
  2. UpdatePanel 控件简介。

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

  1. Understanding Partial Page Updates with ASP.NET AJAX
  2. Introduction to UpdatePanel Control.
回复 原文
忆梦 2024-12-09 04:25:44

由于您使用的是 ASP.NET，请查看这些教程 asp.net 教程

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

回复 原文
~没有更多了~

关于作者

甜中书

暂无简介

0 文章
0 评论
25 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

游缘惊梦

文章 0 评论 0

小兔几

文章 0 评论 0

Glik

文章 0 评论 0

生生漫

文章 0 评论 0

Luxian

文章 0 评论 0

Champion-Ming

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文