WebSurfer's Home

トップ > Blog 1   |   Login
Filter by APML

DropDownList への SelectList の渡し方 (CORE)

by WebSurfer 22. January 2021 18:10

.NET Framework 版 MVC の話は先の記事「DropDownList への SelectList の渡し方」に書きましたが、その Core 版の話を聞きます。

DropDownList で複数項目を選択

Core 版 MVC アプリでは従前から提供されている Html ヘルパーの DropDownList, DropDownListFor メソッドに加えて、タグヘルパーというものが使えますのでそれを使った場合の例も書いておきます。

タグヘルパーに関する詳細は以下の Microsoft のドキュメントが参考になると思いますので、そちらを見てください(手抜きでスミマセン)。

SelectList のコンストラクタの第 4 引数に設定した selectedValue の通りに html にレンダリングされた時の option 要素に selected 属性を設定するにはどうするかという点がポイントでしたが、Html ヘルパーの DropDownList, DropDownListFor メソッドについてはそのあたりは .NET Framework 版と同様でした。

例えば ViewBag.CategoryID で SelectList を DropDownList メソッドに渡す場合は、第 1 引数は "CategoryID" という文字列、第 2 引数は null にします。詳しい説明は先の記事「DropDownList への SelectList の渡し方」を見てください。

select タグヘルパーを使う場合ですが、SelectList を ViewBag (または ViewData) 経由で渡す場合でかつ Model を使用しない場合は asp-for は使えませんので、select タグヘルパーに id, name 属性を設定して asp-items 属性に ViewBag (または ViewData) を渡します。

さらに、上に紹介した記事「ASP.NET Core のフォームのタグ ヘルパー」の「選択タグ ヘルパー」のセクションに Model で渡すサンプルコードが書いてあって、そのようにしても option 要素に selected 属性の設定が可能です。

その記事によると "We don't recommend using ViewBag or ViewData with the Select Tag Helper. A view model is more robust at providing MVC metadata and generally less problematic." とのことで、可能ならば SelectList を渡すには Model を使った方が良さそうです。(Model を使えないケースも多々ありそうですが)

以下に、(1) 1 項目だけ選択できるドロップダウンリスト、(2) 複数項目が選択可能なドロップダウンリスト、(3) 初期表示の際複数項目を指定して選択状態にするドロップダウンリストのサンプルコードを書いておきます。

(1) 1 項目だけ選択可

先の記事「DropDownList への SelectList の渡し方」と同じ条件です。

Model

select タグヘルパーに Model 経由で SelectList と初期状態の選択項目を渡すために使います。

public class CategoryViewModel
{
    public int Category { get; set; }

    public SelectList Categories { get; set; }
}

Controller / Action Method

public async Task<IActionResult> Edit()
{
    int selected = 3;
    var categoryList = await _context.Categories.ToListAsync();

    ViewBag.CategoryId = new SelectList(categoryList, 
                                        "CategoryId", 
                                        "CategoryName", 
                                        selected);

    var model = new CategoryViewModel
    {
        Category = selected,
        Categories = new SelectList(categoryList,
                                    "CategoryId",
                                    "CategoryName")
    };

    return View(model);
}

[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult Edit(int categoryid, 
                          int categoryid2, 
                          int category)
{
    if (ModelState.IsValid)
    {
        return RedirectToAction("Index");
    }

    return View();
}

View

@model MvcCore5App.Controllers.CategoryViewModel

@{
    ViewData["Title"] = "Edit";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h1>Edit</h1>

<div class="row">
    <div class="col-md-4">
        <form asp-action="Edit">
            <div class="form-group">
                <label class="control-label" for="CategoryId">
                    @@Html.DropDownList 利用
                </label>
                @Html.DropDownList("CategoryId", null,
                    htmlAttributes: new { @class = "form-control" })
            </div>
            <div class="form-group">
                <label class="control-label" for="CategoryId2">
                    タグヘルパー &lt;select&gt; + ViewBag 利用
                </label>
                <select id="categoryid2" name="categoryid2"
                        asp-items="@ViewBag.CategoryId"
                        class="form-control">
                </select>
            </div>
            <div class="form-group">
                <label class="control-label" for="CategoryId2">
                    タグヘルパー &lt;select&gt; + Model 利用
                </label>
                <select asp-for="Category"
                        asp-items="Model.Categories"
                        class="form-control">
                </select>
            </div>
            <div class="form-group">
                <input type="submit" value="Create"
                       class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

(2) 複数項目の選択可

Model

上記 (1) の Model と同じ。

Controller / Action Method

[HttpPost] 側のアクションメソッドの引数が int[] 型になっている点に注目してください。int[] 型にすることにより、ユーザーが複数項目を選択した結果を受け取れます。

public async Task<IActionResult> Edit2()
{
    int selected = 3;
    var categoryList = await _context.Categories.ToListAsync();

    ViewBag.CategoryId = new SelectList(categoryList,
                                        "CategoryId",
                                        "CategoryName",
                                        selected);

    var model = new CategoryViewModel
    {
        Category = selected,
        Categories = new SelectList(categoryList,
                                    "CategoryId",
                                    "CategoryName")
    };

    return View(model);
}

[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult Edit2(int[] categoryid, 
                           int[] categoryid2, 
                           int[] category)
{
    if (ModelState.IsValid)
    {
        return RedirectToAction("Index");
    }

    return View();
}

View

ユーザーが複数項目を選択できるよう multiple = "multiple" を付与しているところに注目してください。

@model MvcCore5App.Controllers.CategoryViewModel

@{
    ViewData["Title"] = "Edit2";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h1>Edit2</h1>

<div class="row">
    <div class="col-md-4">
        <form asp-action="Edit2">
            <div class="form-group">
                <label class="control-label" for="CategoryId">
                    @@Html.DropDownList 利用
                </label>
                @Html.DropDownList("CategoryId", null,
                    htmlAttributes: new
                    {
                        @class = "form-control",
                        multiple = "multiple"
                    })
            </div>
            <div class="form-group">
                <label class="control-label" for="CategoryId2">
                    タグヘルパー &lt;select&gt; + ViewBag 利用
                </label>
                <select id="categoryid2" name="categoryid2"
                        asp-items="@ViewBag.CategoryId"
                        multiple="multiple"
                        class="form-control">
                </select>
            </div>
            <div class="form-group">
                <label class="control-label" for="CategoryId2">
                    タグヘルパー &lt;select&gt; + Model 利用
                </label>
                <select asp-for="Category"
                        asp-items="Model.Categories"
                        multiple="multiple"
                        class="form-control">
                </select>
            </div>
            <div class="form-group">
                <input type="submit" value="Create"
                       class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

(3) 初期表示の際複数項���を選択状態にする

上の画像を表示したのがこれです。

Model

SelectList に代えて MultiSelectList を使っているところに注目してください。

public class MultiCategoryViewModel
{
    public int[] Category { get; set; }

    public MultiSelectList Categories { get; set; }
}

Controller / Action Method

初期表示の時点で複数項目が選択されるようにするため、int selected を int[] selected に代えて、それを MultiSelectList の第 4 引数に渡している点に注目してください。View に渡す Model も CategoryViewModel から MultiCategoryViewModel に変えています。

public async Task<IActionResult> Edit3()
{
    int[] selected = new int[] { 1, 3, 5 };
    var categoryList = await _context.Categories.ToListAsync();

    ViewBag.CategoryId = new MultiSelectList(categoryList,
                                             "CategoryId",
                                             "CategoryName",
                                             selected);

    var model = new MultiCategoryViewModel
    {
        Category = selected,
        Categories = new MultiSelectList(categoryList,
                                         "CategoryId",
                                         "CategoryName")
    };

    return View(model);
}

[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult Edit3(int[] categoryid, 
                           int[] categoryid2, 
                           int[] category)
{
    if (ModelState.IsValid)
    {
        return RedirectToAction("Index");
    }

    return View();
}

View

Model を CategoryViewModel から MultiCategoryViewModel に変えた以外は上記 (2) の View と同じです。

@model MvcCore5App.Controllers.MultiCategoryViewModel

@{
    ViewData["Title"] = "Edit3";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h1>Edit3</h1>

<div class="row">
    <div class="col-md-4">
        <form asp-action="Edit3">
            <div class="form-group">
                <label class="control-label" for="CategoryId">
                    @@Html.DropDownList 利用
                </label>
                @Html.DropDownList("CategoryId", null,
                    htmlAttributes: new
                    {
                        @class = "form-control",
                        multiple = "multiple"
                    })
            </div>
            <div class="form-group">
                <label class="control-label" for="CategoryId2">
                    タグヘルパー &lt;select&gt; + ViewBag 利用
                </label>
                <select id="categoryid2" name="categoryid2"
                        asp-items="@ViewBag.CategoryId"
                        multiple="multiple"
                        class="form-control">
                </select>
            </div>
            <div class="form-group">
                <label class="control-label" for="CategoryId2">
                    タグヘルパー &lt;select&gt; + Model 利用
                </label>
                <select asp-for="Category"
                        asp-items="Model.Categories"
                        multiple="multiple"
                        class="form-control">
                </select>
            </div>
            <div class="form-group">
                <input type="submit" value="Create"
                       class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

Tags: , , ,

CORE

JsonSerializer の Camel Casing

by WebSurfer 18. January 2021 21:18

.NET Core v3.x 以降の MVC や Web API アプリで .NET オブジェクトを JSON 文字列にシリアライズすると、以下の画像のように {"name":"value"} の "name" の先頭の文字が小文字になってしまうこと、さらにそれによりにデシリアライズに問題が出ること、その対処方法について書きます。

JSON 文字列

.NET Core MVC や Web API では、Core v3.x 以降 System.Text.Json 名前空間JsonSerializer クラスが JSON のシリアライズ/デシリアライズに用いられるようになったそうです。Core v2.x 以前は Newtonsoft.Json が使われていたという違いがあります。

上の画像の例ではシリアライズ対象のオブジェクトのクラス定義は以下のようになっており、プロパティ名の先頭は大文字ですが、JsonSerializer クラスを使ってシリアライズした結果の JSON 文字列では上の画像の通り "name" が "firstName", "lastName" と先頭の文字が小文字になっている点に注目してください。

public class Person
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
}

(上の画像で "value" が "\u592A\u90CE", "\u65E5\u672C" となっているのは、それぞれ "太郎", "日本" の Unicode が Unicode Escape Sequence という形にエスケープされた結果です。詳しくは先の記事「ASP.NET Core MVC の JSON シリアライズ」を見てください)

先頭文字が小文字になるのは Camel Casing と言って、変数などを camelCasing というように記述するものだそうです。(先頭が大文字、即ち CamelCasing というように書く場合もあるはずですがそこはちょっと置いときます)

なお、コンソールアプリで JsonSerializer クラスを使って以下のようにした場合は "name" は "FirstName", "LastName" となり、先頭文字が小文字になることはありません。ということは、MVC や Web API のフレームワークで Camel Casing にする設定がされているようです。

namespace ConsoleAppJson
{
    class Program
    {
        static void Main(string[] args)
        {
            var person = new Person
            {
                FirstName = "太郎",
                LastName = "日本"
            };

            string json = JsonSerializer.Serialize(person);
            Console.WriteLine(json);
        }
    }
}

"name" の先頭文字が小文字になると、例えば firstName となると困るのは、JSON 文字列を JavaScript オブジェクトにデシリアライズした後 "太郎" という値を取得するには <javascript object>.firstName というようにしなければならず、それを忘れて FirstName を使うと結果は undefined になってしまうことです。

さらに困るのは、 JSON 文字列を元の Person クラス(プロパティの先頭文字が大文字)にデシリアライズする場合です。JsonSerializer クラスのデシリアライザはデフォルトでは大文字小文字の区別をするのでデシリアライズできないという結果になります。(エラーは出ません。Person クラスを例に取ると FirstName, LastName プロパティが null になります)

シリアライズの際 Camel Casing を避ける("name" の先頭文字が小文字にならないようにする)方法ですが、Startup.cs で JsonSerializerOptions の PropertyNamingPolicy プロパティを null に設定してやることで可能です。

具体的には、Visual Studio のテンプレートで ASP.NET Core MVC / Web API プロジェクトを作成すると自動生成される Startup.cs のコードの中に services.AddControllersWithViews(); が含まれているはずなので、それに以下のように .AddJsonOptions(opttions => ... 以下のコードを追加します。

services.AddControllersWithViews().AddJsonOptions(options =>
{
    options.JsonSerializerOptions.PropertyNamingPolicy = null;
});

これで以下のような MVC アクションメソッドの Controller.Json メソッドによる JSON シリアライズでも、

public IActionResult Json()
{
    var person = new Person
    {
        FirstName = "太郎",
        LastName = "日本"
    };

    return Json(person);
}

以下のような Web API のアクションメソッドによる JSON シリアライズでも、

[Route("api/[controller]")]
[ApiController]
public class ValuesController : ControllerBase
{
    [HttpGet]
    public Person GetPerson()
    {
        var person = new Person
        {
            FirstName = "太郎",
            LastName = "日本"
        };

        return person;
    }
}

シリアライズされた結果の JSON 文字列 {"name":"value"} の "name" は、元の Person クラスのプロパティ名通り "FirstName", "LastName" となります。

(アクションメソッド個別に対応する場合は、MVC の場合は Controller.Json メソッドの第 2 引数に JsonSerializerOptions を設定することで可能です。Web API の場合は JsonSerializer.Deserialize メソッドを使って第 2 引数に JsonSerializerOptions を設定することで可能です)

さらに、"value" が Unicode Escape Sequence という形になるのを避けたいのであれば、options の設定に以下を追加すれば OK です。(セキュリティ上それが良いのかどうかの話は置いといてですが)

options.JsonSerializerOptions.Encoder = 
              JavaScriptEncoder.Create(UnicodeRanges.All);

最後にもう一つ、上に書いたデシリアライズする際の大文字小文字の区別の問題を回避する方法を書いておきます。これも JsonSerializerOptions の設定で可能で、以下のようにすれば大文字小文字の違いは無視します。(Newtonsoft.Jason と同じ結果になります)

Person person = JsonSerializer.Deserialize<Person>(json, 
                new JsonSerializerOptions 
                {
                    PropertyNameCaseInsensitive = true
                });

Tags: , , ,

CORE

Web API でファイルアップロード/ダウンロード

by WebSurfer 17. January 2021 17:41

ファイルをアップロード/ダウンロードする相手が ASP.NET Core 3.1 Web API の場合はどのようにすれば良いかについて書きます。

Web API へファイルアップロード

コードを書いてみましたが、先の記事「ASP.NET Core 3.1 Web API」に書いた、(1) Controller は ControllerBase クラスを継承、(2) ApiControllerAttribute 属性を付与、(3) ルーティングは RouteAttibute 属性を付与して設定、アクションメソッドに [HttpGet], [HttpPost] 属性を付与する以外は MVC の場合とほとんど変わりませんでした。

(MVC の場合は、先の記事「ASP.NET Core MVC でファイルアップロード」と「ASP.NET Core MVC でファイルダウンロード」を見てください)

それでこの記事の話は終わってしまうのですが、それではちょっとブログの記事としては寂しいし、今後の参考になるかもしれないので検証に使ったコードを下にアップしておきます。

Web API コントローラー/アクションメソッド

using Microsoft.AspNetCore.Mvc;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using System.IO;

namespace WebAPI.Controllers
{
    [ApiController]
    [Route("[controller]")]
    public class FileUpDownloadController : ControllerBase
    {
        // 物理パスの取得用
        private readonly IWebHostEnvironment _hostingEnvironment;

        public FileUpDownloadController(IWebHostEnvironment hostingEnvironment)
        {
            this._hostingEnvironment = hostingEnvironment;
        }

        [HttpPost]
        public async Task<IActionResult> PostFile(IFormFile postedFile)
        {
            string result = "";
            if (postedFile != null && postedFile.Length > 0)
            {
                // アップロードされたファイル名を取得。ブラウザが IE 
                // の場合 postedFile.FileName はクライアント側でのフ
                // ルパスになることがあるので Path.GetFileName を使う
                string filename = Path.GetFileName(postedFile.FileName);

                // アプリケーションルートの物理パスを取得
                // wwwroot の物理パスは WebRootPath プロパティを使う
                string contentRootPath = _hostingEnvironment.ContentRootPath;
                string filePath = contentRootPath + "\\" + 
                                  "UploadedFiles\\" + filename;

                using (var stream = new FileStream(filePath, FileMode.Create))
                {
                    await postedFile.CopyToAsync(stream);
                }

                result = filename + " (" + postedFile.ContentType +
                         ") - " + postedFile.Length +
                         " bytes アップロード完了";
            }
            else
            {
                result = "ファイルアップロードに失敗しました";
            }

            return Content(result);
        }

        [HttpGet]
        [ResponseCache(Duration = 0, 
            Location = ResponseCacheLocation.None, NoStore = true)]
        public IActionResult GetFile(string filename = "sample1.jpg")
        {
            if (string.IsNullOrEmpty(filename))
            {
                return NotFound("引数が null または空");
            }

            // アプリケーションルートの物理パスを取得
            string contentRootPath = _hostingEnvironment.ContentRootPath;

            // ダウンロードするファイルの物理パス
            string physicalPath = contentRootPath + "\\" + 
                                  "Files\\" + filename;

            if (!System.IO.File.Exists(physicalPath))
            {
                return NotFound("指定されたパスにファイルが無い");
            }

            // Content-Disposition ヘッダを設定(RFC 6266 対応してない)
            Response.Headers.Append("Content-Disposition",
                "attachment;filename="+filename);
            
            return new PhysicalFileResult(physicalPath, "image/jpeg");
        }
    }
}

アップロードの検証に使った View

@{
    ViewData["Title"] = "Upload";
}

<h1>Upload</h1>

<hr />
<div class="row">
    <div class="col-md-4">
        <form method="post" enctype="multipart/form-data">
            <div>
                <div>
                    <p>Upload file using this form:</p>
                    @* name 属性はモデルのクラスのプロパティ名と同じ
                       にしないとサーバー側でモデルバインディングさ
                       れないので注意。大文字小文字は区別しない。*@
                    <input type="file" name="postedfile" />
                </div>
            </div>

        </form>
        <div>
            <div>
                <input type="button" id="ajaxUpload" value="Upload" />
                <div id="result"></div>
            </div>
        </div>
    </div>
</div>

<script src="~/Scripts/jquery.js"></script>
<script type="text/javascript">
    //<![CDATA[
    $(function () {
        $('#ajaxUpload').on('click', function (e) {
            // FormData オブジェクトの利用
            var fd = new FormData(document.querySelector("form"));

            $.ajax({
                url: '/FileUpDownload',
                method: 'post',
                data: fd,
                processData: false, // jQuery にデータを処理させない
                contentType: false  // contentType を設定させない
            }).done(function(response) {
                $("#result").empty;
                $("#result").text(response);
            }).fail(function( jqXHR, textStatus, errorThrown ) {
                $("#result").empty;
                $("#result").text('textStatus: ' + textStatus +
                    ', errorThrown: ' + errorThrown);
            });
        });
    });
    //]]>
</script>

ダウンロードの検証はブラウザのアドレスバーにコントローラーの URL を入力して FileUpDownload を GET 要求すれば可能です。ファイル名はデフォルトで "sample1.jpg" となっていますが、クエリ文字列で別のファイルを指定できます。

Tags: , , ,

CORE

About this blog

2010年5月にこのブログを立ち上げました。その後 ブログ2 を追加し、ここは ASP.NET 関係のトピックス、ブログ2はそれ以外のトピックスに分けました。

Calendar

<<  January 2021  >>
MoTuWeThFrSaSu
28293031123
45678910
11121314151617
18192021222324
25262728293031
1234567

View posts in large calendar