ASP. net Конфигурация конечной точки ядра - PullRequest
Новая
       44

ASP. net Конфигурация конечной точки ядра

0 голосов
/ 08 января 2020

У меня есть вопрос о настройке конечных точек в ASP. Net core.
У меня есть действие в контроллере - 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 протестирован, я имею в виду, я использовал его для данных c. Это мое мнение: 

   <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 в html представление из wwwroot.

Я тестировал это на stati c файлах и работает:

vue


Спасибо за чтение и помощь!

Ответы [ 2 ]

0 голосов
/ 09 января 2020

Вы можете просто вернуть ListToCache без дополнительной сериализации. 

[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>();

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

        return Json(ListToCache);
    }

Это сгенерирует ответ json. Кроме того, имя свойства чувствительно к регистру для данных ответа выборки. Вам лучше проверить json, как правило, это будет 

var newObj = { Name: data[i].name, ID: data[i].id, Done: data[i].done }
0 голосов
/ 08 января 2020

Не могли бы вы попытаться заменить свой тег сценария этим? 

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

Проверьте вкладку Сеть в Инспекторе и убедитесь, что сервер отвечает на ваши запросы.

...