Sign in Register
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
    Raymond
    0

    SurfaceController not working with jquery ajax POST

    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
    Tom Van Rompaey
    1

    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 1350 posts 4460 karma points c-trib
    Aug 09, 2015 @ 11:44
    Steve Morgan
    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 118 posts 702 karma points c-trib
    Aug 10, 2015 @ 07:36
    René Pjengaard
    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

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies