Sign in Register
Go to solution
Copied to clipboard

Flag this post as spam?

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


  • Olle Jacobsen 5 posts 38 karma points
    Oct 05, 2016 @ 06:41
    Olle Jacobsen
    2

    Ajax POST to Surface Controller in Umbraco 7.5.3

    Using Umbraco And Getting Started
    Umbraco 7

    Hi I've just created a a new Umbraco 7.5.3 site. Last time I worked in Umbraco was on version 4.x-something.

    I'm wondering how you use the Ajax.BeginForm to do a "async" post back to my controller. When I wire it up it does a full postback.

    I see that I can set OnComplete methods on the AjaxOptions and I tried those as well but I simplified the example below.

    It seems that I should include some external javascript to make it work?

    Note: I have build my own javascript submit hijacker. But I'm still curious how to get the out-of.box experience

    Test.cshtml 

    @using (Ajax.BeginForm("SendMail", "Contact", new AjaxOptions { HttpMethod = "POST" })) {
<fieldset>
    <legend>Send me to the SurfaceController </legend>
    <input type = "submit" value="Send Message">
</fieldset> }

    Controller

    public class ContactController : SurfaceController
{
    [HttpPost]
    public JsonNetResult SendMail()
    {
        var result = new JsonNetResult
        {
            Data =  "Hello from controller"
        };

        return result;
    }
}

    Thanks in advance, Olle

    Copy Link
  • Dennis Adolfi 1082 posts 6446 karma points MVP 5x c-trib
    Oct 05, 2016 @ 07:26
    Dennis Adolfi
    102

    Hi Olle.

    Few thing you should check that could be causing the problem.

    First: Do you have all the required scripts referenced? You need the following (besides jquery):

    <!-- Javascripts -->
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.1/jquery.validate.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/mvc/5.2.3/jquery.validate.unobtrusive.js" type="text/javascript"></script>
 <script src="https://cdn.jsdelivr.net/jquery.ajax.unobtrusive/3.2.4/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>

    Second: In your web.config, you need to allow UnobtrusiveJavascript. Add the following in your appKeys:

    <add key="UnobtrusiveJavaScriptEnabled" value="true" />

    Here are my code example based on your code, and it works fine when i have the appKey in my web.config and the exact same Controller as you:

        <div id="result"></div>

    @using (Ajax.BeginForm("SendMail", "Contact", new AjaxOptions
    {
        HttpMethod = "POST",
        InsertionMode = InsertionMode.Replace,
        UpdateTargetId = "result"
    }))
    {
        <fieldset>
            <legend>Send me to the SurfaceController </legend>
            <input type="submit" value="Send Message">
        </fieldset> }



    <!-- Javascripts -->
    <script src="/js/jquery.min.js"></script>

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.1/jquery.validate.js" type="text/javascript"></script>

<script src="http://ajax.aspnetcdn.com/ajax/mvc/5.2.3/jquery.validate.unobtrusive.js" type="text/javascript"></script>

<script src="https://cdn.jsdelivr.net/jquery.ajax.unobtrusive/3.2.4/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>

    Output:

    enter image description here

    Hope this was helpful!

    Take care!

    Copy Link
  • Olle Jacobsen 5 posts 38 karma points
    Oct 05, 2016 @ 08:23
    Olle Jacobsen
    1

    I was missing the jquery.unobtrusive-ajax.min.js lib.

    It's now working as expected.

    Thanks for taking your time with such complete answer.

    Kind regards, Olle

    Copy Link
  • Dennis Adolfi 1082 posts 6446 karma points MVP 5x c-trib
    Oct 05, 2016 @ 08:25
    Dennis Adolfi
    0

    Thank you, Im glad it worked out Olle!

    Have a great day!

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft