MVC5.1 avec Web API 2 et AngularJS

Je suis en train de travailler sur un projet pour enseigner moi-même AngularJS et API Web et comment les deux peuvent travailler ensemble joliment.

J'ai de bonnes ASP.NET MVC connaissances, mais je ne peux toujours pas obtenir ma tête autour de AngularJS et Web API et comment tous les trois peuvent travailler ensemble.

Pour le moment, j'ai une Web API Contrôleur avec le code suivant:

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

Dans mon Create.cshtml vue j'ai le ng-app directive et j'ai créé un JS contrôleur et placé le ng-controller directive autour de la forme, et l'ont signalé à la JS contrôleur.

Mais là je suis coincé. Tout d'abord, comment puis-je lier mon ThingVM.cs ViewModel Angulaire? Dois-je retourner un JSONResult sur mon contrôleur MVC? Si Oui, comment? Cause j'ai essayé, à la suite, et ce n'est pas la compilation.

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

Si je suis qu'au travail, comment puis-je lier à AngularJS, de sorte qu'il sait ce que mon ViewModel de la structure? Parce que mon ThingVM a de nombreux niveaux de complexité.

Enfin, comment dois-je traiter la soumission du formulaire, de sorte que angulaire des points à mon Web API Contrôleur pour la POST demande.

Toute aide serait grandement appréciée.

Merci.

source d'informationauteur Ciwan

  1. 13

    MVC SPA, angulaire, il convient de séparer les modèles à partir de points de vue. Je dirais que votre asp.mvc est l'endroit où vous vous servir de votre point de vue (HTML) et de votre asp.net l'api web est l'endroit où vous servir de vos modèles (JSON) avec les opérations CRUD.

    Votre asp.net mvc contrôleur:

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

    Votre asp.net api contrôleur:

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

    Angulaire de votre contrôleur, j'utilise ici $http pour une démonstration rapide. Dans la vraie application, vous pouvez essayer de angulaire de ressources pour créer un client 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 
    }
});

    Votre Create.cshtml pourrait être comme ceci:

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

    Suggestion d'amélioration:

    La validation du modèle est une préoccupation horizontale, il est préférable d'écrire la logique comme un attribut de réutiliser la logique. Jetez un oeil à mon autre réponse à Comment puis-je centraliser modelstate de validation asp.net mvc à l'aide de filtres d'actions?