I am writing an application to generate an "Image Summary" of a directory. Image Summary being an HTML document with a table containing the images of that directory. I am attempting to create the HTML document with a StreamWriter. I want each Row (<tr>) to contain 6 images. How can I achieve this? I've searched and can't find a thing that helps.
I would use a ListView. Something like this should get you started:
<asp:ListView runat="server" ID="ListView1" DataSourceID="SqlDataSource1">
<LayoutTemplate>
<table runat="server" id="table1" >
<tr runat="server" id="itemPlaceholder" ></tr>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr runat="server">
<td runat="server">
<asp:Image ID="Image1" runat="server" ImageUrl='<%#Eval("ImageUrl") %>' />
</td>
</tr>
</ItemTemplate>
</asp:ListView>
This will just create a tr with a single td for every row of data. You would obviously want to create six td's with images instead of just one.
Easiest way, in my opinion, would be to start with Directory.GetFiles(). This will return a string[] of file paths.
From there, you could bind that collection to a Repeater. See the answer to this question for a slick way to show n number of elements per row. There's also a link to an article in that thread that shows how to do it with a ListView.
Messy example.. but works (I'm assuming you're not doing this from ASP.NET, as the others have assumed, since you're using a StreamWriter):
static void renderHTML(string folder, string outputFile, int imagesPerRow, params string[] extensions) {
string[] images = Directory.GetFiles(folder);
using (var sw = new StreamWriter(File.OpenWrite(outputFile))) {
sw.WriteLine("<!html><head><title>Example</title></head><body><table>");
int counter = 0;
sw.Write("<tr>");
foreach (string image in images.Where(x => extensions.Any(y => x.Contains(y)))) {
if (counter == imagesPerRow) {
sw.Write("</tr>");
sw.Write("<tr>");
counter = 0;
}
sw.Write("<td style=\"border: 1px solid;\">");
sw.Write(string.Format("<img src=\"{0}\" />", image));
sw.Write("</td>");
counter++;
}
sw.Write("</tr></table></body></html>");
}
}
You can call it like so:
renderHTML(#"C:\folder", #"C:\output.html", 6, new string[] { ".jpg", ".png", ".gif" });
Related
I've got a ListView control that uses a custom data source. It will be a database soon, but for now I am still trying to get it running.
In the HTML of my form, I have the following code:
<%-- Ref: https://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.listview.layouttemplate.aspx --%>
<asp:ListView ID="lvOfficers" runat="server"
OnSelectedIndexChanging="lvOfficers_SelectedIndexChanging"
OnSelectedIndexChanged="lvOfficers_SelectedIndexChanged">
<LayoutTemplate>
<table id="tblOfficers">
<tr>
<th style="width:20%"></th>
<th colspan="2">Member Name</th>
<th style="width:20%"></th>
<th style="width:20%"></th>
</tr>
<tr>
<th>Title</th>
<th>Last</th>
<th>First</th>
<th>Phone</th>
<th>Email</th>
</tr>
<asp:PlaceHolder ID="itemPlaceHolder" runat="server" />
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td><asp:Label ID="lblRank" runat="server" Text='<#Eval("Rank") %>'></asp:Label></td>
<td><asp:Label ID="lblLast" runat="server" Text='<#Eval("LastName") %>'></asp:Label></td>
<td><asp:Label ID="lblFirst" runat="server" Text='<#Eval("FirstName") %>'></asp:Label></td>
<td><asp:Label ID="lblPhone" runat="server" Text='<#Eval("HomePhone") %>'></asp:Label></td>
<td><asp:Label ID="lblEmail1" runat="server" Text='<#Eval("PersonalEmail") %>'></asp:Label></td>
</tr>
</ItemTemplate>
</asp:ListView>
In the code behind with the Page_Load, I populate the data:
protected void Page_Load(object sender, EventArgs e) {
if (!IsPostBack) {
GetOfficers();
}
}
protected void GetOfficers() {
lvOfficers.DataSource = Personnel.GetOfficers();
lvOfficers.DataBind();
}
I can step through in Debug mode and see that there are 8 elements of type Person in a ListView that my "GetOfficers" data factory churns out.
The Person class contains subclasses:
Phone class: for {Home, Cell, Work},
Address class {Primary, Secondary} that contain ranking logic to indicate contact methods, and
Membership class. One tracks a member's ID, JoinDate, and Expiration while a second instance tracks the same elements for LifeMembership.
Thinking this complex Person class was causing my problems, I edited the GetOfficers() method to use an anonymous list:
protected void GetOfficers() {
var officers = Personnel.GetOfficers();
var data = from o in officers
select new {
o.Rank,
o.LastName,
o.FirstName,
o.HomePhone,
o.PersonalEmail,
};
//var data = (from o in officers
// select new {
// o.Rank,
// o.LastName,
// o.FirstName,
// o.HomePhone,
// o.PersonalEmail,
// }).OrderBy(o => o.Rank).OrderBy(o => o.LastName);
lvOfficers.DataSource = data;
lvOfficers.DataBind();
}
I was pretty sure that was going to solve my problems at first, so I included the two OrderBy clauses. When it did not work, I commented it out to try again, but I still got no success.
No matter what I seem to try, the page displays with the "Eval" text showing instead of the actual data.
I'm guessing the answer is something simple that I am overlooking because I use this same technique to populate the data in other pages in the same project.
How do I get my data to show up?
You need % at the start like this:-
'<%# Eval("Rank") %>'
you need to add % sign at the start of eval
'<%#Eval("FieldName")%>'
Edit: Found the solution, and posted the answer below.
In my ASP.NET c# project, I have a ListView (ParentList) bound to a DataSource. Within the ParentList, inside the ItemTemplate, I have another Repeater (ChildList) bound to an attribute of each ListViewDataItem.
<asp:ListView ID="ParentList" runat="server" DataSourceID="objectDataSourceID" DataKeyNames="ID">
<ItemTemplate>
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("Attribute1") %>' />
</td>
<td valign="top">
<asp:Repeater ID="ChildList" runat="server" DataSource='<%# Eval("Attribute2ReturnsAnotherList") %>'>
<HeaderTemplate>
<ul>
</HeaderTemplate>
<ItemTemplate>
<li>
<%# DataBinder.Eval(Container.DataItem, "childAttribute") %>
</li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
</td>
</tr>
</ItemTemplate>
<LayoutTemplate>
...
</LayoutTemplate>
</asp:ListView>
The code above works just fine, everything renders great. Now I want to add a link that will show/hide the ChildList. Something like the below:
<td valign="top">
<a href="javascript:ToggleListVisibility()" >Show/Hide</a>
<asp:Repeater ID="ChildList" runat="server" DataSource='<%# Eval("Attribute2ReturnsAnotherList") %>'>
</asp:Repeater>
</td>
How can I achieve this? I can't just use getElementById as I normally would, as the ul lists are within a Repeater nested inside the ListView. I tried obtaining the parentNode, then accessing the children and toggling the visibility of the ul element within:
function ToggleListVisibility(source) {
var childrenlist = source.parentNode.children;
for (var i = 0; i < childrenlist.length; i++) {
if (childrenlist[i].tagName == 'ul') {
if (childrenlist.style.display == "none") {
childrenlist.style.display = "block";
} else {
childrenlist.style.display = "none";
}
}
}
}
<a href="javascript:ToggleListVisibility(this)" >Show/Hide</a>
but that didn't work. IE's 'error on page' gave me this error:
The parentNode is null or not an object.
I also tried setting the a runat="server" attribute to my ul element, then using <%# ulID.ClientID %> to pass the ul id to the Js function, but visual studio complained:
Server elements cannot span templates.
Finally, I tried just passing the ul object into the Js function, like this:
function ToggleListVisibility(src) {
if (src.style.display == "none") {
src.style.display = "block";
} else {
src.style.display = "none";
}
}
<a href="javascript:ToggleListVisibility(ulID)" >Show/Hide</a>
...
<ul id="ulID">
which works, but it toggles the visibility for the ChildList in all rows within my ParentList. I want it to only toggle the visibility for the ChildList in its own row.
I'm at a loss of what to do. JavaScript is not my forte, and I would appreciate if someone can provide some pointers. Thanks in advance.
Ok hopefully this will get you going - it worked for me in hiding a list. My source HTML looks like this:
<table>
<tbody>
...
<tr>
<td>
Hide
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</td>
</tr>
...
</tbody>
</table>
<script type="text/javascript">
function toggleListVisibility(src) {
var childrenList = src.nextSibling.nextSibling;
childrenList.style.display = "none";
}
</script>
Note I had to use two "nextSibling"'s due to a text node that is created right after the "hide" anchor. Depending on how you structure your HTML, that bit will be different.
I found the painfully simple answer that makes me feel like a doofus. All I needed to do is wrap my Repeater in a <div> element, then show/hide the entire thing.
<a href="javascript:ToggleListVisibility('<%# Container.FindControl("divWrapper").ClientID %>')" >Show/Hide</a>
<div id="divWrapper" runat="server">
<asp:Repeater ID="ChildList" runat="server">
</asp:Repeater>
</div>
function ToggleListVisibility(id) {
var wrapper = document.getElementById(id);
if (wrapper.style.display == "none") {
wrapper.style.display = "block";
} else {
wrapper.style.display = "none";
}
}
Hooray for overthinking!
I have a table in DB:
NOTICE(NUM,TITLE,CONTENT)
I use Repeater Control in ASP to show all the notices in DB, like:
+----------+------------+|
|title1 (readmore)|
|
|title2 (readmore)|
|
|title3 (readmore)|
......
+------------------------+
All I want is: I read a "title" then I clicked on (readmore), the new page will be opened ( show detail's notice) with the "content" of that notice. How can I assign the num of notice without display it to define the notice in next page?
I just assign the title to property Text of a Label ID="TITLE" because I want to show the title of each notice.
All information I want to show in the this page is: title and the readmore( link to the next page). So that I don't know how to assign the num
My asp page: notice.asp
<asp:Repeater ID="RepDetails" runat="server" >
<HeaderTemplate>
<table style=" width:565px" cellpadding="0" class="borber">
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<asp:Label ID="Title" runat="server" Text='<%#Eval("TITLE") %>' />
</td>
<td>
<asp:HyperLink ID="HyperLink1" runat="server" > (readmord)</asp:HyperLink>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
My C# code:notice.asp.cs
private void BindRepeaterData()
{
string sql = "select num,title from NOTICE";
DataTable ds = l.EXECUTEQUERYSQL(sql);
RepDetails.DataSource = ds;
RepDetails.DataBind();
}
And the next page: detailnotice.asp.cs
private void GetNotice()
{
string sql = "select * from NOTICE where num=" ;// num= the num of notice I choose in notice.asp page.
}
How can I assign a num in Label without display it? What property of Label Control or I should use a other Control ?
Hope you understand what I say. If you don't, please ask?
Basically the same as Sain but using the NavigateURL
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl='<%# Eval("NUM","~/detailpage.aspx?id={0}") %>' > (readmord)</asp:HyperLink>
hi you can ues anchor tag in place of hyper link button. you can pass num in the query string to the detail page.
<a href='detailpage.aspx?id=<%#Eval("NUM") %>'> (readmord)</a>
On details page you can get query string value and fetch details from database.
int myKey = 0;
if (!string.IsNullOrEmpty(Request.QueryString["id"]))
{
myKey = int.Parse(Request.QueryString["id"]);
// Use myKey to retrieve record from database
}
I am trying to create a page that has a variable number of FileUpload fields, depending on the number selected from a drop down list by the user.
my .apsx code is as follows;
<tr>
<td>Number of photo's to upload</td>
<td><asp:DropDownList ID="DLPhotoCount" runat="server" OnSelectedIndexChanged="OnSelectedIndexChanged_PhotoCount" AutoPostBack="true">
<asp:ListItem Text="..."></asp:ListItem>
<asp:ListItem Text="1"></asp:ListItem>
<asp:ListItem Text="2"></asp:ListItem>
</asp:DropDownList></td>
</tr>
<tr>
<td>Picture 1:</td>
<td><asp:FileUpload runat="server" ID="Pic1" Visible="false"/></td>
</tr>
<tr>
<td>Picture 2:</td>
<td><asp:FileUpload runat="server" ID="Pic2" Visible="false"/></td>
</tr>
<tr>
<td><asp:Button runat="server" ID="BtnUploadFiles" text="Upload Files" OnClick="OnClick_BtnUploadFiles" Visible="false"/></td>
</tr>
and my C# is;
protected void OnSelectedIndexChanged_PhotoCount(object sender, EventArgs e)
{
string Pic = "Pic";
int PicNo = Convert.ToInt32(DLPhotoCount.SelectedItem.Text);
if (DLPhotoCount.SelectedItem.Text != "...")
{
string StPicNo = Pic + PicNo;
do
{
FileUpload StPicNo.Visible = true;
PicNo = PicNo + 1;
}
while (PicNo < Convert.ToInt32(DLPhotoCount.SelectedItem.Text + 1));
BtnUploadFiles.Visible = true;
}
else
{
Pic1.Visible = false;
Pic2.Visible = false;
BtnUploadFiles.Visible = false;
}
}
Open to suggestions on any alternatives if this isn't the best way to achieve the required functionality
Its a good practice to create file upload control dynamically based on the value selected from dropdownlist.
Sample examples to add fileupload controls using javascript are available under below links
http://www.aspsnippets.com/Articles/Uploading-Multiple-Files-using-JavaScript-Dynamic-FileUpload-Controls-in-ASP.Net.aspx
http://www.codeproject.com/Articles/24914/Multiple-Dynamic-File-Uploading
The advantage of this is you dont have to do a condition check in code behind file and no code change required if your business requires to add more file upload controls in future.
The following is the design.
<table>
<tr>
<td>Project Title</td>
<td>Download Link</td>
</tr>
<tr>
<td><asp:Label ID="dlLbl" runat="server"></asp:Label></td>
<td><asp:Label ID="dlLink" runat="server"></asp:Label></td>
</tr>
</table>
And the following is the backend codes.
foreach (SPListItem objInnovationListItem in objInnovationList.Items)
{
if (Convert.ToString(objInnovationListItem["Innovation Approval Status"])== status)
{
countStatus++;
//Displays name of the document and download link
dlLbl.Text = objInnovationListItem["Project Title"].ToString();
dlLink.Text = "<a href='/RIDepartment/Innovation%20Submission/" + objInnovationListItem.File.Name + "'>Download</a><br>";
}
}
Hence, my question is, what can I do to allow the tables to dynamically accommodate the document and dl link when there's more than 1 in the loop?
Appreciate some code samples.
With your code style (manual creating html without web-controls) i recommend you to look on ASP.NET MVC side. But i can answer to your question:
First - you need to use asp:Repeater like this:
<table>
<tr>
<td>Project Title</td>
<td>Download Link</td>
</tr>
<asp:Repeater ID="repLinks" runat="server"
onitemdatabound="repLinks_ItemDataBound">
<ItemTemplate>
<tr>
<td>
<asp:Label ID="lblProject" runat="server" Text="Label"></asp:Label>
</td>
<td>
<asp:HyperLink ID="hlLink" runat="server">HyperLink</asp:HyperLink>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
second: you need to initialize your collection, that you want to display. For example: you want to display a collection of objInnovationListItem class:
public class objInnovationListItem
{
public string Name { get; set; }
public string Title { get; set; }
public override string ToString()
{
return Title;
}
}
you need do next:
// list - it's source List<objInnovationListItem>
var bindList = list.Where(p => objInnovationListItem["Innovation Approval Status"] == status); // filter your collection - replace you foreach and if statement
repLinks.DataSource = bindList; // set to repeater your displayed collection
repLinks.DataBind(); // bind your collection
and last - you need to indicate in your Repeater ItemTemplate how to display your objInnovationListItem instance - subscribe to event of your Repeater ItemDataBound:
protected void repLinks_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
var item = e.Item.DataItem as objInnovationListItem;
((Label) e.Item.FindControl("lblProject")).Text = item.Name;
((HyperLink) e.Item.FindControl("hlLink")).NavigateUrl = string.Format("/downloaduri?id={0}", item.Title);
}
Result will look like that:
I would use a repeater... Something like this (code might not be exact):
<table>
<tr>
<td>Project Title</td>
<td>Download Link</td>
</tr>
<asp:Repeater id="rptItems" runat="server">
<ItemTemplate>
<tr>
<td><asp:Label ID="dlLbl" runat="server"></asp:Label></td>
<td>Download<br></td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
and then in the ItemDataBound event of the repeater, do something like this:
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) {
((Label)e.Item.FindControl("dlLbl")).Text= ((SPListItem)e.Item.DataItem)["Project Title"].ToString();
}
Why don't you skip the server side controls, and just write the actual html?
Include this div in your aspx file:
<div runat="server" id="divTable"></div>
And put this in your Page_Load():
StringBuilder sb = new StringBuilder();
sb.Append("<table><tr><td>Project Title</td><td>Download Link</td></tr>");
for (int i = 0; i < 10; i++)
{
sb.AppendFormat("<tr><td>{0}</td><td><a href='{1}'>{1}</a></td></tr>", "Title", "Link");
}
sb.Append("</table>");
divTable.InnerHtml = sb.ToString();
You'll of course need to replace "Title" and "Link" with the appropriate values.
Your other options is to actually create new labels and links, but ASP.net is notoriously difficult to work with when you create your server side controls dynamically.