2016-09-13

ASP.NET MVCはじめました～MongoDBにデータを登録する

ASP.NET MVC C# MongoDB

概要

前回はデータを一覧表示してみたので、次にMongoDBへデータの登録をしてみます。

登録画面はこんな感じになります(デフォルト)。
f:id:sh_yoshida:20160912205359p:plain

環境

Visual Studio Community 2015
ASP.NET MVC5
MongoDB 3.2

データの登録

Insertメソッドにモデルオブジェクトを渡してあげるだけ。簡単ですね。
■UserRepository.cs

public async Task InsertAsync(User document)
{
    var collection = GetCollection<User>(Collection);
    await collection.InsertOneAsync(document);
}

このサンプルではMongoDBのオブジェクトIDを主キーとしているため、オブジェクトID以外が同値のデータは登録できてしまいます。これはあまり現実的ではないので、名前とメールアドレスの組み合わせで一意となるようにユニークインデックスを張っておきます(名前とメールアドレスの組み合わせも一般的ではないですが)。
シェルよりcreateIndexメソッドにunique:trueと指定することでユニークインデックスが作成できます。

> db.users.createIndex({"name":1,"email":1},{unique:true})
{
        "createdCollectionAutomatically" : false,
        "numIndexesBefore" : 1,
        "numIndexesAfter" : 2,
        "ok" : 1
}

getIndexesメソッドで作成されたインデックスを確認してみます。_idフィールドを主キーとしている他、名前とメールアドレスのユニークインデックスが確認できます。

f:id:sh_yoshida:20160912205429p:plain

この状態で名前とメールアドレスが既に登録されている値を新規で登録しようとすると「duplicate key error」が発生します。これで重複データの登録は防げました。

f:id:sh_yoshida:20160912205424p:plain

MVC

コードを一式載せておきます。

Model

名前とメールアドレスの組み合わせでユニークインデックスを張ったので、メールアドレスのフィールドを必須に変更しました。
■User.cs

using MongoDB.Bson;
using MongoDB.Bson.Serialization.Attributes;
using System.ComponentModel.DataAnnotations;

namespace aspnet_mvc5_mongodb.Models
{
    public class User
    {
        [BsonId]
        [BsonRepresentation(BsonType.ObjectId)]
        public string Id { get; set; }

        [BsonElement("name")]
        [Required]
        public string Name { get; set; }

        [BsonElement("age")]
        public int Age { get; set; }

        [BsonElement("email")]
        [Required]
        public string Email { get; set; }

        [BsonElement("address")]
        public string Address { get; set; }

    }
}

View

■Create.cshtml

@model aspnet_mvc5_mongodb.Models.User

@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>
@{
    if (ViewBag.ErrorMsg != null)
    {
        <span class="errorMsg">@ViewBag.ErrorMsg</span>
    }
}

@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()
    
    <div class="form-horizontal">
        <h4>User</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Age, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Age, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Age, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Address, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Address, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Address, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

Controller

■UsersController.cs

using aspnet_mvc5_mongodb.Models;
using aspnet_mvc5_mongodb.Repositories;
using aspnet_mvc5_mongodb.Repositories.Abstractions;
using System;
using System.Net;
using System.Threading.Tasks;
using System.Web.Mvc;

namespace aspnet_mvc5_mongodb.Controllers
{
    public class UsersController : Controller
    {
        private readonly IUserRepository _repository;
        public UsersController()
            : this(new UserRepository())
        {

        }
        public UsersController(IUserRepository repository)
        {
            this._repository = repository;
        }

        [HttpGet]
        public ActionResult Create()
        {
            return View();
        }

        [HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<ActionResult> Create(User inputModel)
        {
            if (inputModel == null)
            {
                return HttpNotFound();
            }

            if (ModelState.IsValid)
            {
                try
                {
                    await _repository.InsertAsync(inputModel);
                    return RedirectToAction("Index");
                }
                catch (Exception)
                {
                    ViewBag.ErrorMsg = "データ登録に失敗しました。";
                    return View(inputModel);
                }
            }
            return View(inputModel);
        }

        ...
    }
}

リポジトリ

■MongoDB.cs

using MongoDB.Driver;
using System.Configuration;

namespace aspnet_mvc5_mongodb.Repositories
{
    public class MongoDB
    {
        protected static IMongoClient _client;
        protected static IMongoDatabase _database;

        public MongoDB()
        {
            var connectionString = ConfigurationManager.AppSettings["MongoDBConnection"];
            var database = ConfigurationManager.AppSettings["Database"];
            _client = new MongoClient(connectionString);
            _database = _client.GetDatabase(database);
        }

        public static IMongoCollection<T> GetCollection<T>(string collection)
        {
            return _database.GetCollection<T>(collection);
        }

    }
}

■IUserRepository.cs

using aspnet_mvc5_mongodb.Models;
using System.Collections.Generic;
using System.Threading.Tasks;

namespace aspnet_mvc5_mongodb.Repositories.Abstractions
{
    public interface IUserRepository
    {
        Task InsertAsync(User document);
        ...
    }
}

■UserRepository.cs

using aspnet_mvc5_mongodb.Models;
using aspnet_mvc5_mongodb.Repositories.Abstractions;
using MongoDB.Driver;
using System.Collections.Generic;
using System.Threading.Tasks;

namespace aspnet_mvc5_mongodb.Repositories
{
    public class UserRepository : MongoDB, IUserRepository
    {
        private static readonly string Collection = "users";


        public async Task InsertAsync(User document)
        {
            var collection = GetCollection<User>(Collection);
            await collection.InsertOneAsync(document);
        }

        ...
    }
}

実行

/Users/Createにアクセス。
f:id:sh_yoshida:20160912205359p:plain

次回は画面からデータの編集です☆彡

参考

https://docs.mongodb.com/getting-started/csharp/insert/
https://docs.mongodb.com/manual/core/index-unique/

MongoDBイン・アクション

作者: Kyle Banker,Sky株式会社玉川竜司
出版社/メーカー: オライリージャパン
発売日: 2012/12/14
メディア: 大型本
購入: 5人クリック: 55回
この商品を含むブログ (8件) を見る

sh-yoshida.hatenablog.com

2016-09-12

ASP.NET MVCはじめました～MongoDBより値を取得し一覧表示する

ASP.NET MVC C# MongoDB

概要

久しぶりにタイトルを戻してみました。というわけで今回はASP.NET MVC5(C#)からMongoDBにつなげてみます。まずはデータを取って一覧表示しようと思います。

Modelは簡単なユーザ情報を。こんな感じになります(デフォルト)。
f:id:sh_yoshida:20160912090429p:plain

環境

Visual Studio Community 2015
ASP.NET MVC5
MongoDB 3.2

ドライバのインストール

パッケージマネージャーコンソールよりMongoDBのC#ドライバをインストールしましょう。

PM> Install-Package MongoDB.Driver

以下の3つがインストールされます。最新はいずれもv2.2.4です。

MongoDB.Bson
MongoDB.Driver
MongoDB.Driver.Core

MongoDBへ接続する

接続文字列とデータベース名を渡してあげるだけ。Rubyのドライバと似てますね。ローカルインストールされたMongoDBのsampleデータベースへ接続してみます。

■MongoDB.cs

var connectionString = ConfigurationManager.AppSettings["MongoDBConnection"];
var database = ConfigurationManager.AppSettings["Database"];
_client = new MongoClient(connectionString);
_database = _client.GetDatabase(database);

■Web.config

<appSettings>
    <add key="MongoDBConnection" value="mongodb://localhost"/>
    <add key="Database" value="sample"/>
</appSettings>

データの取得

条件なしで全件取得です。データベース、コレクション、メソッドという流れはシェルのAPIと一緒なのでわかりやすいと思います。

■UserRepository.cs

private static readonly string Collection = "users";

public async Task<IEnumerable<User>> GetAllAsync()
{
    var collection = GetCollection<User>(Collection);
    var filter = new BsonDocument();
    var result = await collection.Find(filter).ToListAsync();

    return result;
}

ラムダ式も用意されてます。こっちのほうが直感的かもしれない？

return await collection.Find(_ => true).ToListAsync();

MVC

あとはいつも通りですね。コードを一式載せておきます。

Model

■User.cs

using MongoDB.Bson;
using MongoDB.Bson.Serialization.Attributes;
using System.ComponentModel.DataAnnotations;

namespace aspnet_mvc5_mongodb.Models
{
    public class User
    {
        [BsonId]
        [BsonRepresentation(BsonType.ObjectId)]
        public string Id { get; set; }

        [BsonElement("name")]
        [Required]
        public string Name { get; set; }

        [BsonElement("age")]
        public int Age { get; set; }

        [BsonElement("email")]
        public string Email { get; set; }

        [BsonElement("address")]
        public string Address { get; set; }

    }
}

View

■Index.cshtml

@model IEnumerable<aspnet_mvc5_mongodb.Models.User>

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Age)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Email)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Address)
        </th>
        <th></th>
    </tr>

    @if (Model != null)
    {
        foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Age)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Email)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Address)
                </td>
                <td>
                    @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
                    @Html.ActionLink("Delete", "Delete", new { id = item.Id })
                </td>
            </tr>
        }
    }
</table>

Controller

■UsersController.cs

using aspnet_mvc5_mongodb.Models;
using aspnet_mvc5_mongodb.Repositories;
using aspnet_mvc5_mongodb.Repositories.Abstractions;
using System;
using System.Net;
using System.Threading.Tasks;
using System.Web.Mvc;

namespace aspnet_mvc5_mongodb.Controllers
{
    public class UsersController : Controller
    {
        private readonly IUserRepository _repository;
        public UsersController()
            : this(new UserRepository())
        {

        }
        public UsersController(IUserRepository repository)
        {
            this._repository = repository;
        }

        public async Task<ActionResult> Index()
        {
            var model = await _repository.GetAllAsync();
            return View(model);
        }

        ...
    }
}

リポジトリ

■MongoDB.cs

using MongoDB.Driver;
using System.Configuration;

namespace aspnet_mvc5_mongodb.Repositories
{
    public class MongoDB
    {
        protected static IMongoClient _client;
        protected static IMongoDatabase _database;

        public MongoDB()
        {
            var connectionString = ConfigurationManager.AppSettings["MongoDBConnection"];
            var database = ConfigurationManager.AppSettings["Database"];
            _client = new MongoClient(connectionString);
            _database = _client.GetDatabase(database);
        }

        public static IMongoCollection<T> GetCollection<T>(string collection)
        {
            return _database.GetCollection<T>(collection);
        }

    }
}

■IUserRepository.cs

using aspnet_mvc5_mongodb.Models;
using System.Collections.Generic;
using System.Threading.Tasks;

namespace aspnet_mvc5_mongodb.Repositories.Abstractions
{
    public interface IUserRepository
    {
        Task<IEnumerable<User>> GetAllAsync();
        ...
    }
}

■UserRepository.cs

using aspnet_mvc5_mongodb.Models;
using aspnet_mvc5_mongodb.Repositories.Abstractions;
using MongoDB.Driver;
using System.Collections.Generic;
using System.Threading.Tasks;

namespace aspnet_mvc5_mongodb.Repositories
{
    public class UserRepository : MongoDB, IUserRepository
    {
        private static readonly string Collection = "users";


        public async Task<IEnumerable<User>> GetAllAsync()
        {
            var collection = GetCollection<User>(Collection);
            return await collection.Find(_ => true).ToListAsync();
        }

        ...
    }
}

実行

シェルから適当にデータを登録します。

> db.users.insertMany(
    [
        {name: "Alice", age:19, email: "Alice@simple.com", address: "New York"},
        {name: "Steve", age:28, email: "Steve@simple.com", address: "San Francisco"},
        {name: "Emily", age:31, email: "Emily@simple.com", address: "Chicago"}
    ]
)

こんな感じでデータが登録されてればOK。

f:id:sh_yoshida:20160912093442p:plain

/Users/Indexにアクセス。

f:id:sh_yoshida:20160912090429p:plain

次回は画面からデータ登録できるようにしてみます☆彡

参考

https://docs.mongodb.com/getting-started/csharp/client/
https://docs.mongodb.com/getting-started/csharp/query/

2016-06-29

Visual Studio Code Yeomanのgenerator-aspnetをアップデート

Visual Studio Code Mac C# ASP.NET MVC

概要

先日ASP.NET Core 1.0 RTMがリリースされ、generator-aspnetもv0.2.0にアップデートされたようなのでnpmから更新します。
.NET Core SDKのインストールはこちらから

環境

OS X EI Capitan バージョン 10.11.5
Visual Studio Code バージョン 1.2.1

パッケージを更新

$ npm update -g yo
$ npm update -g generator-aspnet

generatorはyoからアップデートすることもできるので、こっちからやってもOKですね。

f:id:sh_yoshida:20160629061407p:plain

Webアプリケーションの作成

ターミナルから`yo`のコマンドを入力して対話形式でプロジェクトを作成していきます。

f:id:sh_yoshida:20160629070412p:plain
なんやかんやありまして
f:id:sh_yoshida:20160629070440p:plain

VS Codeで開いて実行してみました。
ターミナルが使えるようになって便利になりましたね。
f:id:sh_yoshida:20160629070703p:plain

ちゃんと動きました！
f:id:sh_yoshida:20160629070523p:plain

参考

blogs.msdn.microsoft.com
www.npmjs.com

1.21 jigowatts

Great Scott!

ASP.NET MVCはじめました～MongoDBにデータを登録する

概要

環境

データの登録

MVC

Model

View

Controller

リポジトリ

実行

参考

ASP.NET MVCはじめました～MongoDBより値を取得し一覧表示する

概要

環境

ドライバのインストール

MongoDBへ接続する

データの取得

MVC

Model

View

Controller

リポジトリ

実行

参考

Visual Studio Code Yeomanのgenerator-aspnetをアップデート

概要

環境

最新ではないパッケージを確認

パッケージを更新

Webアプリケーションの作成

参考