We Keep Coding

ASP.NET MVC - JQuery call from url without action not working

I have a http://localhost:54393/CreateTest/4fwp36 which working fine but when I call http://localhost:54393/CreateTest/RemoveControlsNew from jQuery ajax then it is not working giving an error also not calling into a controller if any one can help me out as I am stuck here more then 1 day
I have tried this but it's not working:
MVC JQuery call from url without action
This is my route config:
routes.MapRoute(
name: "CreateTest",
url: "CreateTest/{id}",
defaults: new { controller = "CreateTest", action = "Index", id = UrlParameter.Optional }
);
Above code works perfectly when I call from another controller calling it like this:
return Redirect("/CreateTest/"+ strTestID);
When I try to call on same controller with ajax post method
RemoveControls: function (rid) {
var MyAppUrlSettings = {
MyUsefulUrl: "/CreateTest/RemoveControlsNew"
}
$.ajax({
type: 'POST',
dataType: "JSON",
async: false,
//url: '#Url.Action("RemoveControlsNew",Request.Url.Scheme)',
url: MyAppUrlSettings.MyUsefulUrl,
contentType: 'application/json; charset=utf-8',
data: {
rid: rid,
bgcolor: CREATETEST.globalbgcolor,
fontcolor: CREATETEST.globalfontcolor,
fontsize: CREATETEST.globalfontsize
},
success:
function (response) {
var data = response;
if (data == 'Error') {
CREATETEST.showerror('Some thing went wrong you cannot remove a question at the moment for selected option');
}
else {
$("#AddControlNew").load(location.href + " #AddControlNew");
}
},
error:
function (response) {
console.log(response);
CREATETEST.showerror("Error: " + response);
}
});
},
Then these is not working and my method is not called.
I am getting this error:
Error on page
Controller code for Ajax call
Regular Controller code

Your "Error on Page" image doesn't show anything useful, are you getting a 404, 202, 405 Header Status Code
Please post code, not images.
Apply the [FromBody] attribute to a parameter to populate its properties from the body of an HTTP request. The ASP.NET Core runtime delegates the responsibility of reading the body to an input formatter.
public JsonResult RemoveControlsNew([FromBody] int rid, string bgcolor, string fontcolor, string fontsize)

Ajax call 404 error but my url is correct (ASP.NET MVC)

Hi I am noob programmer who just got into asp.net mvc and all these js stuff. In my current mvc project I have this weird bug that I just have no idea why it is happening.
I have two almost exact same Ajax calls to a controller for the two different actions in that controller. The GetPages one is successful and the other one is giving me a 404.
//////////////////////////////////////////////The ajax calls/////////////////////////////////////////////////////
//get page list
GetPages = function (myCategory) {
var url = config.base + "/api/CMS/GetPagesSorted";
if (myCategory == null)
return;
$.ajax({
url: url,
type: "GET",
dataType: "JSON",
data: { categoryId: myCategory.Id },
success: function (data) {
// Clear pages and add new ones
self.pageList.removeAll();
self.pageList(data);
}
});
};
//get tab list
GetTabs = function (myPage) {
var url = config.base + "/api/CMS/GetTabsSorted";
if (myPage == null)
return;
$.ajax({
url: url,
type: "GET",
dataType: "JSON",
data: { pageId: myPage.Id },
success: function (data) {
// Clear tabs and add new ones
self.tabList.removeAll();
self.tabList(data);
}
});
};
//////////////////////////////////////////////Controller actions being called/////////////////////////////////////////////////////
public IHttpActionResult GetPagesSorted(int categoryId)
{
var pages = dbCMS.CMS_Page.Where(x => x.Category.Id == categoryId).Select(x => new
{
Name = x.Name,
OrderId = x.OrderId,
});
//sort the page order by OrderId
pages = pages.OrderBy(x => x.OrderId);
return Json(pages.ToList());
}
public IHttpActionResult GetTabsSorted(int pageId)
{
var tabs = dbCMS.CMS_Tab.Where(x => x.Page.Id == pageId).Select(x => new
{
Name = x.Name,
OrderId = x.OrderId,
});
//sort the page order by OrderId
tabs = tabs.OrderBy(x => x.OrderId);
return Json(tabs.ToList());
}
The url for GetPages function is :
http://localhost:54522/api/CMS/GetPagesSorted
The url for GetTabs function is:
http://localhost:54522/api/CMS/GetTabsSorted
These are really just copied and pasted functions with only controller action names changed. I really don't think the routing is wrong because one of those calls are getting into the controller and action that I want it to go.
I am really frustrated to find this bug please help! Thank you guys in advance!

At first glance the error tells us what's going wrong:
No action was found on the controller 'CMS' that matches the request
means that Web API routing module didn't found GetTabsSorted with given pageId parameter, or parameter name mismatch occurred.
To resolve possible GET method conflicts, define MapHttpRoute for each action GetPagesSorted and GetTabsSorted similar to this way:
// note parameter differences
config.Routes.MapHttpRoute(
name: "PagesApi",
routeTemplate: "api/{controller}/{action}/{categoryId}",
defaults: new { categoryId = RouteParameter.Optional } // change this definition if you want categoryId becomes required
);
config.Routes.MapHttpRoute(
name: "TabsApi",
routeTemplate: "api/{controller}/{action}/{pageId}",
defaults: new { pageId = RouteParameter.Optional } // change this definition if you want pageId becomes required
);
Remember that most-specific routes should be defined on top of either default route or less-specific routes.
Reference: WebAPI No action was found on the controller

Two post methods in one WebApi controller, results in application not working

I have the following Web Api Controller
public class ImageUploadController : ApiController
{
[HttpGet]
public string UploadImage(int id)
{
return "Value = " + id;
}
[HttpPost]
public void UploadImage([FromBody] Customer customer)
{
string name = customer.company_name;
string dooda = string.Empty;
}
[HttpPost]
public bool DeleteImage(int id)
{
try
{
string dooda = string.Empty;
return true;
}
catch (Exception ex)
{
return false;
}
}
}
The get and post method for UploadImage work but as soon as I add another post i.e DeleteImage neither of the posts work.
I get a 404 Bad Request for both methods.
In my view I have two buttons, one that calls the upload image and the other that calls delete image as shown here
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="jquery-1.11.2.js"></script>
<title></title>
</head>
<body>
<button id="btnPushMe">Push Me</button><br />
<button id="btnDeleteMe">Delete Me</button>
</body>
</html>
<script type="text/javascript">
$('#btnPushMe').click(function () {
var apiurl = "http://localhost:50793/api/ImageUpload/UploadImage"
var customer = { customer_name: "Scott", company_name: "HP" };
$.ajax({
type: "POST",
data: JSON.stringify(customer),
url: apiurl,
contentType: "application/json"
});
});
$('#btnDeleteMe').click(function () {
var apiurl = "http://localhost:50793/api/ImageUpload/DeleteImage"
$.ajax({
type: "POST",
data: { id: "2" },
url: apiurl,
contentType: "application/json"
});
});
</script>
This is my config
config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{action}/{id}",
defaults: new { id = RouteParameter.Optional }
);
Again I'm just playing around with Web Api and trying to learn it as I go so if someone can enlighten me in to why/what I'm doing wrong I'd much appreciate it.
Thanks

The route template you are using is a "restful" one that will map to controller actions purely by the HTTP verb. i.e. There is no {action} in the template.
When you add the second post method WebAPI cannot disambiguate the calls.(For example http://localhost:50793/api/ImageUpload/UploadImage and http://localhost:50793/api/ImageUpload/DeleteImage both match api/{controller}/{id} which also matches both action methods. The action isn't specified in your template url.
Using a template like api/{controller}/{action}/{id} would map the urls you are calling with. Note this is then stepping away from a restful approach; which isn't necessarily wrong.
You might also consider adding specific templates - e.g. api/ImageUpload/UploadImage and explicitly set the action in the defaults.
Or you could use attribute based routing which would let you add an attribute directly to the action method with the desired url. This is often better for non-restful style controllers.

You should use JSON.stringify(data), as you are setting the content type as application/json.
You could have passed the value as part of the uri like delete/12 or delete?ID=12.
IMHO, Also, you can use HttpDelete for delete verbs instead of put or post, unless delete is not accepted.
HTH

In your Code please just remove the contentType: "application/json" on ajax method. Then it will automatically lead u to the controller page.
Please get look on the below code
$('#btnDeleteMe').click(function () {
var apiurl = "http://localhost:50793/api/ImageUpload/DeleteImage"
$.ajax({
type: "POST",
data: { id: "2" },
url: apiurl,
});

Asp.net MVC Ajax call not calling controller method

I am making an ASP.net MVC application And I would like it so when a user clicks on a link it performs an ajax call sending data to the controller and then returning other data back to the view.
This is the method I would like to call in my controller:
public JsonResult GetImage(string url)
{
Image image = Image.FromFile(url, true);
byte[] byteImage = converter.ImageToBytes(image);
return Json(new { byteImage }, JsonRequestBehavior.AllowGet);
}
And here is the controllers location:
08983ClassLibrary\EpostASP\Controllers\CustomerController.cs
This is my Ajax Call:
$.ajax({
url: "~/Controllers/CustomerController/GetImage/",
type: 'POST',
contentType: 'application/json',
data: "url="+url,
success: function (image) {
document.getElementById("image").src = "data:image/png;base64," + image;
showImage();
}
});
When i place my breakpoints in the code I can see it hitting the ajax call then stepping over it never reaches the controller and doesnt give any errors.
Any ideas?

The main issue is here -
url: "~/Controllers/CustomerController/GetImage/",
You see, ~ is a server side literal, in other words, when you use this in a ASP.net server side path, it is replaced by the current server application folder location. This was the traditional ASP.Net way. This line has 2 errors -
This url will never work. Because its inside a string in JS and thus ASP.net does not know that it has to replace it with server path. Now comes the second error, even if ASP.net could detect and convert it, it will still not work. Because of the point I described at 2 -
Since you are using ASP.net MVC, it's not a good practice. The more conventional MVC way is to create routes and use those routes. Because in ASP.net you have the option to link to a page (.aspx, .ascx) directly. But MVC controller actions cannot be linked like that. So you have to create routes in your route config (check Global.asax) and then use that route as the url in here. BY default MVC apps will support the following format -
<host>/{controller}/action
example -
'localhost/Home/Index`
Notice that I didn't write HomeController, because by default controllers are supposed to ignore the trailing string Controller.
I hope this helped and just incase you are looking for a solution for your current situation try this (I haven't tested but it should be like this) -
$.ajax({
url: "Customer/GetImage",
type: 'POST',
contentType: 'application/json',
data: "url="+url,
success: function (image) {
document.getElementById("image").src = "data:image/png;base64," + image;
showImage();
}
});
but to be on the safe side, make sure you use -
[HttpPost]
public JsonResult GetImage(string url)
{
}
UPDATE:
the maproute (as requested in comment ) will work with any of these routes. But can also work with different routes config. Route config is very very flexible, it is just a matter to setup the routes the way it works for you. -
public static void RegisterRoutes(RouteCollection routes)
{
routes.MapRoute(
"...", // Route name
"{controller}/{action}/{id}", // URL with parameters
new { controller = "Home", action = "Index", id = "" } // Parameter defaults
);
routes.MapRoute(
"...", // Route name
"{controller}/{action}", // URL with parameters
new { controller = "Home", action = "Index", id = "" } // Parameter defaults
);
routes.MapRoute(
"...", // Route name
"{controller}/{action}/{id}", // URL with parameters
new { controller = "Customer", action = "GetImage", id = "" } // Parameter defaults
);
routes.MapRoute(
"...", // Route name
"Customer/GetImage/{id}", // URL with parameters
new { controller = "Customer", action = "GetImage", id = "" } // Parameter defaults
);
..... //all of these mentioned route will land on the same url
}
protected void Application_Start()
{
RegisterRoutes(RouteTable.Routes);
}

Your ajax script says it is looking for a POST action method.
$.ajax({type: 'POST',
Have you decorated the action method with POST?
[HttpPost]
public JsonResult GetImage(string url)
{
}
Also, adjust your ajax data parameter
$.ajax({
data: {
"url": url
},

If you are using chrome you can go the developer tools -> network tab and see all the server requests being made. Hit your button and you will see it pop up and show you the response codes, headers etc. In your case it will be red and will tell you what went wrong

If you are using web api... Your method is starting with "Get" GetImages so you need to decorate the method with [HttpPost]

I have found that using fiddler is the best way to see what is going on in MVC.
Start up fiddler, run the code again and see what actually came back. Most likely (as mentioned by Yorro) is that you got a 404 error and as you have no error handling in your json call, you wont ever see the error.

$.ajax({
url: '#Url.Action("GetImage", "Customer")',
type: 'POST',
contentType: "application/json; charset=utf-8",
data: "url="+url,
success: function (image) {
document.getElementById("image").src = "data:image/png;base64," + image;
showImage();
}
});

If using IE, and your controller is hitting the first time only add ...
$.ajax({
cache:false,
...

Some time it will work or some time not work so don't mention URL such as static "~/Controllers/CustomerController/GetImage/" please follow the dynamic way
So you will change the code snippet such as below
$.ajax({
url: "#Url.Action("GetImage", "CustomerController")",
type: 'POST',
contentType: 'application/json',
data: "url="+url,
success: function (image) {
document.getElementById("image").src = "data:image/png;base64," + image;
showImage();
}
});
hopefully this code will be resolved your problem !!

ajax jquery .net results in "The resource cannot be found."

I'm trying to do a simple ajax call in .net
Any advice?
[WebMethod]
public string HelloWorld()
{
return "Hello World";
}
I call the webmethod in my browser like this:
http://localhost.com/Ajax/WebService1.asmx/HelloWorld
Which results in
"The resource cannot be found."
Probably because of the url syntax.
My routes are setup like:
routes.IgnoreRoute("Ajax/");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
If I delete the MapRoute, the webcall works, but the rest of my website fails.
Any advice?
Update:
I changed to use a controller. When I call it with a url in my browser I hit my breakpoint in the controller. But not when I run this code:
<div id="Result">
Kig her!
</div>
#section javascript {
$(function () {
$("#FirstReminder").datepicker();
$("#EndDate").datepicker();
});
$(document).ready(function() {
// Add the page method call as an onclick handler for the div.
$("#Result").click(function() {
alert('kkk');
$.ajax({
type: "POST",
url: "AjaxWorkflow/GetSteps",
data: {workflowId: "1", workflowStep: "test"},
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
// Replace the div's content with the page method's return.
$("#Result").text(msg.d);
}
});
});
});
Update 2:
I solved it by changing the line to
data: "{workflowId: '1', workflowStep: 'test'}",

Because you are using routing, I assume this is an MVC website? If so you should use an ActionResult in your controller instead of a WebMethod. Try this:
public string HelloWorld()
{
return Content("Hello World");
}
You would then call this using jQuery on the following URL: http://localhost.com/[Controller]/HelloWorld
Note, in the example here I am returning a string - as per your original example. It is also possible to return an object via JSON, using return Json(obj);

WebMethods belong to ASP.NET WebForms while the routing belongs to ASP.NET MVC. You'd better not mix the two technologies.
In this case most of the application seems to be ASP.NET MVC if after removing the routing everything stops working. That means that you want to replace the WebMethod with a Controller Action.