0

ユーザーが画像を選択して追加情報を追加できるようにしようとしています。

追加情報を保持するオブジェクトがあります-単純にして、2つの文字列としましょう-および画像

[Table("ImageInfo")]
public class ImageInfo
{
    [Key]
    [DatabaseGeneratedAttribute(DatabaseGeneratedOption.Identity)]
    public int ImageInfoId { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }

    public Image Image { get; set; }
}

[Table("Image")]
public class Image
{
    [Key]
    [DatabaseGeneratedAttribute(DatabaseGeneratedOption.Identity)]
    public int IamgeId { get; set; }
    public byte[] ImageBytes { get; set; }
}

作成ビューでは、ユーザーに 2 つのテキスト フィールドと、データベースからのすべての既存の画像の「ギャラリー」タイプのレイアウトを表示したいと考えています。

iamge ギャラリー パーツを部分ビューにして、別の場所でも再利用できるようにしたいと考えています。

画像を表示する方法がわかりません。また、コントローラーでどの画像を使用してリンクを選択したかを確認することもできません。ビュー固有のモデルが必要になると思いますが、それ以上はブランクを描いています。

誰かが私を正しい方向に向けることができますか？

ps。ImageInfo と Image を別々のテーブルに格納する理由は、各 Image に多数の ImageInfo が存在するためです。

4

1 に答える 1

1

はい。ビュー固有のモデルが必要です。これを ViewModel と呼びます。ビューで使用する単純な POCO クラスです。シナリオ用に 2 つ作成しましょう。

public class AddUserImageViewModel
{
  public int UserId { set;get;}
  public List<ImageViewModel> AvailableImages { set;get;}
  public string Name { set;get;}
  public string Description { set;get;}  
  public int SelectedImageID { set;get;}
}    
public class ImageViewModel
{
  public int ID { set;get;}
  public string Name { set;get;}
  public string Description { set;get;}
  public string URL { set;get;}  
}

GETアクションで、ビューモデルのオブジェクトにプロパティ値を設定します

public ActionResult AddImage()
{
  var vm=new AddUserImageViewModel();
  vm.AvailableImages =repositary.GetAvailableImages();
  return View(vm);
}

これで、ビューはビューモデルに強く型付けされます

@model AddUserImageViewModel
<h2>Add image to profile</h2>
@using(Html.Beginform())
{   
  @Html.HiddenFor(m=>m.SelectedImageID)
  <input type="submit" />
}
@{ Html.RenderPartial("AvailableImages",Model.AvailableImages);  }

AvailableImagesのコレクションに強く型付けされた部分ビューになりますImageViewModel

@model List<ImageViewModel>
@foreach(var item in Model)
{
  <img src=@item.URL" id=@item.ID" alt="@item.Name" class="imgItem" />
}

jquery コードを追加して、ユーザーが画像を選択したときに画像 ID を取得し、それをフォームの隠し変数 ( SelectedImageID) に設定して、フォームが投稿されたときに使用できるようにします。

于 2012-10-18T17:47:20.577 に答える