Jquery ASP.NETCore2AJAX如何获取参数？

如何在ASP.Net Core 2 Razor应用程序中发出AJAX GET请求，并将参数传递给接收函数

例如，我的HTML中有一个Select字段。根据选择的值，我希望收到一个值列表。为此，我以这种方式编写了一个AJAX GET请求

$.ajax({
    type: 'GET',
    url: '/Index?handler=Test2',
    contentType: 'json',
    success: function (result) {
        console.log('Data received: ');
        console.log(result);
    }
});

所以这个电话几乎完美无瑕。它调用我的代码隐藏页面Index.cshtml.cs中的OnGetTest2。我的OnGetTest2看起来像：

[HttpGet]
public IActionResult OnGetTest2(string id)
{
     // Some code logic to get the needed values i want to post back
     Console.WriteLine("Received id: " + id);
     return new JsonResult(9999); // e.g. 9999 as return value
}

---

但是我一直在研究如何通过上面的AJAX调用将Select元素的selected选项的值传递给我的OnGetTest2函数。我怎样才能让它工作？实际上，我将收到9999，因此AJAX调用正在工作，但我需要将所选值传递给OnGetTest2函数。

首先获取选择字段的值

var SelectFieldValue =  $("#Select-Field-ID").val();

然后通过ajax调用将其发送到action，如：

 $.ajax({
    type: 'GET',
    url: '/Index?id=' + SelectFieldValue,
    contentType: 'json',
    success: function (result) {
        console.log('Data received: ');
        console.log(result);
    }
});

---

首先获取选择字段的值

var SelectFieldValue =  $("#Select-Field-ID").val();

然后通过ajax调用将其发送到action，如：

 $.ajax({
    type: 'GET',
    url: '/Index?id=' + SelectFieldValue,
    contentType: 'json',
    success: function (result) {
        console.log('Data received: ');
        console.log(result);
    }
});

---

您不需要将字符串Test2作为参数发送，而是需要声明一个设置为与所选项相等的变量

var e = document.getElementById("ddl");
var item= e.options[e.selectedIndex].value;

或JQuery

var item = $('#ddl').val();

然后您可以通过AJAX发送此消息

$.ajax({
   type: 'GET',
   url: '/Index?id=' + item,
   contentType: 'json',
   success: function (result) {
    console.log('Data received: ');
    console.log(result);
   }
});

---

您不需要将字符串Test2作为参数发送，而是需要声明一个设置为与所选项相等的变量

var e = document.getElementById("ddl");
var item= e.options[e.selectedIndex].value;

或JQuery

var item = $('#ddl').val();

然后您可以通过AJAX发送此消息

$.ajax({
   type: 'GET',
   url: '/Index?id=' + item,
   contentType: 'json',
   success: function (result) {
    console.log('Data received: ');
    console.log(result);
   }
});

---

有两种基本方法可以做到这一点

选项1：使用查询字符串。ajax基本上就是您所拥有的，您将url变量处理程序设置为Test2。在控制器中，使用Request.Query[handler]获取值

[HttpGet]
public IActionResult OnGetTest2()
{
    var id = Request.Query["handler"];
    // ... more stuff

}

选项2：路由属性。路线属性太棒了！将ajax中的url更改为url='/Index/Test2'，然后在控制器中使用：

[HttpGet, Route("index/{id}")]
public IActionResult OnGetTest2(string id)
{
    // id already has the value in it
    // ... do stuff

}

如果您想要字符串以外的东西，比如int，请使用如下内容

[HttpGet, Route("index/{id:int}")]
public IActionResult OnGetTest2(int id)
{

    // ... do stuff

}

---

有两种基本方法可以做到这一点

选项1：使用查询字符串。ajax基本上就是您所拥有的，您将url变量处理程序设置为Test2。在控制器中，使用Request.Query[handler]获取值

[HttpGet]
public IActionResult OnGetTest2()
{
    var id = Request.Query["handler"];
    // ... more stuff

}

选项2：路由属性。路线属性太棒了！将ajax中的url更改为url='/Index/Test2'，然后在控制器中使用：

[HttpGet, Route("index/{id}")]
public IActionResult OnGetTest2(string id)
{
    // id already has the value in it
    // ... do stuff

}

如果您想要字符串以外的东西，比如int，请使用如下内容

[HttpGet, Route("index/{id:int}")]
public IActionResult OnGetTest2(int id)
{

    // ... do stuff

}

---

当我像您一样执行第二个解决方案路由属性时，我将收到整个html页面。所以这里有点不对劲。请注意，Test2不是我想要传递的变量？handler=Test2指示将调用哪个OnGetXXX函数，在我的示例中是OnGetTest2。如果返回整个页面，这是因为该方法返回一个视图。ajax中的url是“/Index？handler=Test2”，在.net中，默认情况下，它将路由到Index方法，url变量处理程序的值等于Test2。这就是.net的工作原理。如果您想路由到/OnGetTest2，那么ajax中的url应该是这样的。然后只需根据需要更改route属性。只需快速澄清一下.NETMVC路由。默认路由是www.mysite.com/controllerName/actionName。因此，/home/index的url会转到主控制器中的索引操作。如果要在主控制器中执行OnGetTest2操作，请使用/home/OnGetTest2。您可以使用路由属性添加特殊路由。因此我必须调用：“/Index/OnGetTest2/myValueToPass”对吗？我明天将查看此消息，我猜您在HomeController中，对吗？那么页面是/home/OnGetTest2/{value}。但是，您可以使用route属性使其成为您想要的。当我像您一样使用第二个解决方案route属性时，我会收到整个html页面作为结果。因此，这里出现了一些问题。请注意，Test2不是我要传递的变量？handler=Test2指示将调用哪个OnGetXXX函数，在我的示例t中他是OnGetTest2。如果返回整个页面，那是因为该方法返回了一个视图。ajax中的url是“/Index？handler=Test2”，默认情况下，.net中的url变量handler将路由到Index方法，其值等于Test2。这正是.net的工作方式。如果要路由到/OnGetTest2，则使用aja中的urlx应该是。然后只需根据需要更改route属性。只需对.net mvc路由进行快速说明。默认路由为www.mysite.com/controllerName/actionName。因此，/home/index的url将指向主控制器中的索引操作。如果您希望主控制器中的OnGetTest2操作，则使用/home/OnGetTest2。您可以使用路由属性添加特殊路由。因此我必须调用：“/Index/OnGetTest2/myValueToPass”对吗？我明天将查看此消息，我猜您在HomeController中，对吗？那么页面是/home/OnGetTest2/{value}。但是，您可以使用route属性使其成为您想要的。您的方法需要一个名为id的参数，但您需要传递一个名为handler的值。和

---

始终使用“@Url.Action”生成Url它的url'@url.actionGetTest2，yourConrollerName'，以及您的添加数据：{id:yourValue}，用于传递值的选项和url:'/Index？handler=Test2'，永远不会命中OnGetTest2方法，除非您有一些特定的roue定义，因此，不确定您的声明是如何实现的。您的方法需要一个名为id的参数，但需要传递一个名为handler的值。并始终使用“@Url.Action”生成Url它的url'@url.actionGetTest2，yourConrollerName'，以及您的添加数据：{id:yourValue}，传递值的选项和url:'/Index？handler=Test2'，永远不会命中OnGetTest2方法，除非您有一些特定的roue定义，所以不确定您的声明是如何实现的