asp.netのコア2、カミソリのページで画像をディスクに取り込む方法

Question

私はasp.netフレームワークの初心者ですが、実際にそれを学び、適用することを奨励しています。 https://docs.microsoft.com/en-us/aspnet/core/tutorials/razor-pages/razor-pages-start

私はそれに従って、すべてが問題なく、私は新しいモデル、テーブルを追加するために渡されます。

public class Movie 
{ 
    public int ID { get; set; } 
    public string Title { get; set; } 
    public DateTime ReleaseDate { get; set; } 
    public string Genre { get; set; } 
    public decimal Price { get; set; } 
} 

と、以下のプロセスを作成するコードです：

以下

public async Task<IActionResult> OnPostAsync() 
    { 
     if (!ModelState.IsValid) 
     { 
      return Page(); 
     } 

     _context.Movie.Add(Movie); 
     await _context.SaveChangesAsync(); 

     return RedirectToPage("./Index"); 
    } 

からのセクションです：

 <div class="form-group"> 
      <label asp-for="Movie.Price" class="control-label"></label> 
      <input asp-for="Movie.Price" class="form-control" /> 
      <span asp-validation-for="Movie.Price" class="text-danger"></span> 
     </div> 

は、私たちがある作品のモデルがあるとし

今、私はフォームに新しいフィールドを追加して、 "Cover image"をアップロードしたいので、ユーザーはブラウズして選択することができます画像をカバーして、同じ形式でアップロードします。

私の質問は以下のとおりです。

• 私は、私は表示または削除するためにそれを使用することができますので、各映画は列 「CoverImage」を持って、DB内のファイル名を格納することだと思います。この良いです アプローチですか？

• ファイルを保存するのに最適な場所は何ですか？ "wwwroot"または別の フォルダにあるかどうかは関係ありませんか？

• 画像をアップロードするには、最新の方法はありますか？上のコードの3つのセクションで何を追加すればよいですか？私は検索を行い、多くのアプローチと方法を見つけましたが、私は最高のアプローチであるasp.netの専門家としてあなたから を知る必要があります。

Answer 1

イメージパスをテーブルに格納するには、まずテーブルに列を作成するために、エンティティクラスにプロパティを追加する必要があります。今

public class Movie 
{ 
    public int ID { get; set; } 
    public string Title { get; set; } 
    public DateTime ReleaseDate { get; set; } 
    public string Genre { get; set; } 
    public decimal Price { get; set; } 
    public string ImageName { set;get;} // This is the new property 
} 

はUIからファイルを受信するには、タイプfileの入力要素を追加し、タイプIFormFileフォームで今すぐ

public class CreateModel : PageModel 
{ 
    [BindProperty] 
    public Movie Movie { set; get; } 

    [BindProperty] 
    public IFormFile Image { set; get; } 
} 

のごPageModelクラスに新しいプロパティを追加する必要があります。フォームタグがenctype属性を持っていることを確認し、それは価値があなたのOnPost方法でmultipart/form-data今

<form method="post" enctype="multipart/form-data"> 
    <div asp-validation-summary="All"></div> 

    <input type="text" placeholder="Title" asp-for="Movie.Title"/> 
    <input type="text" placeholder="Genre" asp-for="Movie.Genre" /> 
    <input type="text" placeholder="Price" asp-for="Movie.Price"/> 
    <input type="file" asp-for="Image"/> 

    <button type="submit">Save</button> 
</form> 

に設定されているのです、あなたは、ページモデルのImageプロパティ値を読み込み、ディスクに保存することができます。 asp.netコアでは、wwwrootディレクトリは、静的資産を保持するための特別なディレクトリです。だからあなたはイメージをその下に保つかもしれない。 wwwrootの中にuploadsというサブディレクトリを作成します。

wwwrootディレクトリへのパスを取得するには、IHostingEnvironmentを使用します。だからあなたのページモデルクラスにそれを注入します。

public class CreateModel : PageModel 
{ 
    private readonly YourDbContext context; 
    private readonly IHostingEnvironment hostingEnvironment; 
    public CreateModel(YourDbContext context,IHostingEnvironment environment) 
    { 
     this.hostingEnvironment = environment; 
     this.context=context; 
    } 
    //Your existing code for properties goes here 
    public async Task<IActionResult> OnPostAsync() 
    { 
     if (!ModelState.IsValid) 
      return Page(); 

     if (this.Image != null) 
     { 
      var fileName = GetUniqueName(this.Image.FileName); 
      var uploads = Path.Combine(hostingEnvironment.WebRootPath, "uploads"); 
      var filePath = Path.Combine(uploads,fileName); 
      this.Image.CopyTo(new FileStream(filePath, FileMode.Create)); 
      this.Movie.ImageName = fileName; // Set the file name 
     } 
     context.Movie.Add(this.Movie); 
     await context.SaveChangesAsync(); 
     return RedirectToPage("MovieList"); 
    } 
    private string GetUniqueName(string fileName) 
    { 
     fileName = Path.GetFileName(fileName); 
     return Path.GetFileNameWithoutExtension(fileName) 
       + "_" + Guid.NewGuid().ToString().Substring(0, 4) 
       + Path.GetExtension(fileName); 
    } 
} 

これはwwwroot/uploadsにファイルを保存して、我々が保存されているMovieレコードのImageNameプロパティにイメージ名を格納します。したがって、イメージを表示する場合は、レコードを読み、ImageNameプロパティを使用してURLを作成します。 （例：aaa_9521.jpgムービーレコードImageNameプロパティ値から来る「yourSiteName/uploads/aaa_9521.jpg、）

たとえば、あなたのページのモデルはMovieエンティティのコレクションですMovies性質を持つ別のページに、あなたはこの

を行うことができます

<table>  
    @foreach (Movie m in Model.Movies) 
    { 
     <tr> 
      <td>@m.Title</td> 
      <td>@m.Price</td> 
      <td> 
       <img src="~/uploads/@m.ImageName"/> 
      </td> 
     </tr> 
    } 
</table>