Как связать asp.net mvc core 1.1 c vue.js?

Question

[hugh_bliss]

Здравствуйте. Возникла проблема с передачей json-объекта во фронт-энд.

Вот контроллер, в котором я ищу объект в базе данных и возвращаю его в качестве json-объекта:

public IActionResult Index(Currencies cur1, Currencies cur2) {
         int SearchedId = -1;
         foreach (Pair pair in _context.Pairs)
         {
             if (pair.Currency1 == cur1 && pair.Currency2 == cur2)
             {
                 SearchedId = pair.Id;
             }
         }
         var SearchedPair = _context.Pairs.Single(m => m.Id == SearchedId);
        return View(Json(new{SearchedPair, _context.Rates}));
     }

далее я принимаю его с помощью плагина vue-resource для vue:

Vue.use(VueResource)
var app = new Vue({
el: "#app",
data: {
    Pair: {
        Currency1: "rur",
        Currency2: "kzt",
    },
    DataFromDb: null
},
computed: {
    endpoint: function () { 
        return 'localhost:55332/Rates?cur1=' + this.Pair.Currency1 + '&cur2=' + this.Pair.Currency2;
    }
},
methods: {
    getPair: function () {
        this.$http.get(this.endpoint).then(function (response) {
            console.log(response);
            this.DataFromDb = response
        }, function (error) {
            console.log(error)
        })
    }
},
created: function () {
    this.getPair()
}
})

в Index.cshtml я хочу отобразить принятый объект:
<div id="app">{{ $data | json }}</div>
после запуска сервера, в консоли dev-tools я получаю ошибку:

XMLHttpRequest cannot load localhost:55332/Rates?cur1=rur&cur2=kzt. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Не могу разобраться что делаю не так и с чем может быть связана эта ошибка. Пробовал запустить хром с ключом --disable-web-security - не помогло. помогите пожалуйста с решением этой проблемы.

Answer 1

[hugh_bliss]

вот как должно быть:

[HttpPost]
        public JsonResult Index(Currencies cur1, Currencies cur2) {
             int SeachedId = -1;
             foreach (Pair pair in _context.Pairs)
             {
                 if (pair.Currency1 == cur1 && pair.Currency2 == cur2)
                 {
                     SeachedId = pair.Id;
                 }
             }
             var SeachedPair = _context.Pairs.Single(m => m.Id == SeachedId);
            return Json(new{SeachedPair, _context.Rates});
         }
        [HttpGet]
        public IActionResult Index()
        {
            return View();
        }

getPare: function () {
            if (this.Pare.Currency1 && this.Pare.Currency2) {
                this.$http.post('http://localhost:5000/Rates?cur1=' + this.Pare.Currency1 + '&cur2=' + this.Pare.Currency2).then(response => {
                    console.log(response);
                    this.DataFromDb = response.body;
                }, response => {
                    console.log("error")
                })
            }
        },

Answer 2

[Петр]

1. Ошибка у вас отображается о том, что вы делаете запрос к другому домену
2. View(Json(new{SearchedPair, _context.Rates})) вернет не Json обьект, а отправиться генерировать страницу по шаблону в View c переданной моделью типа IActionResult

Comments

[hugh_bliss]

метод Index находится в RatesController, так что я уверен что и урл и домен я указал правильно.

[Петр]

hugh_bliss: Я вам о типе ответа от сервера, а не о URL