如何用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>');
         });
    });