Null value getting passed to controller from javascript

Question

I checked couple of posts in SO and changed my code according to few suggestions still it is not working.

I am building an ASP.NET Core MVC application. When executed, the View presents a list of rows with ID. Each row has a corresponding button and it is required to pass the ID of the row whose button was clicked.

In the View, I have made call to a JS function as below:

            <tr>
                <td>
                    <input type="submit" id="btnSubmit" value="Update Status" class="ids" data-id="@sheet.ID" onClick="sendId(@sheet.ID)" />
                </td>
            </tr>

The JS function is as below:

    function sendId(id) {
        var rowId = parseInt(id);
        $.ajax({
            url: '/UpdateStatus/' + rowId,
            type: 'POST',
            contentType: 'application/json',
            dataType: 'json',
            success: function() { alert('Success'); },
            error: function() { alert('Error'); }
       });
       }

The controller action method is hit when button is clicked but it also triggers the error function of the above javascript code and it passes null to the action method.

        [HttpPost]
        [Route("UpdateStatus/{id}")]
        public void UpdateStatus(string mID)
        {
            // Do something
        }

** Edited **

Posting complete controller code on demand.

   public class HomeController : Controller
    {
        private readonly ILogger<HomeController> _logger;

        public HomeController(ILogger<HomeController> logger)
        {
            _logger = logger;
        }

     
        [Route("~/UpdateStatus/{id}")]
        public void UpdateStatus([FromQuery] string mID)
        {
            // Do Something
        }

        [HttpGet]
        [Route("Index")]
        public ActionResult Index()
        {
            //TemplateData template = new TemplateData();
            List<TemplateData> templateList = new List<TemplateData>();
            templateList = ImportExcel();
            return View(templateList.AsEnumerable());
        }

        public IActionResult Privacy()
        {
            return View();
        }

        [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
        public IActionResult Error()
        {
            return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
        }

        private List<TemplateData> ImportExcel()
        {
            // Read Excel
            // path to your excel file
            string path = "C:\\ExcelData\\Results.xlsx";
            FileInfo fileInfo = new FileInfo(path);

            ExcelPackage package = new ExcelPackage(fileInfo);
            ExcelPackage.LicenseContext = LicenseContext.NonCommercial;
            ExcelWorksheet ws = package.Workbook.Worksheets["Data"];

            List<TemplateData> templateList = new List<TemplateData>();
 

            // get number of rows and columns in the sheet
            int rowCount = ws.Dimension.Rows; // 20
            int ColCount = ws.Dimension.Columns; // 7

            // loop through the worksheet rows and columns
            for (int row = 2; row <= rowCount; row++)
            {
                TemplateData template = new TemplateData();
                template.ID = ws.Cells[row, 1].Value.ToString();

                if (ws.Cells[row,6].Value != null)
                {
                    template.EmpName = ws.Cells[row, 6].Value.ToString();
                }

                if (ws.Cells[row, 7].Value != null)
                {
                    template.WareHouse= ws.Cells[row, 7].Value.ToString();
                }

                if (ws.Cells[row, 12].Value != null)
                {
                    template.Observation = ws.Cells[row, 12].Value.ToString();
                }

                templateList.Add(template);
            }

            return templateList;
        }

    }

Answer 1

You need to change the name of the parameter to match the route, like so:

[HttpPost]
[Route("UpdateStatus/{id}")]
public void UpdateStatus(string id)
{
    // Do something
}

Answer 2

I don't know why you need ajax, but if you still want it you have to remove type="submit" from button

<td>
 <input id="btnSubmit" value="Update Status" class="ids" onClick="sendId(@sheet.ID)" />
</td>

fix your ajax

    $.ajax({
        url: '/UpdateStatus/' + id,
        type: 'GET',
       success: function() { alert('Success'); },
        error: function() { alert('Error'); }
   });

and remove Post from the action and fix the route

[Route("~/UpdateStatus/{id}")]
public IActionResult UpdateStatus(string id)
{
    // Do something
    return Ok();
}