13

私はサイド プロジェクトに取り組んでおり、AngularJS と Web API を独学し、この 2 つがうまく連携する方法を学んでいます。

私は ASP.NET MVC について十分な知識を持っていますが、AngularJS と Web API、および 3 つがどのように連携するかについてはまだ理解できていません。

現時点では、次のコードを含む 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 にバインドするにはどうすればよいですか? JSONResultMVC コントローラーでa を返す必要がありますか? はいの場合、どのように？以下を試しましたが、コンパイルされていません。

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

それが機能すると仮定すると、それを AngularJS にバインドして、ViewModel 構造がどのようなものかを知るにはどうすればよいでしょうか? 私のにThingVMは多くのレベルの複雑さがあるからです。

最後に、フォームの送信をどのように処理すれば、Angular がPOSTリクエストの Web API コントローラーを指すようになりますか。

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>

改善提案:

モデルの検証は分野横断的な問題です。ロジックを属性として記述してロジックを再利用することをお勧めします。How can I centralize modelstate validation in asp.net mvc using action filters?の別の回答を見てください。

于 2014-02-02T04:27:21.800 に答える