Передача ViewModel из контроллера в Javascript Функция MVC

Question

Итак, у меня есть ViewModel, которая содержит некоторую основную c информацию, и я принимаю входные данные из представления. Затем входные данные отправляются в функцию. js, которая отправляет их в функцию контроллера, которая выполняет с ним некоторую работу. Прямо сейчас я просто пытаюсь заставить функцию Javascript подключаться и отображать какой-то нерелевантный код на странице, чтобы убедиться, что он подключен. Я делаю это через все без ошибок, и в самом конце мне возвращается ошибка об Ajax Функция, внутри инструментов браузера, которую я написал сам. Так что нет проблем с любым кодом, который я вижу.

Я думаю, что я преобразовываю ViewModel в Json неправильно в контроллере, в свою очередь, он возвращает неправильный путь к функции Javascript и выдает ошибку. Если у кого-то есть какие-либо предложения, это будет с благодарностью!

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

        public string URL { get; set; }


    }

И я получаю информацию из представления через поле ввода

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

Это то, что моя функция Javascript похоже. showInfo просто вводит таблицу basi c в представление с одним внутренним значением, просто чтобы убедиться, что она подключена.

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

и моя функция контроллера

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

Вы написали все правильно, но вы просто пропустили один атрибут в поле зрения. вам нужно упомянуть тип кнопки, тогда она будет работать в соответствии с вашими ожиданиями

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

Теперь я делюсь полной информацией об этой проблеме.

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");
        }
    }

Вид -

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

}

Контроллер-

 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 2

Вам нужно создать JsonResult функцию, затем return Json(info, JsonRequestBehavior.AllowGet), как @ sadullah zolfqar ответил вам.

Пожалуйста, обратитесь к ссылке ниже, чтобы получить полное объяснение:

https://www.c-sharpcorner.com/UploadFile/2ed7ae/jsonresult-type-in-mvc/

Answer 3

Первый возврат с json в контроллере.

    public ActionResult DisplayInfo(string myInfo)
    {
        MapInfoViewModel info = new MapInfoViewModel()
        {
            Place = myInfo
        };
        return Json(info,JsonRequestBehavior.AllowGet);
    }

В Front End используйте ajax, как это.

$( "#myButton" ).click(function() {

    let data={myInfo:$('#name').val();};
    $.ajax({
      type: "GET", 
      dataType: "json", 
      url: "/CreateRoute/DisplayInfo",
      data: data, 
      success: function (response){
          //do
      }, 
      error: function (error){
      }
    });

});