I have a List which has information about images I want to display. Each image has 6 entries containing information about it and there are 20 images. 6 x 20 entries in total.
listImg[0] = image_name
listImg[1] = image_url
listImg[2] = other_info
listImg[3] = other_info
listImg[4] = other_info
listImg[5] = other_info
Now what I want to do is to display these images next to each other, in a horizontal line, wi开发者_如何学运维th the name of the image at the bottom of each image (overlapping, should just be done with a div tag and some style to it). The thing is that I can't figure out the best way of generating this image list.
Any suggestions with code snippets?
Thanks M
Perhaps create a class to better organize your image data, and then read from it when outputting your markup, e.g.
class MyImage
{
public string Name {get; set;}
public string Url {get; set;}
public List<string> OtherInfo {get; set;}
}
...
public List<MyImage> MyImages = new List<MyImage>();
...
var img = new MyImage {"Name","http://www.example.com"});
img.OtherInfo.Add("Info1");
img.OtherInfo.Add("Info2");
img.OtherInfo.Add("Info3");
string html = "";
foreach(var image in MyImages)
{
// Access image data and write it out. etc.
html+= String.Format("<div>{1}{2}</div>",image.Name, image.Url);
foreach(var info in image.OtherInfo)
{
html+= "<div>" + info + "</div";
}
}
// Write out your code to a literal, placeholder, etc.
MyLiteralControl.Text = html;
You could also achieve writing out the data by first creating your data on the backend, and then simply looping through your list in the actual markup before the page is rendered, e.g.
<html><head></head><body>
<div>My Images</div>
<% foreach(var image in MyImages) { %>
<div><%=image.Name%></div> <!-- format your markup here -->
<% } %>
</body>
</html>
Organizing your data outside of a simple 1-dimensional array will prove to be much more useful in maintaining and debugging your architecture. You can also create business objects to be used across your development, so your code is much more useful and you spend less time rewriting helper objects if the need ever arises to accomplish the same or variant of your logic.
Here is some rough pseudo code to try and explain:
class ImageInfo
{
string image_name;
string image_url;
//leavign out other_info since you don't say you are going to use it
}
List<ImageInfo> myImages = new List<ImageInfo>();
//load list
//Bind to listView
lv_Images.DataSource = myImages;
lv_Images.DataBind();
Pseudo code for your ListView
<listView>
<itemTemplate>
<div> <asp:Label text='<%# Bind("image_name") %>' /><br/><img src='<%# Bind("image_url") %>' />
.
.
.
.
Let me know if anything is confusing...
精彩评论