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

  • Dennis Adolfi 1082 posts 6449 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!

  • 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

  • Dennis Adolfi 1082 posts 6449 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!

Please Sign in or register to post replies

Write your reply to:

Draft