C# 带有Web API 2和AngularJS的MVC5.1

我正在做一个兼职项目，教自己AngularJS和WebAPI，以及它们如何很好地协同工作

我有很好的ASP.NETMVC知识，但我仍然不能理解AngularJS和WebAPI以及这三者如何协同工作

目前，我有一个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绑定到Angular？我是否需要在MVC控制器上返回

JSONResult

？如果是，如何进行？因为我尝试了以下内容，但它没有编译

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

假设我能让它工作，我如何将它绑定到AngularJS，以便它知道我的ViewModel结构是什么样的？因为我的

ThingVM

有很多复杂度

---

最后，我如何处理表单提交，以便angular指向我的Web API控制器，用于

POST

请求。

在类似MVC SPA的angular中，您应该将模型与视图分开。我建议您的asp.mvc是提供视图（HTML）的地方，asp.net web api是提供带有CRUD操作的模型（JSON）的地方

您的asp.net mvc控制器：

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

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

您的asp.net api控制器：

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

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

进行快速演示。在real app中，您可以尝试创建一个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 Html助手从何而来？他们不再需要了吗？我是否应该手动键入表单的HTML输入元素？@Ciwan:使用HTML帮助程序不是强制性的。只要呈现的HTML具有必要的属性，如

ng model

，

ng controller

。