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
}

Rory McCrossan · Accepted Answer · 2021-06-30 15:45:21Z

1

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: //...
});

answered Jun 30, 2021 at 15:45

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jorge Zuverza · Accepted Answer · 2021-06-30 15:47:18Z

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

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related