User-330204900 posted
Another Note: there are two methods to do the edit:
- Give a list of images from the specified folder [ImageUrl("~/images/{0}.png")] and let the user choose
- Let the user upload the file to the [ImageUrl("~/images/{0}.png")] folder and the pass the filename to the DB field.
This is option 1.
using System;
using System.Collections.Specialized;
using System.IO;
using System.Linq;
using System.Web.DynamicData;
using System.Web.UI;
using System.Web.UI.WebControls;
using Microsoft.Web.DynamicData;
public partial class FileImage_Edit : FieldTemplateUserControl
{
public override Control DataControl
{
get
{
return RadioButtonList1;
}
}
protected override void OnDataBinding(EventArgs e)
{
base.OnDataBinding(e);
//check if image exists
if (FieldValue == null)
return;
//format image url
string url;
var metadata = MetadataAttributes.OfType<ImageUrlAttribute><IMAGEURLATTRIBUTE>().FirstOrDefault();
if (metadata == null || String.IsNullOrEmpty(metadata.UrlFormat))
return;
// get images folder
String imagesDir = metadata.UrlFormat.Substring(0, metadata.UrlFormat.LastIndexOf("/") + 1);
// get a list of images in the ImageUrlAttribute folder
var dirInfo = new DirectoryInfo(Server.MapPath(imagesDir));
var imagesFolder = ResolveUrl(imagesDir);
var files = dirInfo.GetFiles();
int width = 50;
int height = 50;
var imageFormat = MetadataAttributes.OfType<ImageFormatAttribute>().FirstOrDefault();
if (imageFormat != null)
{
width = imageFormat.DisplayWidth;
height = imageFormat.DisplayHeight;
}
foreach (FileInfo file in files)
{
String fileName = file.Name.Substring(0, file.Name.LastIndexOf("."));
String img = String.Format
(
"<img src='{0}' alt='{1}' width='{2}' height='{3}' />",
imagesFolder + file.Name,
fileName,
width,
height
);
var li = new ListItem(img, fileName);
this.RadioButtonList1.Items.Add(li);
}
}
protected override void ExtractValues(IOrderedDictionary dictionary)
{
dictionary[Column.Name] = RadioButtonList1.SelectedValue;
}
protected void RadioButtonList1_DataBound(object sender, EventArgs e)
{
if (FieldValue != null)
{
var selectedImage = ((String)FieldValue).Substring(0, ((String)FieldValue).LastIndexOf("."));
for (int i = 0; i < RadioButtonList1.Items.Count; i++)
{
// set select image
if (selectedImage == RadioButtonList1.Items[i].Value)
{
RadioButtonList1.Items[i].Selected = true;
}
}
}
}
}
Above is the FileImage_Edit.ascx.cs
<%@ Control Language="C#"
AutoEventWireup="true"
CodeFile="FileImage_Edit.ascx.cs"
Inherits="FileImage_Edit" %>
<asp:RadioButtonList ID="RadioButtonList1" runat="server"
RepeatDirection="Horizontal"
RepeatLayout="Flow">
</asp:RadioButtonList>
Above is the FileImage_Edit.ascx
Of course you will need a folder with some images in here is my Metadata also:
[MetadataType(typeof(FileImageTestMD))]
public partial class FileImageTest : INotifyPropertyChanging, INotifyPropertyChanged
{
}
public class FileImageTestMD
{
public object Id {get;set;}
public object Description {get;set;}
[UIHint("FileImage")]
[ImageUrl("~/images/{0}.png")]
[ImageFormat(50,50)]
public object filePath {get;set;}
}
Hope this helps I'll blog a bit more about this and option two in the next few days
