Pass ViewModal from javascript file to code-behind - json

Question

I have a Javascript file that calls a method in my code-behind. This seems to work if I create a parameterless default constructor, EXAMPLE 1, BUT I want to pass to the save method my ViewModel, EXAMPLE 2. When I do this I get a 500 error. After digging deeper I discovered more details about that network error.
Parameterless Default Constructor - this works but only if the other constructor is commented out.
EXAMPLE 1
[HttpPost]
public JsonResult SaveWorkRequestDetails()
{
return Json(new {});
}
If I have both of these in the code-behind file then I get this error: The current request for action 'SaveWorkRequestDetails' on controller type 'WorkRequestController' is ambiguous between the following action methods:
System.Web.Mvc.JsonResult SaveWorkRequestDetails() on type WorkRequest.Controllers.WorkRequestController
System.Web.Mvc.JsonResult SaveWorkRequestDetails(WorkRequest.ViewModel.WorkRequestViewModel) on type WorkRequest.Controllers.WorkRequestController
EXAMPLE 2
[HttpPost]
public JsonResult SaveWorkRequestDetails(WorkRequestViewModel viewModel)
{
// TODO: Save logic goes here
return Json(new { });
}
I need to pass the viewModel in order to save the user's selections. I am missing something and I am not sure what.
RegisterUIEventHandlers: function () {
$('#Save').click(function (e) {
// Check whether the form is valid. Note: Remove this check, if you are not using HTML5
if (document.forms[0].checkValidity()) {
e.preventDefault();
$.ajax({
type: "POST",
url: WorkRequest.SaveUrl,
data: ko.toJSON(WorkRequest.ViewModel),
contentType: 'application/json',
async: true,
beforeSend: function () {
// Display loading image
alert(ko.toJSON(WorkRequest.ViewModel));
},
success: function (result) {
// Handle the response here.
},
complete: function () {
// Hide loading image.
},
error: function (jqXHR, textStatus, errorThrown) {
// Handle error.
}
});
}
});
}
In the alert you see in beforeSend, in the AJAX POST within the javascript above, I see the selections the user makes. Everything works so I just want to pass this to the Controller's SaveWorkRequestDetails, how can I do this please. I was my understanding that the data parameter passed this on to the method specified in the url parameter.

Answer 1

The error message is clear. You have two action methods with the same name. So, call to the SaveWorkRequestDetails is ambigious as the error indicates.
You can overload functions in C# but it is not possible in ASP.NET MVC Framework.
It is not possible to have two SaveWorkRequestDetails() actions with different method signatures on the same controller in ASP.NET MVC.
Just remove the first SaveWorkRequestDetails(), and you will be fine.

Answer 2

I changed the dataType to json instead of application/json. This resolved the issue of the error stating there was not a parameterless default constructor. Now SaveWorkRequestDetails is being called.
RegisterUIEventHandlers: function () {
$('#Save').click(function (e) {
// Check whether the form is valid. Note: Remove this check, if you are not using HTML5
if (document.forms[0].checkValidity()) {
e.preventDefault();
$.ajax({
type: "POST",
url: WorkRequest.SaveUrl,
data: ko.toJSON(WorkRequest.ViewModel),
dataType: 'json',
async: true,
beforeSend: function () {
// Display loading image
alert(ko.toJSON(WorkRequest.ViewModel));
},
success: function (result) {
// Handle the response here.
},
complete: function () {
// Hide loading image.
},
error: function (jqXHR, textStatus, errorThrown) {
// Handle error.
}
});
}
});