0

したがって、次を使用して配列に変換されるテーブルがあります。

var result = $("#enrolledStudents").sortable('toArray');

しかし、頭に行くと、次のようにコントローラーに渡します。

$("#update-enroll").click(function () {
            var result = $("#enrolledStudents").sortable('toArray');
            $.ajax({
                url: '@Url.Action("Enrollment", "Classroom")',
                data: { students: result },
                type: 'POST',
                traditional: true
            });
        });

デバッグ ブレークポイントが 2 回オフになり、問題が発生します。POST でコントローラーにデータを送信する適切な方法は何ですか?

4

3 に答える 3

3

私のコメントによると、これを引き起こしている可能性のあることがいくつかあります。

  1. 目立たないファイルを複数回ロードしました
  2. フォームにはアクション メソッドが定義されており、ボタンは送信ボタンとしてフォーム タグ内にあります。これによりフォームが送信され、クリックでもフォームが送信されます - 例を参照してください

例

<form action="/somerowout/someaction">
  <input type="text" id="text1"/>
  <input type="text" id="text1"/>
  <input type="submit" />
</form>

投稿する前にフォームの値を検証する必要がある場合は、追加の Ajax 呼び出しを接続しないでください。JavaScript は次のようになります。

$(document).ready(function () {
    $("form").submit(function(){
        var result = $("#enrolledStudents").sortable('toArray');
        if(result == null){
            //do something to show validation failed
            return false;
        }
        return true;        
    });
});

フォーム コードは次のようになります。

@using (@Ajax.BeginForm(new AjaxOptions { })) { 
    <input type="text" id="text1"/>
    <input type="text" id="text1"/>
    <input type="submit" />
}

Html ヘルパーではなく Ajax を使用する場合は、フォームの代わりに div を使用すると、投稿が重複することはありません。これを達成する方法は次のとおりです。

<div id="enrolledStudents">
  <--! your elements -->
  <button id="saveStudents">Save</button>
</div>

JavaScript

$(document).ready(function () {
    $("saveStudents").click(function(){
        var result = $("#enrolledStudents").sortable('toArray');
        if(result !== null){ /* do some kind of check here. */
            $.ajax({
                url: '@Url.Action("Enrollment", "Classroom")',
                data: { students: result },
                type: 'POST',
                traditional: true,
                success : function(data) {
                    if (data.status) {
                        window.location = data.route;
                    }               
                }
            })
        } else {
            /* notify ui that save didn't happpen */
        }           
    });
});

コントローラー アクションの例 Ajax を使用してデータを投稿する場合、ルートを渡す方法の例を次に示します。

[HttpPost]
public ActionResult SomethingPost(SomeModel model) {
    if (Request.IsAjaxRequest()) {
        var json = new {
                   status = true,
                   route = @Url.RouteUrl("MyRouteName", new { /* route values */ })
        };
        return Json(json, JsonRequestBehavior.AllowGet);
    }
}
于 2012-07-27T17:26:35.217 に答える
1

送信ボタンのデフォルトの動作 (フォームの投稿) を妨げていますか? そうするために使用preventDefaultします。

$("#update-enroll").click(function (e) {
  e.preventDefault();
 //rest of the code

});

編集：コメントによると

JSONajax ハンドラーでリダイレクトを行うには、 Responseでリダイレクトする URL を呼び出し元に返す必要があります。

[HttpPost]
public ActionResult Classroom(string students)
{
  //do some operaton
  if(Request.IsAjax())
  {
     //This is an Ajax call
     return Json(new
                   {
                     Status="Success",
                     NewUrl = Url.Action("Index","Home")
                   });
  }
  else
  {
     //Normal request. Use RedirectToActiom
      return RedirectToAction("Index","Home");
  }

}

ここで、ajax 呼び出しで JSON の結果を確認し、リダイレクトを行います。

 $.ajax({
         url: '@Url.Action("Enrollment", "Classroom")',
         data: { students: result },
         type: 'POST',           
         dataType: "json",
         contentType: "application/json; charset=utf-8",
         success: function (data) {
               if(data.Status=="Success")
               {
                  window.location.href = data.Newrl;
               }
               else
               {
                   alert("some error");
               }
         }

});
于 2012-07-27T17:17:00.580 に答える
1

jquery ファイルが 2 回読み込まれていないかどうかを確認します。私はこの動作をしており、問題はファイルが 2 回読み込まれたことでした。

于 2012-07-27T17:26:55.593 に答える