jquery $ .ajaxを使用したASP.NET MVC検証

Question

jquery $ .ajaxを介してデータをコントローラーに送信している状況があります。データはシリアル化されたJSON文字列です。 （MVC 3.0）

それはうまくバインドします - 私のコントローラーは結果を受け取り、それらは正しいです。さて、私はそれが検証を投稿することに問題を抱えています。私のオブジェクトのすべてがコントロールをネイティブに形成するとは限らないわけではないと思う。

問題は、モデルにはコレクションのアイテムが必要なため、JavaScriptを使用してモデルにデータを「追加」する必要があることです。 JavaScript、jQuery、およびテンプレートを使用して、このアイテムを選択しています。コントローラーに送信する前にモデルに追加します。ただし、ポストバックでは、このデータは存在しません（これは、JavaScriptアレイに脱必要になる必要があるため、予想されます。これは私の問題ではありません）。

私の問題は、検証のためにダブルポストバックを実行するか、まったく実行しないことです。使用する場合 e.preventDefault(); 通常のフォームの投稿を停止するために、私は検証を得ることができません。しかし、私がそれを使わないなら、私は いつも 二重の投稿を取得します。

私のjQueryコードは次のとおりです。

   $('form').submit(function(e){

    var data = $('form').serializeObject();
    data.Quality = // this line adds some data from a JSON object.

    var json = JSON.stringify(data);

    $.ajax({
      url: location.href,
      type: 'POST',
      dataType: 'json',
      data: json,
      contentType: 'application/json',
      success: function (data) {
       $("#jsonOutput").html(json);
      }
    });

    e.preventDefault();
   });

SerializeObject関数は次のとおりです。

$.fn.serializeObject = function () {
 var o = {};
 var a = this.serializeArray();
 $.each(a, function () {
  if (o[this.name]) {
   if (!o[this.name].push) {
    o[this.name] = [o[this.name]];
   }
   o[this.name].push(this.value || '');
  } else {
   o[this.name] = this.value || '';
  }
 });
 return o;
};

これが私のコントローラーアクションです。

  [HttpPost]
  public ActionResult Blueprint(Blueprint blueprint)
  {
   if (ModelState.IsValid)
   {
    using (var context = new Mapping.DataContext())
    {
     context.Blueprints.Add(blueprint);
     context.SaveChanges();

     return Json(Redirect("/List/Blueprints")); 
    }
   }

   return View(blueprint);
  }

要求された場合はさらにコードを投稿しますが、これがすべて関連すると思います。ライブラリを使用しています knockoutjs テンプレートの場合、それがまったく関連している場合。該当するかどうかを確認するために必要なものを教えてください。

Answer 1

 $("#jsonOutput").html(json);

二重の投稿に関する限り、これはイベントハンドラーによってリクエストが送信され、実際のフォームが送信されているため、これが起こっています。この問題を取り除くには、次のようなものが必要です。

$('form').submit(function(e){

    var data = $('form').serializeObject();
    data.Quality = // this line adds some data from a JSON object.

    var json = JSON.stringify(data);

    $.ajax({
      url: location.href,
      type: 'POST',
      dataType: 'json',
      data: json,
      contentType: 'application/json',
      success: function (data) {
       $("#jsonOutput").html(json);
      }
    });

    return false;
   });

falseを返すと、システムにすでに処理したことを伝えているときに、フォームによってイベントが処理されるのを防ぐことができます。

私があなたがしていることについて私が見るもう1つの問題は、あなたがデータ型を設定することでJSONを要求しています：「JSON」これはあなたの要求がJSONオブジェクトを期待していることを意味し、検証に失敗した場合、あなたは完全なビューを返しています。これはおそらくあなたがやりたいことではありません。

また、注：

$("#jsonOutput").html(json);

成功した応答で呼び出されているのは、応答からのデータではなく、リクエストで送信しているJSONの値をロードすることです。