MVC5.1 с Web API 2 и AngularJS

Я работаю над сайд-проектом, чтобы научить себя AngularJS и Web API и тому, как они могут прекрасно работать вместе.

У меня есть хорошие знания ASP.NET MVC, но я все еще не могу понять AngularJS и Web API и то, как все три могут работать вместе.

На данный момент у меня есть Web API Controller со следующим кодом:

public class PlanController : ApiController
{
    [Route("api/thing")]
    public HttpResponseMessage Post(ThingVM model)
    {
        HttpResponseMessage response;

        if (ModelState.IsValid)
        {
            using (var context = new MyContext())
            {

                var thing = new Thing();

                context.Thing.Add(thing);
                context.SaveChanges();
                response = Request.CreateResponse(HttpStatusCode.Created);
                string uri = Url.Link("GetThingById", new {id = thing.Id});
                response.Headers.Location = new Uri(uri);
            }
        }
        else
        {
            response = Request.CreateResponse(HttpStatusCode.BadRequest);
        }
        return response;
    }
}

В моем представлении Create.cshtml меня есть директива ng-app и я создал контроллер JS, поместил директиву ng-controller вокруг формы и направил ее на контроллер JS.

Но здесь я застрял. Прежде всего, как мне привязать мою ThingVM.cs ViewModel к Angular? Нужно ли возвращать JSONResult на моем контроллере MVC? Если да, то как? Потому что я попытался, следующее, и это не компилируется.

[HttpGet]
public JsonResult Create()
{
    using (var context = new MyContext())
    {
        var model = new ThingVM();
        return Json(model);
    }
}

Предполагая, что это работает, как мне связать его с AngularJS, чтобы он знал, на что похожа моя структура ViewModel? Потому что мой ThingVM имеет много уровней сложности.

Наконец, как мне обработать отправку формы, чтобы угловые точки на моем контроллере Web API для запроса POST.

Ответы

Ответ 1

В MVC SPA, например angular, вы должны отделять модели от представлений. Я бы предположил, что ваш asp.mvc - это то, где вы обслуживаете свои представления (HTML), и ваш asp.net web api - это то, где вы обслуживаете свои модели (JSON) с помощью операций CRUD.

Ваш контроллер mpc asp.net:

[HttpGet]
public ActionResult Create()
{
    return View(); //this return Create.cshtml
}

Ваш контроллер asp.net api:

public class PlanController : ApiController
{
    public ThingVM Get()
    {
        using (var context = new MyContext())
        {
            var model = new ThingVM();
            return model;
        }
    }

    public HttpResponseMessage Post(ThingVM model)
    {
        HttpResponseMessage response;
        //It better to write the modelstate validation as an attribute. See improvement suggestion below
        if (ModelState.IsValid)
        {
            using (var context = new MyContext())
            {

                var thing = new Thing();

                context.Thing.Add(thing);
                context.SaveChanges();
                response = Request.CreateResponse(HttpStatusCode.Created);
                string uri = Url.Link("GetThingById", new {id = thing.Id});
                response.Headers.Location = new Uri(uri);
            }
        }
        else
        {
            response = Request.CreateResponse(HttpStatusCode.BadRequest);
        }
        return response;
    }
}

Ваш контроллер angular, здесь я использую $http для быстрой демонстрации. В реальном приложении вы можете попробовать angular ресурс для создания клиента REST

app.controller("planController", function ($scope, $http){
    $scope.thingVM = $http.get("api/Plan"); //load view model as json from web api

    $scope.saveThingVM = function(){
          http.post("api/Plan",$scope.thingVM); //send a post request to web api to update 
    }
});

Ваш Create.cshtml может быть таким:

<form ng-submit="saveThingVM()" ng-controller="planController">
   <input ng-model="thingVM.Name" type="text"></input>
   <input type="submit">Save model</input>
</form>

Рекомендация по улучшению:

Проверка модели - это сквозная проблема, лучше написать логику как атрибут для повторного использования логики. Взгляните на мой другой ответ в Как я могу централизовать валидацию modelstate в asp.net mvc с помощью фильтров действий?