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


  • 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

    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 6450 karma points MVP 6x c-trib
    Oct 05, 2016 @ 07:26
    Dennis Adolfi
    103

    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 6450 karma points MVP 6x c-trib
    Oct 05, 2016 @ 08:25
    Dennis Adolfi
    0

    Thank you, Im glad it worked out Olle!

    Have a great day!

    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