We Keep Coding

Ajax errorThrown: Internal Server Error but state is 4

I have this ajax call below
$(function(){
$.ajax({
type: "GET",
url: '/CafeTableDetails/GetTotalItems',
data: '{"url":"test"}',
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (result) {
debugger
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
debugger
alert("some error");
}
});
});
and it can call the action method of my controller in C# MVC /CafeTableDetails/GetTotalItems
public ActionResult GetTotalItems()
{
bool isSuccess = true;
return Json(new { isUpdateSuccess = isSuccess, JsonRequestBehavior.AllowGet });
}
But as the action method return it back as Json, it falls into error. The XMLHttpRequest return state is 4, textStatus = "Error" and errorThrown is "Internal Server Error". How do I troubleshoot this further?

Your ajax method should be :
$.ajax({
type: "GET",
url: "/CafeTableDetails/GetTotalItems",
data: JSON.stringify({ url: 'test' }),
dataType: "json",
contentType: 'application/json; charset=utf-8',
success: function(response) {
console.log(response);
},
error: function(xhr, ajaxOptions, thrownError) {
console.log(xhr.responseText);
}
});
and your controller action method will be:
[HttpGet]
public JsonResult GetTotalItems(string url)
{
// some business logic and return
return Json(url, JsonRequestBehavior.AllowGet);
}

Ajax. SyntaxError. Invalid character

I have an asp.net mvc application. I have view named "Access", controller and I'm tring to call one of controllers method in ajax. And I got an Syntax Error. Method Test was not called at all
Controller method code:
[HttpGet]
public JsonResult Test(string p)
{
return Json(new User() { Name="Nat"}, JsonRequestBehavior.AllowGet);
}
ajax call:
$.ajax({
type: "GET",
url: "Access/Test", // the method we are calling
contentType: "application/json; charset=utf-8",
data: { "p": "test" },
dataType: "json",
success: function (result) {
alert("yes");
alert('Yay! It worked!' + result);
},
error: function (request, status, error) {
alert('Not worked ' + error);
}
});
It is a very simple code but I cann't force it work.I want to understand why my json data is incorrect and I got an Error. And I want to execute my method

You send GET request, so remove data and contentType - they are no needed in GET requests:
$.ajax({
type: "GET",
url: "Access/Test", // the method we are calling
dataType: "json",
success: function (result) {
alert("yes");
alert('Yay! It worked!' + result);
},
error: function (request, status, error) {
alert('Not worked ' + error);
}
});
And remove p from action, or set it to null:
[HttpGet]
public JsonResult Test(string p = null)
{
return Json(new User() { Name="Nat"}, JsonRequestBehavior.AllowGet);
}

AccessContoller.cs
public class AccessController : Controller
{
[HttpGet]
public JsonResult Test(string p)
{
return Json(new User() { Name="Nat"}, JsonRequestBehavior.AllowGet);
}
}
Index or Any Page Call
$(document).ready(function(){
$.ajax({
type: "GET",
url: "Access/Test", //First Controller Name(Access) or After Method Name
contentType: "application/json; charset=utf-8",
data: { "p": "test" },
dataType: "json",
success: function (result) {
alert("yes");
alert('Yay! It worked!' + result);
},
error: function (request, status, error) {
alert('Not worked ' + error);}
});
});

Controller returns raw JSON object as view

i'm using MVC architecture, i've a POST form as Bootstrap Modal that attach its form data after submit to an AJAX Call
$.ajax({
type: "POST",
url: action,
enctype: "multipart/form-data",
data: dataString,
cache: false,
contentType: contentType,
processData: processData,
beforeSend: function () {
block('#mymodal');
},
success: function (data, status, xhr) { console.log("success ajax"); onAjaxSuccess(xhr, status, '#mymodal') },
error: function (xhr, status) { console.log("error ajax"); onAjaxFailed(xhr, status, error, '#error-div') },
complete: function (xhr, status) { console.log("complete ajax"); onAjaxComplete(xhr, status, '#mymodal', '#alert', '#myModal') }
});
where action is the Controller Method where it passes the required data, contentType and processData are both false
this ajax call is working fine and sends the call to the controller correctly
public ActionResult MyCtroller(myViewModel model)
{
//processing stuff
JsonResultObject result = new JsonResultObject();
try
{
//return secess
}
catch (Exception ex)
{
//return error
}
SearchCriteria<MyModel> viewModel = new SearchCriteria<MyModel>();
viewModel.SortExpression = m => m.OrderByDescending(a => a.Date);
SearchResult<MyModel> searchResult = MyModelService.Instance.Search(viewModel);
result.PartialViewHtml = RenderPartialViewToString("PartialView.cshtml", searchResult);
return Json(result));
}
after the processing is completed and it's time to return the page it print the result as pure JSON with the partial view in that JSON as object, instead of rendering the partialView and the success, complete, error in the Ajax call earlier doesn't get called
{
"IsRedirect": false,
"RedirectUrl": null,
"Success": true,
"AlertMessage": {
"IsAutoHide": false,
"Dissmisable": true,
"ShowIcon": false,
"Message": "success",
"AlertCSS": "alert alert-success",
"AlertType": 3,
"AlertTypeMetronic": "success"
},
"PartialViewHtml":"-----partialView HTML code-----"
}

You should call Json directly with the data you intend to serialize. The Json call will return a JsonResult object so do not pass it an instance of JsonResult. If you do want to use JsonResult directly then return that without the additional call to Json.
Also use the overload of Json with the JsonRequestBehavior parameter.
[HttpPost]
public ActionResult MyCtroller(myViewModel model)
{
var result = new ActualInstanceOrContainerToBeReturned;
return Json(result, JsonRequestBehavior.AllowGet);
}
Also I am not sure why you would want to return the view inside the JsonResult so I will not comment except to say that might be bad design. In the interest of SOC keep the data and the view separate (this includes the generation of these items).

I think you need to change your controller
public ActionResult MyCtroller(myViewModel model)
{
//processing stuff
JsonResultObject result = new JsonResultObject();
try
{
//return secess
}
catch (Exception ex)
{
//return error
}
SearchCriteria<MyModel> viewModel = new SearchCriteria<MyModel>();
viewModel.SortExpression = m => m.OrderByDescending(a => a.Date);
SearchResult<MyModel> searchResult = MyModelService.Instance.Search(viewModel);
// result.PartialViewHtml = RenderPartialViewToString("PartialView.cshtml", searchResult);
// If you want to render as html partial view
return PartialView("PartialView.cshtml", searchResult);
// return Json(result));
}
and Javascript code
$.ajax({
type: "POST",
url: action,
enctype: "multipart/form-data",
data: dataString,
cache: false,
contentType: contentType,
processData: processData,
beforeSend: function () {
block('#mymodal');
},
success: function (data, status, xhr) {
console.log("success ajax");
onAjaxSuccess(xhr, status, '#mymodal')
$("#YOUR_DIV_ID").html(data);
},
error: function (xhr, status) { console.log("error ajax"); onAjaxFailed(xhr, status, error, '#error-div') },
complete: function (xhr, status) { console.log("complete ajax"); onAjaxComplete(xhr, status, '#mymodal', '#alert', '#myModal') }
});

Do you need to use two calls - 1 get and 1 post in ajax or can you send data back with the success / failure?

I have the following controller method:
public JsonResult CreateGroup(String GroupName)
{
ApplicationUser user;
var userName = User.Identity.Name;
using (DAL.GDContext context = new DAL.GDContext())
{
user = context.Users.FirstOrDefault(u => u.UserName == userName);
if (user != null)
{
var group = new Group();
group.GroupName = GroupName;
group.Members.Add(user);
context.Groups.Add(group);
context.SaveChanges();
}
}
string result = userName;
return Json(result, JsonRequestBehavior.AllowGet);
}
with the following ajax call:
$(function () {
$('#CreateGroup').on("click", function () {
var groupName = $('#groupname').val();
if (groupName != '') {
$.ajax({
url: '#Url.Action("CreateGroup","AjaxMethods")',
type: "POST",
data: JSON.stringify({ 'GroupName': groupName }),
dataType: "json",
cache: false,
contentType: "application/json; charset=utf-8",
success: function (data) {
alert("success");
CreateGroup(data);
},
error: function () {
alert("An error has occured!!!");
}
});
}
});
The CreateGroup function fails saying "Uncaught ReferenceError: data is not defined"
Do i have to use another Json request - type post - to get the username?

you can do the call without using JSON.stringify. Also your controller method has a cache attribute that may yield more control. Personally, I would use the controller cache control. You are probably getting a cached version of the controller call prior to returning data.
[OutputCache(NoStore = true, Duration = 0)]
public ActionResult CreateGroup(string GroupName)
$.ajax({
url: '#Url.Action("CreateGroup","AjaxMethods")',
type: "POST",
data: { 'GroupName': groupName },
dataType: "json",
traditional: true,
success: function (data, status, xhr ) {
alert("success");
CreateGroup(data);
},
error: function () {
alert("An error has occured!!!");
}
});
NOTE: Update success callback.

AJAX post data is null in controller mvc

I try to send a JSON object back to the server. This is my AJAX call:
$.ajax({
url: '/Home/NewService',
async: false,
type: "POST",
data: JSON.stringify(props),
error: function (jqXHR, textStatus, errorThrown) {
console.log("FAIL: " + errorThrown);
},
success: function (data, textStatus, jqXHR) {
console.log("SUCCES");
}
});
The evaluation of JSON.stringify(props) in the browser's debugger is
"[{"name":"firstName","value":"firstValue"}]"
This is the method in the controller which is being called:
[HttpPost]
public void NewService(dynamic json)
{
Response.Write(json);
}
The problem I have is that always the json variable from above is an empty object.
The success function gets called but when I debug the json var is displayed as empty.
Please tell me what I am doing wrong.
Thank you.

I don't think you can bind to a dynamic type the way you're trying to. You can try to create a class that maps your data, something like:
public class Content
{
public string Name { get; set; }
public string Value { get; set; }
}
Now in your action:
[HttpPost]
public ActionResult NewService(Content[] data)
{
// sweet !
}
And in your js like Olaf Dietsche said you need to specify your contentType:
var props = [
{ "Name": "firstName", "Value": "firstValue" },
{ "Name": "secondName", "Value": "secondValue" }
];
$.ajax({
url: '/Home/NewService',
contentType: "application/json",
async: true,
type: "POST",
data: JSON.stringify(props),
error: function (jqXHR, textStatus, errorThrown) {
console.log("FAIL: " + errorThrown);
},
success: function (data, textStatus, jqXHR) {
console.log("SUCCESS!");
}
});

According to jQuery.ajax(), the default content type is is application/x-www-form-urlencoded. If you want to send the data as JSON, you must change this to
$.ajax({
url: '/Home/NewService',
contentType: 'application/json',
...
});

Use the following code to solve this problem
Ajax Call
function SaveDate() {
var obj = {};
obj.ID = '10';
obj.Name = 'Shafiullah';
$.ajax({
url: '/Home/GetData',
dataType: "json",
type: "Post",
contentType: 'application/json',
data: JSON.stringify({ ID: obj.ID, Name: obj.Name }),
async: true,
processData: false,
cache: false,
success: function (data) {
alert(data.id + ' , ' + data.name);
},
error: function (xhr) {
alert('error');
}
});
}
My controller action method
[HttpPost]
public IActionResult GetData([FromBody] Employee employee)
{
return Json(employee);
}