将 ViewModel 从控制器传回 Javascript Function MVC答案

【问题标题】：Passing ViewModel back from controller to Javascript Function MVC将 ViewModel 从控制器传回 Javascript Function MVC
【发布时间】：2020-02-13 05:05:05
【问题描述】：

所以我有一个包含一些基本信息的 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 只是将一个基本表注入到视图中，其中只有 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
            };
        }

【问题讨论】：

标签： javascript c# ajax asp.net-mvc viewmodel

【解决方案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
            };
        }

【讨论】：

【解决方案2】：

首先在控制器中返回 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){
      }
    });

});

【讨论】：

【解决方案3】：

您需要创建JsonResult 函数，然后return Json(info, JsonRequestBehavior.AllowGet) 作为@sadullah zolfqar 回答您。

完整说明请参考以下链接：

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

【讨论】：