1

たとえば、ページに Listview コントロールがあるとします。各リストビュー アイテムには、2 つのドロップダウン リストと 1 つのテキスト ボックスがあります。最初のドロップダウンリストで選択した値が変更された場合、2 番目のドロップダウンリストには、最初のドロップダウンリストに応じて市区町村が入力されます。最後に、2 番目のドロップダウン リストの値を選択すると、テキスト ボックスにコストが表示されます。

<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 に答える