7月 2019

Home › Archives for 7月 2019

2019/07/24

ASP.NET Core で Vue.js を使用する

ちなみに私は React も Angular も使ったことがなく、フロントエンドのフレームワークを使うのは初めてです。  Vue.js を選んだのは、プログレッシブフレームワークということで、部分的に採用可能だというところに惹かれ、始めやすそうだったからです。  ## 環境  - Visual Studio 2017 - ASP.NET Core 2.2 - Vue.js 2.6.10  ## プロジェクトの作成  まずは Visual Studio でプロジェクトを作成します。   普通に MVC のプロジェクトとして作成します。  <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxw1XAq_7hblLwvhMFm14J4evsKoFCkBCq9HNGUC9bTIRO4LcknPaInQNquYIRauVMBifHPwmKTtmgjHrFwiO7AN7E3Mf9tOVfmZPx_LT5SOluXY9MTSVFOxlCsOS06yWJCmPGllzbjjc/s1600/01.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxw1XAq_7hblLwvhMFm14J4evsKoFCkBCq9HNGUC9bTIRO4LcknPaInQNquYIRauVMBifHPwmKTtmgjHrFwiO7AN7E3Mf9tOVfmZPx_LT5SOluXY9MTSVFOxlCsOS06yWJCmPGllzbjjc/s320/01.png" width="320" height="222" data-original-width="941" data-original-height="653" /></a> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirPTmIpVD0KapFqvgB3ldoXfesUTURjIL90hZqU-q3umSE_iKD_GKiGnbn_hU9pAYOY8paWdRF7WBSlsuYY_8gQIFxVvPLS8S2BFcUbZseZaxe_3ikLKooLL0c7oI7NoHhokvnJP3oIjk/s1600/02.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirPTmIpVD0KapFqvgB3ldoXfesUTURjIL90hZqU-q3umSE_iKD_GKiGnbn_hU9pAYOY8paWdRF7WBSlsuYY_8gQIFxVvPLS8S2BFcUbZseZaxe_3ikLKooLL0c7oI7NoHhokvnJP3oIjk/s320/02.png" width="320" height="225" data-original-width="786" data-original-height="553" /></a> ## Vue.js のインストール  普通は CDN を直接参照したり、npm でインストールしたりすると思いますが、今回は Visual Studio を使っているので LibMan (Library Manager) で CDN からダウンロードしてインストールします。   LibMan は Visual Studio のみでフロントエンドのライブラリも全て管理できるので便利です。  ソリューションエクスプローラーでプロジェクトを右クリックし、「追加」>「クライアント側のライブラリを追加するには」を選択します。  <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyRgXGAvKFjXe9p5q0NFwz6AzJpMo7i5KBptCd6h80zL9Ve_94dsk8J8d5aPve-Xq32KPQdfdL1dcjdJS8afLy84U77sbMQV8r5W-wdAsHYN-dpeB4uBx5k1O6eFyGqUZnhHbSmbmUWwU/s1600/03.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyRgXGAvKFjXe9p5q0NFwz6AzJpMo7i5KBptCd6h80zL9Ve_94dsk8J8d5aPve-Xq32KPQdfdL1dcjdJS8afLy84U77sbMQV8r5W-wdAsHYN-dpeB4uBx5k1O6eFyGqUZnhHbSmbmUWwU/s320/03.png" width="320" height="245" data-original-width="920" data-original-height="703" /></a> `vue` と入力して Enter を押すと、最新バージョンの Vue.js が表示されるので、インストールします。  <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuKZmz7WVqwKE-uPaS6SHB0WYIjWPNJa2sUgDbAQQiZihsd8ly2ab6q_3zZc8PqP4iE5YWwwx94gpO6UEFATxTyTxXggcYYNM5qssM4Z-VX9ZQdpB2G2Ttvz9m__eereceoXk8HjCQ_TM/s1600/04.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuKZmz7WVqwKE-uPaS6SHB0WYIjWPNJa2sUgDbAQQiZihsd8ly2ab6q_3zZc8PqP4iE5YWwwx94gpO6UEFATxTyTxXggcYYNM5qssM4Z-VX9ZQdpB2G2Ttvz9m__eereceoXk8HjCQ_TM/s320/04.png" width="320" height="226" data-original-width="486" data-original-height="343" /></a> 実際に必要なのは、`vue.js` と `vue.min.js` だけなので、この２つのファイルだけを指定してインストールしても OK です。  ## Vue.js のインクルード  Vue.js をインストールしたら、`Views > Shared > _Layout.cshtml` を編集して、Vue.js のコードを読み込みます。   以下、該当箇所の抜粋です。  ```html <environment include="Development">    <script src="~/lib/jquery/dist/jquery.js"></script>    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>    <script src="~/lib/vue/vue.js"></script></environment><environment exclude="Development">    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"             asp-fallback-src="~/lib/jquery/dist/jquery.min.js"             asp-fallback-test="window.jQuery"             crossorigin="anonymous"             integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=">    </script>    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"             asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"             asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"             crossorigin="anonymous"             integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o">    </script>    <script src="~/lib/vue/vue.min.js"></script></environment>``` `Development` では `vue.js` を、`Development` 以外では `vue.min.js` を読み込むようにします。  ## サンプル  まずは Hello World ということで、Vue.js の[公式サイトのサンプルコード](https://jp.vuejs.org/v2/guide/#%E5%AE%A3%E8%A8%80%E7%9A%84%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0)を動かしてみます。  とりえあずさくっと動かしたいので、`Views > Home > Index.cshtml` に以下のコードを追加してみます。  ```cs <div id="app">    {{ message }} </div> @section scripts {     <script>        var app = new Vue({             el: '#app',             data: {                 message: 'Hello Vue!'             }         })     </script>} ```  アプリケーションを実行して、`Hello Vue!` と表示されれば OK です。  ### 簡単な解説  `new Vue` で Vue.js のオブジェクトを作成し、`el` プロパティで、HTML 要素のセレクター(id）を指定し、`data` プロパティでデータの定義を行います。   ここでは `message` というデータを定義し、`Hello Vue!` を代入しています。  Vue が適用された要素内（ここでは `<div id="app">` ）では、`{{ message }}` という表記（マスタッシュ構文）で、`data` に定義したデータを展開することができます。   ## Vue.js の省略記法を使う際の注意点  Vue.js でよく使う `v-bind` と `v-on` には省略記法があります。  ```html <a v-bind:href="url"></a><a v-on:click="doSomething"></a>  <a :href="url"></a><a @click="doSomething"></a>````  しかし、 `@` は Razor 構文でも使われているため、`@` を使うと Razor 構文として解釈され、View 表示時にエラーとなります。  一応レンダリングエンジンを変えることもできるようですが、私はここまでやっていません。  - https://k-miyake.github.io/blog/vue-aspnetcoremvc/  ちなみに、`v-bind` の省略記号 `:` は使えました。

2019/07/10

NO IMAGE

[ASP.NET Core] Flags 属性を持った Enum をバインディングする

ASP.NET Core

しかし、以下のライブラリを使うことで簡単にできたので、紹介します。  - https://github.com/sgjsakura/AspNetCore  ## インストール  ライブラリの種類はいろいろありますが、Flags 属性の Enum をバインディングするのに必要なのは `Sakura.AspNetCore.Mvc.TagHelpers` です。   これを NuGet でインストールします。  ## 準備  ### ミドルウェアの追加  Flags 属性の Enum をバインディングするには、ミドルウェアに `FlagsEnumModelBinderProvider` を追加する必要があるようです。  - https://github.com/sgjsakura/AspNetCore/blob/master/TagHelperDemo.md#binders  上記で説明されている通り、`Startup.cs` を以下のように変更します。  ```cs // In startup.cs  public void ConfigurationServices(IServiceCollection services) {   // Other configuration code   services.AddMvc(options =>    {     // Using the followint code to add the new binder     options.AddFlagsEnumModelBinderProvider();   }); } ```  ### タグヘルパーの有効化  タグヘルパーを有効にするために、`_ViewImports.cs` に以下を追加します。  ``` @addTagHelper *, Sakura.AspNetCore.Mvc.TagHelpers ```  これについては以下で解説されています。  - https://github.com/sgjsakura/AspNetCore/blob/master/TagHelperDemo.md#installation  ## View  タグヘルパーについては以下で解説されています。  - https://github.com/sgjsakura/AspNetCore/blob/master/TagHelperDemo.md#flagsenuminputtaghelper  上記のコードをそのまま転用しますが、以下のようなモデルが定義されていた場合、  ```cs // backend code [Flags] public enum Features {   None = 0x0,   CanRead = 0x1,   CanWrite = 0x2,   CanSeek = 0x4 }  public class Stream {   public Features Features { get; set; } } ```  View で以下のように記述するだけでバインディングできます。  ```html @model Stream <label>  <input type="checkbox" asp-enum-flag-for="Features" asp-enum-flag-value="Features.CanSeek"> CanSeek </label>```  しかし、私の場合は Razor がエラーを吐いていたので、`input` の最後に終了を示すスラッシュ `/` を追加しました。  尚、上記のコードは Razor によって以下のように展開されるようです。  ```html <label>  <input type="checkbox" name="Features" value="CanSeek" checked="checked"> CanSeek </label>```

2019/07/08

NO IMAGE

CentOS で home の容量を縮小して root の容量を拡張する

CentOS

2019/07/03

NO IMAGE

Windows 10 でタブレットモードを有効にできない

Windows 10

2019/07/02

NO IMAGE

[C#] JSON へのシリアライズ時に数値を文字列で出力する

## 概要  `Newtonsoft.json (JSON.NET)` で Enum を文字列で出力したい場合、`StringEnumConverter` を使用します。  数値を文字列で出力したい場合も同様にコンバーターを使用しますが、デフォルトでは用意されていないため、自作します。  他に良い方法があったら教えてください。  ## 環境  - Visual Studio 2017 - .NET Core 2.2  ## サンプル  例えば、以下のようなクラスを JSON でシリアライズしたとします。  ```cs public class Person {     public string Name { get; set; }     public int Age { get; set; } } ```  ```cs var person = new Person() {     Name = "Hoge",     Age = 20 }; var json = JsonConvert.SerializeObject(person); Console.WriteLine(json); ```  ### デフォルトでは  以下のように、`int` は数値で出力されます（わかりやすくするため整形しています）。  ```json {     "Name" : "Hoge",     "Age" : 20 } ```  これを訳あって文字列で出力したい場合は以下のようにします。  ## コンバーターの作成  ### コンバーターの例  数値を文字列に変換する `StringNumberConverter` を以下のように作成します。  ```cs using System; using Newtonsoft.Json; using Newtonsoft.Json.Linq; ```  ```cs public class StringNumberConverter<T> : JsonConverter {     public override object ReadJson(JsonReader reader, Type objectType, object existingValue, JsonSerializer serializer)     {         var jt = JToken.ReadFrom(reader);          return jt.Value<T>();     }      public override bool CanConvert(Type objectType)     {         return typeof(T).Equals(objectType);     }      public override void WriteJson(JsonWriter writer, object value, JsonSerializer serializer)     {         serializer.Serialize(writer, value.ToString());     } } ```  ### Attribute の指定  `Person` クラスのプロパティに Attribute を指定します。  ``` public class Person {     public string Name { get; set; }     [JsonConverter(typeof(StringNumberConverter<int>))]     public int Age { get; set; } } ```  ### シリアライズの結果  この状態でシリアライズすると、以下のように数値が文字列で出力されます。  ```json {     "Name" : "Hoge",     "Age" : "20" } ```

テンプレートテスト

2019/07/24

ASP.NET Core で Vue.js を使用する

2019/07/10

[ASP.NET Core] Flags 属性を持った Enum をバインディングする

2019/07/08

CentOS で home の容量を縮小して root の容量を拡張する

2019/07/03

Windows 10 でタブレットモードを有効にできない

2019/07/02

[C#] JSON へのシリアライズ時に数値を文字列で出力する

Translate

Popular Posts

Labels

Blog Archive