我正在做一个业余项目来自学 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 View 中，我有 ng-app 指令，我创建了一个 JS Controller 并放置了 ng-controller表单周围的指令，并将其指向 JS Controller 。

但是我卡在这里了。首先，如何将我的 ThingVM.cs ViewModel 绑定(bind)到 Angular？我是否需要在我的 MVC Controller 上返回一个 JSONResult？如果是，如何？因为我尝试了以下内容，但它没有编译。

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

假设我让它工作，我如何将它绑定(bind)到 AngularJS，以便它知道我的 ViewModel 结构是什么样的？因为我的 ThingVM 有很多级别的复杂性。

最后，我如何处理表单提交，以便 POST 请求的 Angular 指向我的 Web API Controller 。

最佳答案

在像 Angular 这样的 MVC SPA 中，您应该将模型与 View 分开。我建议您的 asp.mvc 是您提供 View (HTML) 的地方，而您的 asp.net web api 是您提供具有 CRUD 操作的模型 (JSON) 的地方。

你的 asp.net mvc Controller :

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

您的 asp.net api Controller :

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

你的 Angular Controller ，这里我使用$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? 的另一个答案

关于c# - 带有 Web API 2 和 AngularJS 的 MVC5.1，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21503641/