surfacecontroller not working with jquery ajax post

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Raymond 2 posts 72 karma points

Aug 08, 2015 @ 00:09

Using Umbraco 7

Umbraco 7

Hi.

I am using Umbraco 7.2 and I am trying to update a div element using jquery ajax.

Let me show you what I have so far.

Through Umbraco CMS I have created a Template and some partial views.

MyTemplate.cshtml...

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    Layout = null;
}
<head>
    <meta charset="utf-8" />
    <title>What</title>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>


</head>
<body>
    @Html.Partial("~/Views/Partials/_FirstPartial.cshtml")
</body>

Views/Partials/_FirstPartial.cshtml...

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage

<h1>Hello Calendar</h1>
<a id="hypUpdateContainerTwoSGM" href="javascript:void(0);">Update Container Two</a>
<div id="divUpdateContainerTwo">This should change.</div>
    <script type="text/javascript">
    $("#hypUpdateContainerTwoSGM").click(function () {
        PostSurfaceDataSGM();
    });

    function PostSurfaceDataSGM() {
        $.ajax({
            url: '/umbraco/Surface/TestSurface/GetMyBigCalendarMessage',
            async: false,
            type: "POST",
            data: JSON.stringify({ "locationId": 1 }),
            dataType: "html",
            contentType: "application/json",
            error: function (data) {
                alert(data);
            },
            success: function (data, textStatus, jqXHR) {
                $("#divUpdateContainerTwo").html(data);
            }
        });
    }
</script>

Controllers/TestSurfaceController.cs...

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.Mvc;
using Umbraco.Web.Mvc;


public class TestSurfaceController : SurfaceController
{
    [HttpPost]
    public ActionResult GetMyBigCalendarMessage(int id)
    {


        return PartialView("~/Views/Partials/_ThirdPartial.cshtml", tvm);
    }
}

Sorry for the bad formatting. Thanks for your time.

Copy Link

Tom Van Rompaey 38 posts 136 karma points

Aug 08, 2015 @ 09:22

The JSON parameter in your Ajax call needs to have the same name as in your controller.

function PostSurfaceDataSGM() {
        $.ajax({
            url: '/umbraco/Surface/TestSurface/GetMyBigCalendarMessage',
            async: false,
            type: "POST",
            data: JSON.stringify({ "id": 1 }),
            dataType: "html",
            contentType: "application/json",
            error: function (data) {
                alert(data);
            },
            success: function (data, textStatus, jqXHR) {
                $("#divUpdateContainerTwo").html(data);
            }
        });
    }

Copy Link

Steve Morgan 1346 posts 4453 karma points c-trib

Aug 09, 2015 @ 11:44

0

I've had issues trying to use a single Int as a variable in a POST - MVC seems to expect and only match methods on an object - use a model / simple object instead or change it to a GET and add the data to the URL you're posting.

Stick a break point on your surface controller method to ensure it's routing it correctly.

Copy Link
René Pjengaard 117 posts 700 karma points c-trib

Aug 10, 2015 @ 07:36

0

Hi Raymond,

as Steve mention, you can´t use attributes like that on a post-method. Try take a look at this Gist to get the hang of how it is done: https://gist.github.com/rpjengaard/a80d369f1eff3a266faa

Best regards

René

Copy Link
is working on a reply...

Please Sign in or register to post replies