Question

I am trying to allow users to select an image and add some additional information to it.

I have an object that holds the additional info – lets just keep it simple and say its two strings – and an image

[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; }
}

For the Create view I want to show the users two text fields and a ‘gallary’ type layout of all existing iamges from the database.

I would like the iamge gallary part to be a partial view so I can reuse it elsewhere too.

I cannot figure out how to display the images and be able to see which one a use has selected in the controller to link them up. I imaging it will require some view specific models but beyond that I am drawing a blank.

Can someone point me in the right direction please.

ps. reason for storing ImageInfo and Image in seperate tables is that there will be many ImageInfo for each Image.

Answer 1

Yes. you need some view specific models. We will call it ViewModels. They are simple POCO classes to be used in the View. so let’s create 2 of them for our scenario.

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;}  
}

Now in the GET action, set the property values on an object of our viewmodel

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

Now our View will be strongly typed to our viewmodel

@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 will be a partial view which is strongly typed to a collection of ImageViewModel

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

Add some jquery code, so that when user selects an image, get the image id and set it to the Hidden variable(SelectedImageID) in our form so that it will be available when the form is posted.