ajax using jquey - Using Umbraco and getting started

Vanilson 28 posts 150 karma points

Jun 27, 2016 @ 23:47

Ajax using Jquery

Hi guys, I´m trying to use ajax using jquery, but I´m not getting the result that I want, here´s the code:

JS

<script>
    $(document).ready(function () {
        $("div").click(function () {
            $.ajax({
                type: "GET",
                url: "@Url.Action("GetClient", "ClientController")",
                success: function(result){
                    console.log("Client: " + result);
                },
                error: function(){
                    console.log("Error");
                }
            });
        });
    });
</script>

Controller

public class ClientController : Controller
{

    public ActionResult GetClient()
    {
        return Content("Clients", "text/plain");
    }

}

I don´t why, but the example that I´m trying to do it´s returning me the HTML of the current page. Does anybody knows how to solve this problem?

Best Regards

Copy Link

Phill 115 posts 289 karma points

Jun 28, 2016 @ 03:15

Here's a snippet of code that I use that works for me (in this case I'm posting an Id to get a single item, but similar idea):

    $('#btn-getclient').on("click", function (e) {
    e.preventDefault();
    $.ajax({
        url: '/umbraco/Surface/ClientSurface/GetClient',
        type: "POST",
        dataType: "json",
        async: true,
        data: { 'Id': 123}
    }).success(function (data) {
        //console.log('del: ', data)
        if (data) {
            console.log("success: ", data);
        } else {
            console.log('error: no data returned');
        }
    }).error(function (xhr) {
        console.log('Error: ', xhr.status + ' (' + xhr.statusText + ')');
    });
});

Then the controller:

public class ClientSurfaceController : SurfaceConroller {
[HttpPost]
        public JsonResult GetClient(int Id)
        {
            try {
                var repo = new ClientRepository();
                var model = repo.GetById(Id);
                // I use Automapper here to map data model to view model
                // to keep it short here just returning data model
                return Json(model);
            }
            catch (Exception ex)
            {
                return Json("Error: " + ex.Message);
            }
        }
 }

Note that the naming of the ClientSurfaceController and the fact that you call it using ClientSurface are requirements. If you want to use just the GET then be sure to change HttpPost to HttpGet. This way you can verify your controller is returning data by browsing directly to sitename/umbraco/Surface/ClientSurface/GetClient and that should return result, if it doesn't then you can debug your controller. If it does then check js code and how you're handling the result or calling the controller.

Hope that get's you in right direction.

Cheers, Phill

Copy Link

Vanilson 28 posts 150 karma points

Jun 28, 2016 @ 09:34

Hi Phill, still not working, but now it´s returning me a 404 message. I made the following changes:

JS

<script>
$(document).ready(function () {
    $("div").click(function () {
        $.ajax({
            type: "GET",
            url: "/Controller/Client/GetClient",
            success: function(result){
                console.log("Client: " + result);
            },
            error: function(){
                console.log("Error");
            }
        });
    });
});

Controller

    [HttpGet]
    public ActionResult AmbitoClientela()
    {
        return Content("Clients", "text/plain");
    }

Copy Link

Phill 115 posts 289 karma points

Jun 29, 2016 @ 03:52

Sorry for delay in getting back to you on this. It looks like your Ajax url doesn't match your controller.

I would take the Ajax piece out of the puzzle to start and just try to see if you can hit your controller action. You don't provide code sample of what your class name is and if it inherits surface controller or not.

As per my sample code, if you have the following:


public class ClientSurfaceController : SurfaceConroller {
[HttpGet]
        public JsonResult GetClient()
        {
            return Json("Sample message");
        }
 }

Then you should be able to get a page that displays "Sample message" if you browse to the following url: yourdevsitehostname/umbraco/surface/ClientSurface/GetClient

Then once you get a result by browsing to the url, instead of a 404 then you can try to call that url from Ajax. If you're still getting a 404 then your not calling the url for your controller and action correctly.

Hope that helps. Phill

Copy Link

Vanilson 28 posts 150 karma points

Jul 02, 2016 @ 18:56

I Phill, problem solved. I made my Controller a SurfaceController and change the URL in my ajax to Umbraco/Surface/Controller/Client/GetClient.

I got one more question, how does Umbraco knows that all surface controller are in the Umbraco/Surface/Controller directory? Because I was checking my files and I couldn´t find the Umbraco/Surface/Controller directory.

Best Regards

Copy Link

Cimplex 113 posts 576 karma points

Jul 02, 2016 @ 19:51

Hi Vanilson, All locally declared surface controllers get routed to:

/umbraco/surface/{controllername}/{action}/{id}

They do not get routed via an MVC Area so any Views must exist in the following folders:

~/Views/{controllername}/ ~/Views/Shared/ ~/Views/

Here's the documentation: https://our.umbraco.org/documentation/Reference/Routing/surface-controllers

// Herman

Copy Link

is working on a reply...

Flag this post as spam?

Ajax using Jquery