将 ViewModel 从控制器传回 Javascript 函数 MVC

Question

所以我有一个包含一些基本信息的 ViewModel，我正在接受来自视图的输入。然后将输入发送到 .js 函数，该函数将其发送到控制器函数，后者对其进行一些处理。现在我只是试图让 Javascript 函数连接并在页面上显示一些不相关的代码，以确保它已连接。我顺利完成了所有操作，最后我返回了我自己编写的浏览器工具内部的 errorOnAjax 函数。所以我能看到的任何代码都没有问题。

我的想法是，我在控制器中将 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 只是将一个基本的 table 注入到视图中，其中只有 1 个值，只是为了确保它已连接。

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

首先 return 与 json 在控制器中。

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

在前端使用 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){
      }
    });

});

Answer 2

您编写的所有代码都是正确的，但您只是错过了视图中的一个属性。您需要提及按钮类型，然后它会按照您的期望工作

<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 3

您需要创建 JsonResult 函数，然后 return Json(info, JsonRequestBehavior.AllowGet) 正如 @sadullah zolfqar 回答您的那样。

请参考以下link以获得完整的解释：

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

将 ViewModel 从控制器传回 Javascript 函数 MVC

Passing ViewModel back from controller to Javascript Function MVC

javascript

c#

ajax

asp.net-mvc

viewmodel