ajax with return Json(new { success = false}) return black page with responseText rather than alert

Hi I trying to return alert using json success but when file is not image and click save, it go into  if (!allowedExtensions.Contains(checkextension)) but it return blank page with {"success":false,"responseText":"file is not image type"}  with url Home/SaveUpdateData

I tried change to JsonResult action but still the same. I don't know where gone wrong. The part of update image do work

<div class="modal fade" id="updateModal" role="dialog">

<div class="modal-dialog">

<div class="modal-content" id="updateModalContent">

<div>

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal">&times;</button>

</div>

@if (Model.BoothModelCollection != null)

{

@*@using (Html.BeginForm("SaveUpdateData", "Home", FormMethod.Post, new

{

id = "submitForm",

onsubmit = "return AjaxPostUpdate(this)",

enctype = "multipart/form-data",

@class = "AddBooth"

}))

{*@

<form id="submitForm" action="Home/SaveUpdateData" class="AddBooth" method="post" enctype="multipart/form-data" onsubmit="return AjaxPostUpdate(this)">

<div class="modal-body" style="width:50%;position: relative;margin: auto">

<div class="form-group">

<div class="widget-user-image" id="Image" style="max-width:300px;max-height:300px"></div>

<div class="input-group" style="margin-top:10px">

<label for="imgInpUpdate" class="btn btn-primary btn-block btn-outlined">

<i class="glyphicon glyphicon-folder-open" style="margin-right: 5px"></i>

Choose image

</label>

<input type="file" name="files" id="imgInpUpdate" style="display: none" />

</div>

</div>

<div class="form-group">

<label>Booth ID</label>

<div class="input-group">

<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>

<input type="text" class="form-control" id="BoothID" name="BoothID" readonly="readonly">

</div>

<spanasp-validation-for="BoothModelInputDetail.BoothID" class="text-danger"></span>

</div>

<div class="form-group">

<labelasp-for="BoothModelInputDetail.BoothName"></label>

<div class="input-group">

<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>

<input type="text" class="form-control" id="BoothName" name="BoothName">

</div>

<spanasp-validation-for="BoothModelInputDetail.BoothName" class="text-danger"></span>

</div>

<div class="form-group">

<labelasp-for="BoothModelInputDetail.Description"></label>

<textarea id="Description" class="form-control" rows="5" placeholder="Enter ..." name="Description"></textarea>

<spanasp-validation-for="BoothModelInputDetail.Description" class="text-danger"></span>

</div>

<div class="form-group">

<labelasp-for="BoothModelInputDetail.BoothType"></label>

<div class="input-group">

<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>

<select class="form-control BoothType" name="BoothType" id="DropDwn" style="width: 230px">

<option></option>

<optionvalue="Booth">Booth</option>

<optionvalue="Booth 2">Booth 2</option>

<optionvalue="Booth 3">Booth 3</option>

</select>

</div>

<spanasp-validation-for="BoothModelInputDetail.BoothType" class="text-danger"></span>

</div>

<div class="form-group">

<labelasp-for="BoothModelInputDetail.Quantity" class="control-label"></label>

<div class="input-group">

<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>

<input type="text" class="form-control" id="Quantity" name="Quantity">

</div>

<spanasp-validation-for="BoothModelInputDetail.Quantity" class="text-danger"></span>

</div>

</div>

<div class="modal-footer" style="padding: 30px">

<button type="button" id="btnClose" class="btn btn-default" data-dismiss="modal" style="float:left">Close</button>

<button type="submit" id="btnSave" class="btn btn-default">Save</button>

</div>

</form>

//}

}

</div>

</div>

</div>

</div>

function AjaxPostUpdate(formData) {

if (confirm("Are you sure to want to update?") == true) {

$.ajax({

type: "POST", async: false,

url: "/Home/SaveUpdateData",

contentType: 'application/json; charset=utf-8',

dataType: "json",

data: FormData(formData),

success: function (result) {

if (result.success) {

alert(result.success);

location.reload();

}

else {

alert(result.responseText);

}

},

error: function (result) {

alert('Error: ' + result.statusText);

},

});

return true;

}

else

return false;

}

[HttpPost]

public async Task<IActionResult> SaveUpdateData(IFormFile files, BoothModel item)

{

using (Context db = new Context())

{

BoothModel amodel = db.BoothModel.Where(x => x.BoothID == item.BoothID).FirstOrDefault();

BigViewModel bigModel = new BigViewModel();

if (files != null)

{

var allowedExtensions = new[] { ".png", ".jpg", ".jpeg", ".gif" };

var checkextension = Path.GetExtension(files.FileName).ToLower();

if (!allowedExtensions.Contains(checkextension))

{

return Json(new { success = false, responseText = "file is not image type" });

//return

}

else

{

....

}

...

return RedirectToAction("Home");

//return Json(new{success=true});

}

}