使用 Razor 在 Ajax 调用中传递多个参数

Question

所以本质上，我正在构建一个 Web API，并且我正在尝试使用 ajax 来查询一个接受两个参数的 Web 服务。我需要传递一个 Sting 列表 (SSN)，并且我需要传递一个字符串来确定它查询的环境。 （“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，然后将两个 JSON 对象放入 data 参数中吗？我还听说我可以传递一个 c-sharp 对象，但是如果我尝试这样做，当我在 Razor 代码中时，我将无法访问 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 类。

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

现在在您的 WebApi 控制器的 Post 方法中将这个类作为参数，这样当客户端发送请求时，默认模型绑定器将能够将请求值映射到该类对象的属性。

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 类结构的 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 是一篇文章，详细解释了将客户端数据发送到 Web api 的不同选项。

我硬编码了 url 变量的值。您应该考虑使用像 Url.Action 这样的 Html 辅助方法来生成到您的应用端点的正确相对路径，如 this post 中所述。