Search code examples
javascriptjquerymodel-view-controllerumbraco

How do I make AJAX grab the data from the controller in MVC?


So, I have this AJAX call and what I want to do is for the controller to return the string as a JSON object back to the view where my ajax call is. Now here's the thing. I don't know how to do it and which class would help me do it. Everything I've tried doesn't work at all. My question is when I use the $.post method how do I make AJAX "grab" the data back from the controller?

Since people comment on my Javascript, I don't mind that, I'll fix it later. The question is

How do I return anything I want from the controller in MVC? The controller is where I need help

Here's my call:

<script>
    $(document).ready(function () {
        alert("document ready");

            // Attach a submit handler to the form
        $("#searchForm").submit(function (event) {
            alert("submitsearchForm");
                //event.preventDefault();

                // Get some values from elements on the page:
                var $form = $(this),
                query2 = $form.find("input[id='query']").val(),
                url = "/umbraco/Surface/SearchDictionarySurface/HandleDictionarySearching/";

                alert("query2" + query2);

                // Send the data using post
                var posting = $.post(url, { query: query2 });

                alert(url);

                //Put the results in a div
                posting.done(function (query2) {
                    var content = //bla bla bla;
                    $("#result").empty().append(content);
                    alert(query2);
                });

            });
        });    
</script>

Also, I'm using Umbraco. That's why the surface controller:

using MyUmbraco.Models;
using System.Web.Mvc;
using Umbraco.Web.Mvc;

namespace MyUmbraco.Controllers
{
    public class SearchDictionarySurfaceController : SurfaceController
    {
        // GET: SearchDictionarySurface
        [HttpPost]
        [ValidateAntiForgeryToken]
        public JsonResult HandleDictionarySearching(string query)
        {
            if (!string.IsNullOrEmpty(query))
            {

                var query2 = Json.parse(query);

                //return Json object????
                //I NEED HELP HERE
            }

            else
            {
                return Json(new
                {
                    redirectUrl = Url.Action("Index", "Home"),
                    isRedirect = true
                });
            }
        }
    }
}

Solution

  • So, to any newbies out there that might need the help I needed (and because I've been looking for this thing for AGES and nobody responds, here's how you do it:

    Your JQuery callback function, and your controller must have the same variable. E.g:

    Controller:

    public JsonResult ExampleName(string query)
            {
                if (!string.IsNullOrEmpty(query))
                {
    
                    //YOUR CODE HERE
                   return Json(yourDataHere);
                }
    
                else
                {
                    return Json(new
                    {
                        redirectUrl = Url.Action("Index", "Home"),
                        isRedirect = true
                    });
                }
            }
    

    And JQuery callback function:

    posting.done(function (data) {
                      //your callback function here
                       });
    

    That's the trick for JQuery to know what to "grab" from the controller when it returns it. Make sure you return Json(yourDataHere). In case you're wondering, yes, just write 'data' in the function and it will grab yourDataHere from the controller, by itself.

    Also, make sure you either have the AntiForgeryToken in both your form and your controller or in none of them. If you have it in your controller only, it will not let you control everything through JQuery.