How to replace partially asp.net page with a jquery ajax request?

Question

Let's say, I have a Listview control on the page. Each Listview item has 2 dropdownlists and 1 textbox. When the first dropdownlist has a selected value changed, the second dropdownlist should be populated with city depending on the first one. Finaly, when a value is selected for the second dropdownlist, a cost should appear on the textbox.

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

Now I want to use ajax when user selects a different value for the dropdownlist

$('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.
    //
  }
 });

I want to replace only the entire tr element. Those are my questions:

1. What should I send in the data? The value of the dropdownlist?

2. How do I replace only the row containing the dropdownlist that triggered the ajax call?

EDIT

All the methods have the following signature

protected void ddlCountry_SelectedIndexChanged(object sender, EventArgs e)

It's a very long and complex page.

Thanks for helping

Answer 1

Firstly, looking at the sample code you posted and how you plan to make the Ajax call, you will need to enable PageMethods in your page. See this tutorial on how to do that part.

The actual ajax call using jQuery can be as simple as this:

$('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);
     });
});

Now, your MethodName method would have to look like this:

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

jsfiddle (minus the ajax call).

Update

Sorry, I misread the question, the OP wants to replace the WHOLE row. This will do then:

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

Full context:

$('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>');
         });
    });