I am using Netbeans to edit my HTML file. This is the first part of my HTML code file (I have some more code inside the head tags however that is not important):
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<!-- wrapper for the whole component -->
<div id="componentWrapper">
<!-- playlist -->
<div class="componentPlaylist">
<div class="menuHolder">
<div class="menuWrapper">
</div>
</div>
<div class="thumbHolder">
<div class="thumbWrapper">
The dynamic part is in my C# program that create automatic on the hard disk an event each X time and put for me in a directory some gif files along with one animated gif (the animated gif shows animation of the other gif files in the directory). In this part of the HTML after the line: <div class="thumbWrapper">
I need to add the dynamic part in this format for example:
<div class="playlist" data-address='mistique_ken_burns' data-title='mistique' data-transitionType='ken_burns' data-bgColor='#e5e5e5' data-playlistSize='165' data-duration="25000">
<ul>
<li data-address='image1' class='playlistItem' data-imagePath='media/category1/main/01.jpg' data-startScale="1.4" data-endScale="0.5" data-startPosition="tl" data-endPosition="br" data-link='http://www.google.com' data-target='_blank' data-description="hello quam. <a href='http://codecanyon.net/user/Tean' target='_blank'>Link</a>" data-youtube='F08U2yCxbYg'><a href='#'><img src='media/category1/thumb/01.jpg' width='120' height='80' alt=''/></a></li>
</ul>
</div>
There are more <li> </li> lines. The important thing here is inside the li tags:
data-address='image1' class='playlistItem' data-imagePath='media/category1/main/01.jpg'
image1 then the next one is image2 then image3 and so on...
Then playlistItem the next time I will add to the HTML a block like this inside div tags it will be playlistItem2 then playlistItem3....
And the links to the images now it's: media/category1/main/01.jpg
But next time next block it will be media/category2/main/01.jpg
Then in the end I have another some HTML code that I don't change and then in my C# program, I merge the three parts every time and upload the updated HTML file to my FTP.
The first part is static, then dynamic part, and in the end another static part.
My question is how do I build each time adding to the dynamic part?
For example on my hard disk I have new event inside one .jpg file.
The file uploaded to my FTP server.
So now the HTML code I need to add in the HTML file, for example:
<div class="playlist" data-address='mistique_ken_burns' data-title='mistique' data-transitionType='ken_burns' data-bgColor='#e5e5e5' data-playlistSize='165' data-duration="25000">
<ul>
<li data-address='image1' class='playlistItem2' data-imagePath='media/category2/main/01.jpg' data-startScale="1.4" data-endScale="0.5" data-startPosition="tl" data-endPosition="br" data-link='http://www.google.com' data-target='_blank' data-description="hello quam. <a href='http://codecanyon.net/user/Tean' target='_blank'>Link</a>" data-youtube='F08U2yCxbYg'><a href='#'><img src='media/category2/thumb/01.jpg' width='120' height='80' alt=''/></a></li>
</ul>
</div>
My question is how in C# I can dynamically update the HTML file in this part?
Hi you can use placeholders inside the html file. Those placeholders can be replaced at runtime as below:
string placeHolder = "<!--<<PLACEHOLDER>>-->";
string path = "C:\\test.html";
string dynamicContent = #"<div class='playlist' data-address='mistique_ken_burns' data-title='mistique' data-transitionType='ken_burns' data-bgColor='#e5e5e5' data-playlistSize='165' data-duration='25000'>
<ul>
<li data-address='image1' class='playlistItem' data-imagePath='media/category1/main/01.jpg' data-startScale='1.4' data-endScale='0.5' data-startPosition='tl' data-endPosition='br'
data-link='http://www.google.com' data-target='_blank' data-description='hello quam. <a href='http://codecanyon.net/user/Tean' target='_blank'>Link</a>'
data-youtube='F08U2yCxbYg'><a href='#'><img src='media/category1/thumb/01.jpg' width='120' height='80' alt=''/></a></li>
</ul>
</div>";
string content = File.ReadAllText(path).Replace(placeHolder, string.Concat(dynamicContent, placeHolder));
File.WriteAllText(path, content);
Related
I'm kinda new to C#, and I will appreciate any help, thanks.
Here's my problem: I created an Iframe but I cannot link it to my sidebar or rather I cannot display another HTML unto my Iframe
Here's my code
<header>
<!-- This is sidebar button along with its contents-->
<div id="mySidenav" class="sidenav">
<!--Contents of the sidebar-->
<a class="closebtn" onclick="closeNav()">X</a>
<!-- The problem starts here, for I don't know what to put -->
<!-- Option 1: -->
<!-- Option 2: --> <a> ##Html.ActionLink("Employment","emp", new{ target="iframe_a"}) </a>
Department Module
Leave Module
Allowance and Deduction
Salary Module
User Accounts
Reports
</div>
<div id="main" class="desHead">
<a class="openNav" onclick="openNav()">☰</a>
<h1>Payroll System</h1>
</div>
</header>
I'm trying to figure out how can i select only main nodes from a loaded HTML document as the following example:
<div id="main">
<p>paragraph 1</p>
<p>paragraph 2</p>
<img src="exzample.jpg" />
</div>
<div id="main2">
<div>some text</div>
<p>some text</p>
<img src="exzample.jpg" />
</div>
<p class="a_class">
<div>some text</div>
<span>some text</span>
</p>
I know I can iterate over all elements but in my case, I just need to get only the 3 blocks (in this example) from the loaded html. I do not know how can I select such nodes using SelectNodes function or any other function.
I'm using HtmlAgilityPack library.
Note: Main nodes can be any html tag (div, p, span and so on...)
/* will select all immediate descendats of the root node (which the document posted in this question is lacking).
I have alittle project using html, css, c# with razor syntax.
I have layout page (on the sheard folder) and I use renderbody().
On the layout page I ave an image("intro.png") that I want to be on all pages (because that I put the image on the layout page), but when I go to other pages on my little website the page doesn't apeear, it's appear only on the first page.
here is asection of my layout page:
<!-- Introduction -->
<header>
<h2>head?</h2>
</header>
<p>some text.</p>
<img src="Content/images/intro.png">
</section>
<div id="content">
#RenderBody()
<aside>
<section>
<header>
<h3>Categories</h3>
</header>
</section>
<section>
<header>
<h3>Archives</h3>
</header>
<ul>
<li>December 2008</li>
<li>January 2009</li>
<li>February 2009</li>
<li>March 2009</li>
</ul>
</section>
</aside>
</div>
instead of giving link to image this way:
<img src="Content/images/intro.png">
Use this :
<img src=#Url.Content("~/Content/images/intro.png")>
I think there is a problem with Image Path .. I think above answer will solve that problem..
I tried to get HTML Source in the following way:
webBrowser1.Document.Body.OuterHtml;
but it does not work. For example, if the original HTML source is :
<html>
<body>
<div>
<ul>
<li>
<h3>
Manufacturer</h3>
</li>
<li><a href="/4566-6501_7-0.html?
filter=1000036_3808675_100021_10194772_">Sony </a>(44)</li>
<li><a href="/4566-6501_7-0.html?
filter=1000036_108496_100021_10194772_">Nikon </a>(19)</li>
<li><a href="/4566-6501_7-0.html?
filter=1000036_3808726_100021_10194772_">Panasonic </a>(37)</li>
<li><a href="/4566-6501_7-0.html?
filter=1000036_3808769_100021_10194772_">Canon </a>(29)</li>
<li><a href="/4566-6501_7-0.html?
filter=1000036_2913388_100021_10194772_">Olympus </a>(21)</li>
<li class="seeAll"><a href="/4566-6501_7-0.html?
sa=1000036&filter=100021_10194772_" class="readMore">See all manufacturers </a></li>
</ul>
</div>
</body>
</html>
but the output of webBrowser1.Document.Body.OuterHtml is:
<body>
<div>
<ul>
<li>
<h3>
Manufacturer</h3>
<li>Sony (44)
<li>Nikon (19)
<li><a href="/4566-6501_7-0.html?filter=1000036_3808726_100021_10194772_">Panasonic
</a>(37)
<li>Canon
(29)
<li>Olympus
(21)
<li class="seeAll"><a class="readMore" href="/4566-6501_7-0.html?sa=1000036&filter=100021_10194772_">
See all manufacturers </a></li>
</ul>
</div>
</body>
as you can see, many </li> are lost.
is there a way to get HTML source in WebBrower control correctly? Note that in my application, I try to use WebBrowser to add coordinate info to every node and output its HTML source with coordinate info which is added as attributes of nodes.
anybody can do me a favor?
Try using DocumentText or DocumentStream properties.
Thank you all. My final solution is: first,using body.outlineHtml to get html source. because body.outlineHtml may miss end-tag for <li> and <td>, so the second step is using tidy to repair the HTML source. after these, we can get the HTML source without error
have you tried WebBrowser1.DocumentText
If you want to grab the entire HTML source of the WebBrowser control then use this - WebBrowser1.Document.GetElementsByTagName("HTML").Item(0).OuterHtml. This of course assumes you have properly formatted HTML and the HTML tag exists. If you want to narrow it down to just the body then obviously change the HTML tag to the BODY tag. This way you grab any and all changes after "DocumentText" has been set. Sorry, I'm a VB guy, convert as needed ;)
Have a look at this.
WebBrowser on MSDN
Alternative you could use Webclient.DownloadString from System.Net (it also has WebClient.DownloadStringAsync...) Here is the description: WebClient on MSDN
I have bunch of HTML code I am using to make rounded edge boxes on my controls. Is there a way to take this code and turn it into some kind of control or something so I do not have to keep pasting 10 lines of HTML code around everything I do?
<div id="BottomBody">
<div class="box1024" >
<div class="content1024">
<div class="top1024"></div>
<h1>My Header Information</h1>
<hr />
<p>Some text for everyone!</p>
</div>
<div class="bottom1024">
<div></div>
</div>
</div>
</div>
One additional thing to note, the number HTML tags used inside the inner most DIV will change depending on where I use it in my site. So in some cases I will only have 1 tag and 1 tag but in other cases I could have 1 tag, 1 tag, 3 tags, and a HTML table. How can I make that work?
Yes, you're thinking of a UserControl. Extract the relevant HTML out, paste it into a UserControl .ascx template.
Now in your case, you'll probably want the text to be customizable, am I right? So you'll need to replace the <h1> through </p> bit with an ASP.NET label. The resulting .ascx HTML (not counting the #Control directive) will look something like:
<div id="BottomBody">
<div class="box1024" >
<div class="content1024">
<div class="top1024"></div>
<asp:Label runat="Server" id="label1" />
</div>
<div class="bottom1024">
<div></div>
</div>
</div>
</div>
Alternatively, you could do two labels -- one for the header, one for the main text. Or even just have the header be runat="Server" itself.
Next, you'll write a little bit of code in the .ascx code-behind file to expose the label's (or labels', as the case may be) Text property. This would probably look something like:
public string Text
{
get { return label1.Text; }
set { label1.Text = value; }
}
If you're in an ASP.NET MVC world, use your Model data instead of a label, and pass in the desired display text string as the model data.
Edit
Addressing the update to the question:
One additional thing to note, the
number HTML tags used inside the inner
most DIV will change depending on
where I use it in my site. So in some
cases I will only have 1 tag and 1
tag but in other cases I could have 1
tag, 1
tag, 3 tags, and a HTML table. How can
I make that work?
The exact same technique, assuming that the content you're referring to is what's within <div class="content1024">. The Text property of a label can contain any desired arbitrary HTML, and of course you can pass any arbitrary amount of HTML as a string to the Model if you're using MVC.
Another left field approach - create a user control but use jQuery to round the corners for you:
<div class="roundcorner">
<h1>My Header Information</h1>
<hr />
<asp:Label runat="Server" id="label1" />
</div>
Issue the following in javascript:
$(document).ready(function(){
$('div.roundedcorner').corner();
});
This eliminates all your extra div's and you can still have a user control that you use at will on the server.
(I know I'm going to get in trouble for this from someone)
If its just static content you can just put it in a separate file and INCLUDE it
<!--#INCLUDE VIRTUAL="/_includes/i_yourfile.htm" -->
(File name, extension and location are arbitrary)