Passing ViewModel back from controller to Javascript Function MVC

Question

So I have a ViewModel that holds some basic information, and I am taking in an input from the view. Then the input is sent to a .js function that sends it to a controller function that does some work with it. Right now I am just trying to get the Javascript function to connect and display some irrelevant code on the page just to make sure its connected. I make it through everything with no errors, and at the very end I am returned the errorOnAjax Function, inside of the browser tools, that I have written myself. So there is no problem with any of the code that I can see.

My thought is, I am converting the ViewModel to Json wrong in the controller, in turn, it is returning it the wrong way to the Javascript function and giving the error. If anyone has any suggestions, it would be greatly appreciated!

 public class MapInfoViewModel
    {
        public string Place { get; set; }
        public string City { get; set; }
        public string State { get; set; }

        public string URL { get; set; }


    }

And I am getting information from the view via an input box

@using (Html.BeginForm())
{
    <input type="text" id="name" />
    <button id="myButton" onclick="getInfo()">AJAX</button>
}

This is what my Javascript Function looks like. showInfo is just injecting a basic table into the view with just 1 value inside, just to make sure it is connected.

function getInfo(Info) {
    var myInfo = document.getElementById('name').value; 
    $.ajax({
        type: "GET", 
        dataType: "json", 
        url: "/CreateRoute/DisplayInfo",
        data: { 'myInfo': myInfo }, 
        success: showInfo, 
        error: errorOnAjax
    })
}

and my Controller Function

public ActionResult DisplayInfo()
        {
            string request = Request.QueryString["myInfo"];

            MapInfoViewModel info = new MapInfoViewModel()
            {
                Place = request
            };
            return new ContentResult
            {

                Content = JsonConvert.SerializeObject(info),
                ContentType = "application/json",
                ContentEncoding = System.Text.Encoding.UTF8
            };
        }

Answer 1

You wrote everything correct code but you just miss the one attribute in view. you need to mention button type then it will work as per your expectations

<button id="myButton" onclick="getInfo()">AJAX</button>

Now I sharing the complete details of this issue.

Javascript-

function getInfo(Info) {
        var myInfo = document.getElementById('name').value;
        $.ajax({
            type: "GET",
            dataType: "json",
            url: "/Test/DisplayInfo",
            data: { 'myInfo': myInfo },
            success: showInfo,
            error: errorOnAjax
        })
        function showInfo(result) {
            console.log(result);
        }
        function errorOnAjax() {
            console.log("errorOnAjax");
        }
    }

View -

@using (@Html.BeginForm())
{
    <input type="text" id="name" />
    <button type="button" id="myButton" onclick="getInfo()">AJAX</button>

}

Controller-

 public ActionResult DisplayInfo()
        {
            string request = Request.QueryString["myInfo"];

            MapInfoViewModel info = new MapInfoViewModel()
            {
                Place = request
            };
            return new ContentResult
            {

                Content = JsonConvert.SerializeObject(info),
                ContentType = "application/json",
                ContentEncoding = System.Text.Encoding.UTF8
            };
        }