current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite
1

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?

share|improve this question
    
Do you really have "~/Controllers/... in the JavaScript? Does you route map include ~/{controller}/{action}... route or you assume somehow page relative Url in JavaScript/HTML will be converted into site relative Url? Consider using some HTTP debugging tools (like Fiddler) to see how exactly request looks like and see if you expect server to handle it. –  Alexei Levenkov May 1 at 3:52

5 Answers 5

up vote 5 down vote accepted

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 -

  1. 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 -

  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)
{
}
share|improve this answer
up vote 0 down vote

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.

share|improve this answer
up vote 0 down vote

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

share|improve this answer
    
+0: you need to say "if you are using WebAPI...", which is not mentioned anywhere in the question. –  Alexei Levenkov May 1 at 3:55
    
Yep, that is correct. My bad on assuming that i will edit. –  zero7 May 1 at 3:57
up vote 0 down vote

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

share|improve this answer
up vote 2 down vote

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 
        },
share|improve this answer
1  
The decoration is optional. –  Erik Philips May 1 at 4:31

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.