MVC5.1 с Web API 2 и AngularJS

Question

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

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

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

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 к угловому? Должен ли я вернуть JSONResult на мой контроллер MVC? Если да, как? Потому что я попробовал, следующее, и он не компилируется.

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

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

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

Любая помощь была бы принята с благодарностью.

Thank you.

Answer 1

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

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

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

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

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's 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; 
    } 
} 

Ваш угловой контроллер, здесь я использую $http для быстрой демонстрации. В реальном приложении, вы можете попробовать angular resource создать клиент 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> 

рационализаторское предложение:

проверки модели является сквозная беспокойство, лучше написать логику как атрибут для повторного использования логики. Взгляните на мой другой ответ: How can I centralize modelstate validation in asp.net mvc using action filters?