テキストボックスからjquery関数とコントローラ関数への値渡しの問題

Question

テキストボックスから値を渡したい値をjQueryに渡す際に問題が発生しました。ここで

です .cshtml：

@Html.TextBoxFor(m => m.OrderNumber, new { @class = "form-control", id = "orderNumber" }) 

マイスクリプト：私のコントローラで

function maintenance_tapped(e) { 
    var data = $('#orderNumber').val(); 

    $("#SapPopUp") 
     .dialog({ 
      width: 600, 
      height: 420, 
      model: true, 
      buttons: { 
       "OK": function() { 
        $.ajax({ 
         url: '@Url.Action("RetrieveOrder", "Home")', 
         data: data, 
         type: "POST" 
        }).done(function() { 
         $(this).dialog("close"); 
        }); 
       }, 
       "Cancel": function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 
} 

コード：

[HttpPost] 
public async Task<ActionResult> RetrieveOrder(string number) 
{ 
    if (_sapHelper == null) 
    { 
     _sapHelper = new Helper(); 
    } 

    return View(); 
} 

私の問題は、私はRetrieveOrderにブレークポイントを置く場合機能と私はnumberの値を確認私はを取得。

Chrome->inspect element->Consoleに入り、$('#orderNumber').val()と入力すると、テキストボックスに入力した値が取得されます。

また、関数に値を渡していないようです。

Answer 1

あなたはjavascriptオブジェクトに値を持っているし、あなたのアクションのパラメータ名のキーを一致させることができます。この

dataType :'json', 
data: {number: data}, 

Answer 2

を試してみてください。

これは動作するはずです。

$.ajax({ 
    url: '@Url.Action("RetrieveOrder", "Home")', 
    data: { 
     number: $('#orderNumber').val() 
    }, 
    type: "POST" 
}).done(function() { 
    $(this).dialog("close"); 
}); 

はまた、私はあなたがアクションメソッドからするViewResultを返すが、あなたのAJAXメソッド呼び出しの完了/成功イベントハンドラであることを使用していない参照してください。それは何をしているのですか？

Answer 3

これはAleksander MaticとRob Langのおかげで修正されました。

Soloution

function maintenance_tapped(e) { 
//var data = $('#orderNumber').val(); <------- Remove from here 

$("#SapPopUp") 
    .dialog({ 
     width: 600, 
     height: 420, 
     model: true, 
     buttons: { 
      "OK": function() { 
       var data = $('#orderNumber').val(); //<--------- Place here 
       $.ajax({ 
        url: '@Url.Action("RetrieveOrder", "Home")', 
        data: data, 
        type: "POST", 
        dataType :'json',  //<-------- Added 
        data: {number: data}, //<-------- Added 
       }).done(function() { 
        $(this).dialog("close"); 
       }); 
      }, 
      "Cancel": function() { 
       $(this).dialog("close"); 
      } 
     } 
    }); 
}