javascript - ASP .net 核心端点配置

问题描述

我有一个关于在 ASP .Net 核心中配置端点的问题。
我在控制器中有操作 - HttpGet JsonResult GetList()。它返回 json 字符串，将其显示在视图中，并且 json 字符串在网络响应中，所以我可以通过 JS 访问它。
那是我的GetList()：

[HttpGet]
        public JsonResult GetList(int GetListId)
        {
            SavedList = GetListId;
            List<string> Products = new List<string>();
            List<string> currentList = new List<string>();
            using (var db = new ApplicationDbContext())
            {
                currentList = db.ProductLists.Where(w => w.ListId == GetListId).Select(p => p.Product.Name).ToList();
                foreach (var item in currentList)
                {
                    Products.Add(item);
                }
            }
            List<OfflineProduct> ListToCache = new List<OfflineProduct>();
            JsonSerializer serializer = new JsonSerializer();
            for (int i = 0; i < currentList.Count; i++)
            {
                var Prod = new OfflineProduct();
                Prod.ID = i;
                Prod.Name = currentList[i];
                Prod.Done = false;
                ListToCache.Add(Prod);
            }
            string json = JsonConvert.SerializeObject(ListToCache);

            return Json(json);
        }

我从数据库中获取一些元素，并基于它创建列表。将数据序列化为 json，然后返回。问题是，我在页面上获取 JSON 字符串，数据格式不正确。
我有 Vue View，它已准备好获取此 JSON 数据，但我不知道如何将数据直接发送到 Vue View（例如 ./wwwroot/SavedOfflineList.html）。

我的 Vue vue 已经过测试，我的意思是我将它用于静态数据。这就是我的看法：

   <h4>Last Saved List</h4>


    <div id="app">
        <h2>Lista vue:</h2>
        <ol>
            <li v-for="item in items">
                <label>
                    <input type="checkbox"
                           v-on:change="toggle(item)"
                           v-bind:checked="item.Done">

                    <del v-if="item.Done">
                        {{ item.Name}}
                    </del>
                    <span v-else>
                        {{ item.Name }}
                    </span>
                </label>
            </li>
        </ol>
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var objArray = [];
    async function fetchItems() {
        fetch('/GetList/').then(Response => {
            return Response.json();
        }).then(data => {




            for (var i = 0; i < data.length; i++) {
            var newObj = { Name: data[i].Name, ID: data[i].ID, Done: data[i].Done };

            objArray.push(newObj);

                    }
            if (objArray.length != 0) {
                        console.log('have some items');
            }


            console.log(objArray);

        return objArray;   
        }).catch(err => {
            console.log(err);
        })

    }
    new Vue({
        el: "#app",
        data: {
            items: [

            ]
        },
        created() {
            this.getItems();
        },
        methods: {
            toggle: function (item) {
                item.Done = !item.Done
            },
            getItems: async function () {
                this.items = await fetchItems();
                this.items = objArray;
            }
        }
    });




</script>
<style>

当我移动到这个 GetList 页面时，我的 URL 如下：/Offline/GetList?GetListId=36，并且我可以从响应或页面内容中读取我提到的 json 数据。

我已经阅读了一些关于端点的文章，但我仍然不知道如何将 HttpGet 从 wwwroot 发送到 html 视图。

我已经在静态文件上对其进行了测试，并且可以正常工作：

感谢阅读和帮助！

标签： javascriptjsonvue.jsasp.net-core

<script> new Vue({ el: "#app", data: { items: [] }, created() { this.getItems(); }, methods: { toggle: function (item) { item.Done = !item.Done }, getItems() { fetch('/GetList/').then(response => response.json()) .then(data => this.items = data) .catch(err => console.log(err)); } } }); </script>

javascript - ASP .net 核心端点配置

问题描述

解决方案

推荐阅读