0

ユーザーが「削除」リンクをクリックする StackOverflow の「フラグ」機能に似たものを複製しようとしています。次に、アイテムを削除する理由を尋ねるポップアップが (jQuery を使用して) 表示されます。それらには、一連のラジオ ボタンと「その他」のテキスト ボックスを介していくつかの事前定義されたオプションが表示されます。フォームを送信する前に、これらのオプションのいずれかを選択する必要があります。これにより、サーバー側の操作が実行され、最初のポップアップが消えます (いくつかの場所でテキストを操作します)。

ポップアップを配置し、このポップアップ内のさまざまなオプションを使用してフォームをレンダリングしましたが、このフォームの投稿を処理する方法がわかりません。通常のフォームとして扱う場合、ユーザーがポップアップの送信ボタンをクリックすると、ajax 機能は実行されませんが、代わりにコントローラーのアクション メソッドの 1 つに投稿する必要があります (サーバー側）変更を確認するために、マイページにリダイレクトします。

ポップアップ内からのデータの収集は、通常、AJAX タイプのシナリオでどのように処理されますか? 誰か例を教えてください。SOが「フラグ」機能でどのようにそれを行っているかわかりません。

4

2 に答える 2

1

MVC の組み込みの AJAX ヘルパーを使用できます。ざっくり以下の通り…

いくつかの AJAX オプションを宣言します。

@{
    AjaxOptions ajaxOpts = new AjaxOptions { UpdateTargetId = "target" };
}

次に、AJAX BeginForm メソッドを使用してフォームを宣言します。

@using (Ajax.BeginForm("GetData", ajaxOpts))
{
  @* Here you put your form data. I'm guessing your popup could just be a DIV that gets positioned and made visible *@


}

AJAX リクエストが戻ってきたときに更新するターゲットは、単純な DIV になります。

<div id="target">  
    @* The output of your GetData controller method will end up here *@
    @Html.Action("GetData", new { model = Model })
</div>

次に、コントローラーに、データを含む PartialView を返すものがあります。

  public PartialViewResult GetData(ViewModel model)
  {
     // Do some stuff here to fetch some data
     // ViewModel will be whatever your view model is called

     return this.PartialView("GetData", model);
  }

これが、AJAX を機能させるための基本です。ブラウザに送り返される HTML を取得して、ページのさまざまな部分を更新する場合は、AjaxOptions の OnComplete 引数に関数を指定して、AJAX ヘルパーが呼び出す jQuery 関数を追加する必要があります。

部分ビューのデータには、ブラウザーの別の場所に移動できる HTML の隠しチャンクが含まれている場合があります。

残念ながら、MVC AJAX ヘルパーは 1 つの UpdateTargetId しかサポートしていません。

編集して追加

Web 構成ファイルの appSettings でこれを設定する必要があります。

<add key="UnobtrusiveJavaScriptEnabled" value="true"/>

また、HTML 出力に jQuery 拡張機能を含める必要があります (おそらく _Layout.cshtml ファイルに?)。

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
于 2012-07-05T14:49:30.070 に答える
0

フォームの送信動作をオーバーライドしてから、シリアル化されたフォームの結果を AJAX ポストでサーバーに送信できます。

$('#myForm').submit(function() {

    $.ajax({
      url: "MyPage.aspx",
      type: "POST",
      data: $(this).serialize(),
      dataType: "text"
    });

    return false;
});
于 2012-07-05T14:26:59.647 に答える