如何使用jQuery的ajax请求部分替代asp.net页面？ [英] How to replace partially asp.net page with a jquery ajax request?

问题描述

比方说，我在网页上有ListView控件。每个ListView项有2 dropdownlists和1个文本框。当第一的dropdownlist已选定的值而改变时，第二的dropdownlist应该填充城市根据第一个。 Finaly，当选择用于第二的dropdownlist的值，成本应显示在文本框。

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>

现在我想使用Ajax时的用户为DropDownList中选择一个不同的值

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

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

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

1. 我应该发送的数据？将DropDownList的价值呢？

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

我怎么只替换行包含可触发Ajax调用DropDownList的？

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.

感谢您帮助

推荐答案

首先，看样品code你贴，你打算如何进行Ajax调用，您将需要启用 PageMethods 在你的页面。 关于如何做到这一点本教程一部分。

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.

实际的Ajax调用使用jQuery可以很简单，比如这个：

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（减去AJAX调用）。

对不起，我误解了问题，OP要更换整排。这怎么办呢：

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

全方面：

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

这篇关于如何使用jQuery的ajax请求部分替代asp.net页面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！