CODEWITHSUNDEEP
javascriptjqueryajaxasp.net-coremodel-view-controller
Tumo Maraisane
Tumo Maraisane

Reputation: 105

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

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
}

Upvotes: 2

Views: 3027

Answers (2)

Jorge Zuverza
Jorge Zuverza

Reputation: 915

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

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

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

Upvotes: 1

Related Questions