AngularJS + ASP.NET MVC 4でなんか作ってみます。
Visual Studio 2010 + MVC4で開発します。2013とかほしいっす。
プロジェクト準備
MVC4の空プロジェクトを作成します。
IE8もサポートしなきゃいけないだろうから
AngularJS 1.2系のangular.min.js
jQuery 1.X系のjquery-1.11.0.min.js
とか使います。
プロジェクトに “Scripts”フォルダを作って、
angular.min.jsとjquery-1.11.0.min.jsをコピーします。
続いてNuGetで
「Entity Framework 日本語リソース」
「EntityFramework.SqlServerCompact」
をインストールします。
Model
サンプルなんでコードファーストで行ってみます。
Entity
\Models\Task.cs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations.Schema;
namespace Mvc4App.Models
{
public enum TaskStatus
{
New,
Completed,
Canceled
}
[Table("Tasks")]
public class Task
{
public int Id { get; set; }
public TaskStatus Status{ get; set;}
public string Description { get; set; }
}
}
|
DB Context
\Models\TaskContext.cs
1
2
3
4
5
6
7
8
9
10
11
12
13
|
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.Entity;
namespace Mvc4App.Models
{
public class TaskContext : DbContext
{
public DbSet<Task> Tasks { get; set; }
}
}
|
Connection
web.config
1
2
3
4
5
|
<configuration>
<connectionStrings>
<add name="TaskContext" connectionString="Data Source=|DataDirectory|TaskList.sdf" providerName="System.Data.SqlServerCe.4.0"/>
</connectionStrings>
<configuration>
|
Global.asax.csにSetInitializerとイニシャルデータ用コード追加
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
protected void Application_Start() {
AreaRegistration.RegisterAllAreas();
WebApiConfig.Register(GlobalConfiguration.Configuration);
FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
RouteConfig.RegisterRoutes(RouteTable.Routes);
// サンプルなんでとりあえず毎回作り直す方向で。
Database.SetInitializer<Models.TaskContext>(new DropCreateDatabaseAlways<Models.TaskContext>());
using (var db = new Models.TaskContext()) {
var task = new Models.Task();
task.Status = Models.TaskStatus.New;
task.Description = "てすとっす";
db.Tasks.Add(task);
db.SaveChanges();
}
}
|
ここまででとりあえず実行してみると
App_Data\TaskList.sdf
データベースが作られるはずです。
Controller
Controllersフォルダで右クリック→追加→コントローラー
コントローラー名はてきとーに：TasksController
テンプレートには「空の読み取り/書き込み操作のあるAPIコントローラー」を選んでみました。
そうするとString型を対象としたコントローラができるので、Task用に書き換えます。
最初、「Entity Frameworkを使用した、読み取り/書き込み操作のあるAPIコントローラー」を試したんですが、
‘Mvc4App.Models.Task’ のメタデータを取得できませんでした。型 ‘System.Data.Entity.Core.Objects.ObjectContext’ のオブジェクトを型 ‘System.Data.Objects.ObjectContext’ にキャストできません。
とか出てダメでした。使えれば便利そうなんですけどね。
こんな感じになりました。エラー処理とかバリデーションとか一切入ってません。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
namespace Mvc4App.Controllers
{
public class TasksController : ApiController
{
// GET api/tasks
public IEnumerable<Models.Task> Get()
{
using (var db = new Models.TaskContext()) {
return db.Tasks.ToArray();
}
}
// GET api/tasks/5
public Models.Task Get(int id)
{
using (var db = new Models.TaskContext()) {
return db.Tasks.FirstOrDefault(t => t.Id == id);
}
}
// POST api/tasks
public void Post([FromBody]Models.Task value)
{
using (var db = new Models.TaskContext()) {
db.Tasks.Add(value);
db.SaveChanges();
}
}
// PUT api/tasks/5
public void Put(int id, [FromBody]Models.Task value)
{
using (var db = new Models.TaskContext()) {
db.Entry<Models.Task>(value).State = System.Data.Entity.EntityState.Modified;
db.SaveChanges();
}
}
// DELETE api/tasks/5
public void Delete(int id)
{
using (var db = new Models.TaskContext()) {
var task = db.Tasks.FirstOrDefault(t => t.Id == id);
if (task != null) {
db.Tasks.Remove(task);
db.SaveChanges();
}
}
}
}
}
|
TasksはWebAPIに専念するのでTasks用Viewは在りません。
デバッグ実行して、http://localhost:????/api/tasks にアクセスするとテストデータが出るはずです。
(IEだとエラーになるかも,chromeだと多少整形されたXMLで表示されました)
Model,Controllerは通常のコードですね。
次回View。AngularJSを使ってみます。