如何使用 @url.Action 使用 ajax 传递带值的参数答案

【问题标题】：How to pass parameters with value using @url.Action using ajax如何使用 @url.Action 使用 ajax 传递带值的参数
【发布时间】：2021-09-12 19:04:33
【问题描述】：

我想使用 Javascript 将从元素中获得的值传递给控制器。如果选中了region 复选框，我想传递startdate、enddate 和true。

请注意，该脚本还执行已在工作的提取功能。我只想知道如何将这三个参数传递给控制器。谢谢

$(function() {
  var startdate = document.getElementById("StartDate").value;
  var endDate = document.getElementById("EndDate").value;
  var regionname = document.getElementById("RegionName").checked;
  console.log(regionname);
  
  $("#btn-go").click(function() {
    $.ajax({
      type: "GET",
      url: '@Url.Action("GenerateExporttReport", "Reports")',
      xhrFields: {
        responseType: 'blob'
      },
      success: function(result) {
        console.log(result)
        var blob = result;
        var downloadUrl = URL.createObjectURL(blob);
        var a = document.createElement("a");
        a.href = downloadUrl;
        a.download = "downloadFile.xlsx";
        document.body.appendChild(a);
        a.click();
      }
    });
  });
});

public FileContentResult GenerateExportReport(string startdate, string endDate, bool regionname)
{
  // Code already exists here
}

【问题讨论】：

标签： javascript jquery ajax asp.net-core model-view-controller

【解决方案1】：

使用$.ajax() 方法设置的data 属性。 jQuery 将识别 GET HTTP 动词并将它们添加到查询字符串中。

还请注意，您需要在点击处理程序内部读取表单控件的值，否则这些值将是页面加载时的值，而不是加载时的值按钮被点击。试试这个：

$.ajax({
  type: "GET",
  url: '@Url.Action("GenerateExporttReport", "Reports")',
  xhrFields: {
    responseType: 'blob'
  },
  data: {
    startDate: $('#StartDate').val(),
    endDate: $('#EndDate').val(),
    regionName: $('#RegionName').prop('checked')
  },
  success: //...
});

【讨论】：

【解决方案2】：

Possible duplicate

您正在寻找“数据”选项。

 $(function () {
            var startdate = document.getElementById("StartDate").value;
            var endDate = document.getElementById("EndDate").value;
            var regionname = document.getElementById("RegionName").checked;
        
            console.log(regionname);
           $("#btn-go").click(function () {
               $.ajax({
                   type: "GET",
                   url: '@Url.Action("GenerateExporttReport", "Reports")',
                   data: {startdate : startdate, endDate : endDate, regionname : regionname  },
                xhrFields: {
                   responseType: 'blob'
               },
            success: function (result) {
                console.log(result)
                var blob = result;
                var downloadUrl = URL.createObjectURL(blob);
                var a = document.createElement("a");
                a.href = downloadUrl;
                a.download = "downloadFile.xlsx";
                document.body.appendChild(a);
                a.click();
            }
        });
       });
    });

【讨论】：