1

假设我在页面上有一个 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 调用的下拉列表的行？

编辑

所有方法都具有以下签名

protected void ddlCountry_SelectedIndexChanged(object sender, EventArgs e)

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

感谢您的帮助

4

1 回答 1

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>');
         });
    });
于 2012-12-31T19:06:08.917 回答