Question

我正在尝试允许用户选择图像并向其添加一些其他信息。

我有一个包含附加信息的对象 - 让我们保持简单并说出两个字符串 - 和一个图像

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

对于Create视图，我想向用户显示两个文本字段以及数据库中所有现有iamges的'gallary'类型布局。

我希望iamge gallary部分是部分视图，所以我也可以在其他地方重复使用它。

我无法弄清楚如何显示图像，并能够看到控件中选择了哪一个用于链接它们。我成像它将需要一些特定的视图模型，但除此之外，我正在画一个空白。

请有人指出我正确的方向。

PS。将ImageInfo和Image存储在单独的表中的原因是每个Image都会有很多ImageInfo。

Answer 1

是。你需要一些视图特定的模型。我们称之为ViewModels。它们是在View中使用的简单POCO类。所以让我们为我们的场景创建其中的两个。

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操作中，在viewmodel的对象上设置属性值

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

现在我们的视图将强烈输入到我们的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将是一个部分视图，强烈输入ImageViewModel

的集合

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

添加一些jquery代码，以便在用户选择图像时，获取图像ID并将其设置为表单中的隐藏变量（SelectedImageID），以便在表单发布时可用。 / p>

从MVC中的库中选择图像

1 个答案: