asp.net mvc core 에서 vue.js 사용하기

asp.net mvc core 에서 vue.js 사용하기

 

 

솔루션에서 추가 > 클라이언트 라이브러리추가.. 를 선택하여 

vue, axios 를 각각 설치 하면 lib 폴더에 설치가 됩니다.

 

 

설치 이후  libman.js 파일이 루트에 생성되며, 설치 된 vue, axios 을 버전과 함께 보실 수 있습니다.

 

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "library": "vue@2.5.21",
      "destination": "wwwroot/lib/vue/"
    },
    {
      "library": "axios@0.18.0",
      "destination": "wwwroot/lib/axios/"
    }
  ]
}

 

VueSubscriberListComponent 의 js 파일을 js 폴더 하단에 만듭니다.

 

var subscriberListComponent = new Vue({
    el: '#subscriber-list-component',
    data() {
        return {
            subscribers: [],
            isViewReady: false
        };
    },


    methods: {
        refreshData: function () {
            var self = this;
            this.isViewReady = false;
            //UPDATED TO GET DATA FROM WEB API
            axios.get('/api/subscribers/getall/')
                .then(function (response) {
                    self.subscribers = response.data;
                    self.isViewReady = true;
                })
                .catch(function (error) {
                    alert("ERROR: " + (error.message | error));
                });
        }
    },
    created: function () {
        this.refreshData();
    }
});

 

 

axios 를 통해 호출하는/api/subscribers/getall  서비스를 만들어보죠. 우선 컨트롤러를 하나 생성하여 구축합니다.

SubscribersController.cs 컨트롤러를 만들어 서비스를 제공해 보죠.

 

 

 

객체에 데이터 2개 정도 더미값을 넣어서 ok() 함수를 통해 서비스를 제공합니다.

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
namespace WayKuratWeb.SimpleVueJs.Controllers
{
    [Route("/api/[controller]/[action]/")]
    public class SubscribersController : Controller
    {


        [HttpGet]
        public IActionResult GetAll()
        {
            //hard coded data for brevity, this must be from a data store on the real world
            var subs = new List<Subscriber>();
            subs.Add(new Subscriber() { Id = 1, Name = "JEK", Email = "jekhaxor@test.test" });
            subs.Add(new Subscriber() { Id = 1, Name = "Jikie", Email = "jekiedraws@test.test" });
            return Ok(subs);
        }
    }
    public class Subscriber
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Email { get; set; }
    }
}

 

 

 

index.cshtml 뷰에 아래와 같이 vue 와 axios 를 통해 서비스한 코드를 넣습니다.

 

 

@{
    ViewData["Title"] = "Home Page";
}
<div class="text-center">
    <div id="subscriber-list-component">
        <h3>WayKurat Subscribers </h3>
        <div v-if="isViewReady == true">
            <ol>
                <li v-for="u in subscribers">
                    {{ u.name }} - {{u.email}}
                </li>
            </ol>
            <button class="btn btn-primary btn-block" v-on:click="refreshData">REFRESH</button>
        </div>
        <div v-else>
            <div>Loading data...</div>
        </div>
    </div>
</div>
@section Scripts{
    <script src="~/lib/vue/vue.js"></script>
    <script src="~/lib/axios/axios.js"></script>
    <script src="~/js/VueSubscriberListComponent.js"></script>
}

 

 

하단 script 세션 부분에 vue , axios 가 존재하며, VueSubscriberListComponent.js 의 컨트롤러에서 view 인 index.cshtm 에 부분바인딩 합니다.