时间戳

首页 > 解决方案 > 将 ViewModel 从控制器传回 Javascript Function MVC

javascript - 将 ViewModel 从控制器传回 Javascript Function MVC

问题描述

所以我有一个 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
            };
        }

标签： javascriptc#ajaxasp.net-mvcviewmodel

解决方案

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

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

推荐阅读