How to pass parameters with value using @url.Action using ajax

Question

I want to pass the values I get from my elements to the controller using Javascript. I want to pass startdate, enddate and true if the region checkbox is checked.

Please note that the script also performs an extract functionality which is already working. I just want to know how I can pass those three parameters to the controller. Thanks

$(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
}

score 1 · Answer 1 · answered Jun 30 '21 at 15:45

Use the data property of the $.ajax() method settings. jQuery will recognise the GET HTTP verb and add them to the querystring for you.

Also note that you need to read the values of the form controls inside the click handler, otherwise the values will be what they were when the page loaded, not when the button was clicked. Try this:

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

score 0 · Answer 2 · answered Jun 30 '21 at 15:47

Possible duplicate

You're looking for the "data" option.

 $(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();
            }
        });
       });
    });

How to pass parameters with value using @url.Action using ajax

2 Answers2