如何用jQuery Ajax请求替换部分asp.net页面？

Question

假设我在页面上有一个Listview控件。 每个Listview项都有2个下拉列表和1个文本框。 当第一个下拉列表的选定值已更改时，第二个下拉列表应根据城市填充第一个下拉列表。 最后，当为第二个下拉列表选择一个值时，费用应出现在文本框中。

<asp:ListView ID="_lsvCostFinder" runat="server">
    <LayoutTemplate>
        <table>
            <tr>
                <th>Country</th>
                <th>City</th>
                <th>Cost</th>
            </tr>
            <tr  runat="server" id="itemPlaceHolder">
            </tr>
        </table>
    </LayoutTemplate>
    <ItemTemplate>
        <tr>
            <td>
                <asp:DropDownList ID="_ddlCountry" runat="server" OnSelectedIndexChanged="ddlCountry_SelectedIndexChanged" AutoPostBack = "true">
                </asp:DropDownList>
            </td>
            <td>
                <asp:DropDownList ID="_ddlCity" runat="server" OnSelectedIndexChanged="ddlCity_SelectedIndexChanged" AutoPostBack = "true">
                </asp:DropDownList>
            </td>
            <td>
                <asp:TextBox ID="_txtCost" runat="server"></asp:TextBox>
            </td>
        </tr>
    </ItemTemplate>
</asp:ListView>

现在我想在用户为下拉列表选择其他值时使用ajax

$('select').change(function () {
   $.ajax({
  type: "POST",
  url: "Default.aspx/DropDownList1_SelectedIndexChanged",
  data: "{}",
  success: function(msg) {
    // Replace the div's content with the page method's return.
    //
  }
 });

我只想替换整个tr元素。 这些是我的问题：

1. 我应该发送什么数据？ 下拉列表的值？

2. 如何仅替换包含触发ajax调用的dropdownlist的行 ？

编辑

所有方法都具有以下签名

protected void ddlCountry_SelectedIndexChanged(object sender, EventArgs e)

这是一个非常漫长而复杂的页面。

感谢您的帮助

Answer 1

首先，查看您发布的示例代码以及计划如何进行Ajax调用，您将需要在页面中启用PageMethods 。 请参阅本教程 ，了解如何执行该部分。

使用jQuery进行实际的Ajax调用可以很简单：

$('select').change(function () {
     $.post('Default.aspx/MethodName',{selectedVal:$(this).val()}, function(data){
         //as far as placing the result in the input text field, I think this will do:
         $(this).parents('tr').find('input:text').val(data);
     });
});

现在，您的MethodName方法必须看起来像这样：

  [WebMethod]
  public static string MethodName(string selectedVal)
  {
     return "something";
  }

jsfiddle（减去ajax调用）。

更新

抱歉，我误解了问题，OP希望替换整个行。 然后将执行以下操作：

 $(this).parents('tr').replaceWith('<tr><td colspan="3"><div>'+data+'</div></td></tr>');

全文：

$('select').change(function () {
         $.post('Default.aspx/MethodName',{selectedVal:$(this).val()}, function(data){
             //as far as replacing the row, this will do:
               $(this).parents('tr').replaceWith('<tr><td colspan="3"><div>'+$(this).val()+'</div></td></tr>');
         });
    });