Why data is not passed to the controller in jQuery

Question

I have a page in MVC2 containing a grid button and images. When the image button is clicked, the current page, orderBy and filter will be sent to the controller in jQuery. The code:

<script type="text/javascript"> $("#ExportExcel").click(function (e) { e.preventDefault(); var resourceId = $('#resourceId').val(); var grid = $('#Grid').data('tGrid'); var pagenum = grid.currentPage; var orderBy = grid.orderBy var filter = grid.filterBy; $.ajax({ url: '@Url.Action("ExportToExcel", "ExportExcelButton")', data: { resourceId: resourceId, pagenum: pagenum, orderBy: orderBy, filter: filter }, type: 'POST', success: function (data) { } }); }); </script> <a href="<%: Url.Action("ExportToExcel", "ExportExcelButton") %>"> <img src='<%: Url.Content("~/Content/Images/ExportExcelButton.gif") %>'/></a> public ActionResult ExportToExcel(string resourceId, string pagenum, string orderBy, string filter) 

However, when you click the image button, all data is null in the ExportToExcel action. I wonder how to do it right. Thank you very much.

Answer 1

I see two problems in your code:

• you didn’t specify the link identifier in html, so clicking on it just went into action, so you saw a zero value in the parameters - not a single one was sent
  it should be:

   <a id="ExportExcel" href="<%: Url.Action("ExportToExcel", "ExportExcelButton") %>"> <img src='<%: Url.Content("~/Content/Images/ExportExcelButton.gif") %>'/></a> 

• place the script tag below the slowdown or bind it during $ (document) .ready (..)