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.

  • 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);
                }
            });
        }
    
  • Steve Morgan 1208 posts 3922 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.

  • René Pjengaard 114 posts 675 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é

Please Sign in or register to post replies

Write your reply to:

Draft