Web Api и Asp.Net MVC клиент

312

01 марта 2017, 18:13

Сделал в учебных целях Asp.Net MVC приложение ресторан.

Функционал: прием продуктов, списание продуктов, продажа блюд(списание продуктов на основе рецептов проданных блюд), передача продуктов между ресторанами.

Теперь хочу попробовать сделать по существующей модели WPF-приложение и позже SPA на Angular.

Решил сделать Web API, чтобы все три клиента обращались к базе данных через него. Опыта написание Api до этого не было.

Если я буду переделывать MVC приложение я должен буду где-то в настройках прописать адрес API? В контроллерах я буду вызывать методы API, получать json,генерировать на основе его viewModel и отправлять во view?

Еще есть идея чтобы классы viewModel для MVC и WPF сделать общими. Также сделать какую-то библиотеку для обертки APi методов или лучше сделать один класс для вызова всех методов, чтобы в MVC добавить внедрение зависимости?

В правильном направление я думаю?

Answer 1

Чтобы иметь возможность добавлять api-контроллер в уже имеющийся MVC-проект, проделайте шаги описанные тут, а именно:

Через NuGet установите Microsoft.AspNet.WebApi;

Добавьте класс App_Start\WebApiConfig.cs с определением api-маршрутов, со следующим содержимым:

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        config.MapHttpAttributeRoutes();
        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{action}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );
    }
}

В файле Global.asax.cs необходимо вызвать регистрацию api-маршрутов первее mvc-маршрутов. Для этого сделаем вызов GlobalConfiguration.Configure(WebApiConfig.Register) перед RouteConfig.RegisterRoutes(RouteTable.Routes);

Теперь, говоря в рамках SPA-приложения, после того как мы настроим маршрутизацию в модуле AngularJS (например):

var exampleApp = angular.module('exampleApp', ['ngRoute']);
exampleApp.config(function ($routeProvider, $locationProvider) {
    $routeProvider    
        .when('/example', {
            templateUrl: 'Templates/example.html',            
            controller: 'exampleCtrl'
        })
    $locationProvider.hashPrefix('');
});

мы можем (например) перейти на example.html с помощью вызова <a href="#/example">Example</a>