13

我正在做一个辅助项目来自学 AngularJS 和 Web API，以及两者如何很好地协同工作。

我有很好的 ASP.NET MVC 知识，但我仍然无法理解 AngularJS 和 Web 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.csViewModel 绑定到 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请求。

4

1 回答 1

13

在像 Angular 这样的 MVC SPA 中，您应该将模型与视图分开。我建议您的 asp.mvc 是您提供视图（HTML）的地方，而您的 asp.net Web api 是您通过 CRUD 操作提供模型（JSON）的地方。

你的 asp.net mvc 控制器：

[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'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 资源来创建 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>

改进建议：

模型验证是一个横切关注点，最好将逻辑编写为属性以重用逻辑。看看我在如何使用操作过滤器在 asp.net mvc 中集中模型状态验证的另一个答案？

于 2014-02-02T04:27:21.800 回答