如何使用jQuery的Ajax请求部分替代asp.net页面?(How to replace par

2019-10-17 13:10发布

比方说,我在页面上ListView控件。 每个ListView项有2个dropdownlists和1个文本框。 当第一下拉列表已选择的值改变时,所述第二下拉列表应与根据第一个城市来填充。 Finaly,当选择用于所述第二下拉列表的值,成本应该出现在文本框。

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

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

感谢您的帮助

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


文章来源: How to replace partially asp.net page with a jquery ajax request?