RazorでAjaxコールで複数のパラメータを渡す

Question

本質的に、私はWeb APIを構築しています.2つの引数を受け取るWebサービスにajaxを使用してクエリを実行しようとしています。私はSting（SSNs）のリストを渡す必要があり、クエリする環境を判断するために単一の文字列を渡す必要があります。 （受諾の場合は「a」、統合の場合は「i」）。

私はカミソリとcshtmlを使用しています。そして、これまでのところ、このセクションは私がdivから望むものを私に与えてくれました。

var pInputSssns = document.GetElementById(“SSNinput”).value; 
var pTestRegion = document.GetElementById(“testRegion’).value; 

ただし、そのすぐ下にあります。私は両方のこれらのパラメータをajax呼び出しに挿入しようとしています。

$.ajax({ 
     type: 'GET', 
     contentType: "application/json; charset=utf-8" 
     url: "myurl", 
     data:"{}", 
     success: function (data) { 
      // populate a table 
     } 
    }); 

私はこれを行う方法について複数の意見を聞いたことがあります。それらをJSONとしてシリアル化して、2つのJSONオブジェクトをdataパラメーターに入れることはできますか？私はまた、私はcシャープオブジェクトを渡すことができると聞いたことがあるが、私がしようとすると、私は剃刀のコードの中にいる間、html変数にアクセスすることはできません。

@{ AjaxParam ap = new AjaxParam(); ap.pInputSsns = pInputSsns;} 

そこに両方を渡すのに良い方法はありますか？参考までに、ここにコントローラがあります：

[ScriptMethod (ResponseFormat = Response Format.Json)] 
[System.Web.Http.HttpGet] 
public JArray GetSSNAssociations([FromUri] List <string> pInputSsns, string pTestRegion) 
{ 
\\ do something 
} 

みなさまを歓迎します。

Answer 1

まず、送信するデータのDTOクラスを作成します。クライアントが要求を送信するときに、デフォルトのモデルバインダーが、このオブジェクトのプロパティに要求値をマッピングすることができるようになりますように、パラメータとして、このクラスを持っていますあなたのWEBAPIコントローラのPostメソッドで今すぐ

public class SearchRequest 
{ 
    public List<string> SsnList { set; get; } 
    public string Environment { set; get; } 
} 

クラス。今

public class ProductsController : ApiController 
{ 
    public HttpResponseMessage Post([FromBody]SearchRequest req) 
    { 
     // I am simply returning the same object back. But you can do whatever you want 
     // Check req.SsnList and req.Environment properties and do something useful. 
     return Request.CreateResponse(HttpStatusCode.OK, req); 
    } 
} 

クライアント側のコードから、あなたは私たちのDTOクラスの構造をresemebles javascriptオブジェクトを構築し、jQueryのAJAXを使用してそれを送信することができます。

var model = { Environment: "I", SssList: ["375329567", "3583345"] }; 
var url="../api/products"; 
$.ajax({ 
    type: "POST", 
    data: JSON.stringify(model), 
    url: url, 
    contentType: "application/json" 
}).done(function (res) { 
    console.log('res', res); 
    // Do something with the result :) 
}); 

Here詳しくウェブAPIへのクライアント側のデータを送信するためのさまざまなオプションを説明するポストです。

私は変数urlの値をハードコードしました。 this postで説明されているように、Url.ActionのようなHtmlヘルパーメソッドを使用してアプリケーションエンドポイントへの相対パスを生成することを検討する必要があります。