Не могу выполнить почтовый запрос через Axios

Question

Я пытаюсь заполнить таблицу с помощью vue.js и axios в visual studio.Когда я отлаживаю свое решение, я получаю пустую таблицу с заголовком.

Я пробовал другой подход к POST-запросу, но он не сработал:

https://github.com/axios/axios?fbclid=IwAR0qTUEwV4k1PK40ocQF7PBSNg5xJR5PWw5CbwIAgRmlwLcLxbzmW1OcB5Y

Модель:

namespace MovieList.Models
{
public class Movie
{
    public string Title { get; internal set; }
}
}

Контроллер:

namespace MovieList.Controllers {

public class MoviesController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public JsonResult GetMovies()
    {
        var movieService = new MovieService();
        List<Movie> movies = movieService.GetMovies();
        return Json(movies);
    }
}
}

Я также создал вспомогательный класс обслуживания:

namespace MovieList.Controllers
{
public class MovieService
{
    public List<Movie> GetMovies()
    {
        var movieRepo = new MovieRepo();
        var movies = movieRepo.GetMovies();
        return movies;
    }
}
}

.. ихранилище:

namespace MovieList.Controllers
{
public class MovieRepo
{
    private List<Movie> movieList = new List<Movie>
    {
        new Movie {
            Title = "Movie"
        },
        new Movie {
            Title = "Movie II"
        },
        new Movie {
            Title = "GMovie III"
        }
    };

    public List<Movie> GetMovies()
    {
        return movieList;
    }
}

}

Index.html:

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js" 
</script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<div id="app">
    <div class="search-wrapper">
        <input type="text" v-model="search" placeholder="Search" 
class="form-control"/>
    </div>
    <br>
    <div class="wrapper">
        <div class="card" >
            <table style="width:100%" class=" table movie-table">
                <tr>
                    <th>Title</th>
                </tr>
                <tr v-for="post in movieList">
                    <td>{{ post.Title }}</td>
                </tr>
            </table>
        </div>
    </div>
</div>

Javascript:

const app = new Vue({
el: '#app',
data: {
    search: '',
    movieList: []
},
computed: {
    filteredList() {
        return this.movieList.filter(post => {
            return 
post.title.toLowerCase().includes(this.search.toLowerCase())
        })
    }
},
mounted() {
    axios.post("http://localhost:60103/Movies", {}).then((data) => {
        console.log(data)
    });
}
})

Answer 1

Попробуйте добавить атрибут [HttpPost] к вашему методу действия в контроллере.

Обновление

namespace MovieList.Controllers {

[Route("api/[controller]")]
[ApiController]
public class MoviesController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public JsonResult GetMovies()
    {
        var movieService = new MovieService();
        List<Movie> movies = movieService.GetMovies();
        return Json(movies);
    }
}
}

Это позволит вам получить доступ к API через /api/Movies и GET запрос.Поскольку вы не изменяете состояние в БД, вы можете использовать GET вместо POST

Как указано в комментариях https://docs.microsoft.com/en-us/aspnet/core/tutorials/first-web-api?view=aspnetcore-2.2&tabs=visual-studio является хорошим справочным материалом для запуска