Getting the HTML source through the WebBrowser control in C# - c#

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

Related

Find element in Selenium using XPATH or CSS Selector

I m trying to find the element "import" using Selenium Webdriver in C#. Have tried the following codes but nothing find it.
driver.FindElement(By.XPath("//*[#class='menu_bg']/ul/li[3]")).Click();
driver.FindElement(By.XPath("//*[#id='import']/a")).Click();
driver.FindElement(By.CssSelector("#import>a")).Click();
driver.FindElement(By.XPath("//*[#class='menu_bg']/ul/li[3]/a")).Click();
driver.FindElement(By.CssSelector("ul[#class='menu_bg']>li[value='3']")).Click();
Please help me out. Design page looks like below:
<body>
<div class="header_bg"></div>
<div class="menu_bg">
<ul class="menu">
<li id="retrieve"></li>
<li id="scan" class="test"></li>
<li id="import">
<a target="main" href="import/import.aspx" onclick="clickme(this,'import')">Import</a>
</li>
<li id="admin"></li>
<li id="help"></li>
<li style="float: right;"></li>
</ul>
</div>
</body>
All the time I got the error as below:
unable to find the element
XPath indexers are 1-based, as opposed to most other languages whereby they are 0-based.
This means you are actually targetting the 2nd li element, which has no anchor element.
So:
//*[#class='menu_bg']/ul/li[3]/a
However, this XPath query is not great and is too strict on position - thus although this newly fixed XPath above should work, I'd advise you to think of something else.
By reviewing this link(Thanks to #Arran), the above issue was fixed. 'switching' to the current IFrame directs Selenium to show any requests to that frame instead.
driver.SwitchTo().Frame()
You can do this by chaining Selenium 'FindElement' like so;
driver.FindElement(By.Id("import")).FindElement(By.TagName("a"));
which will give you the child of the element with ID that has a tag of 'a'.
Another way you could do this is by casting your Driver to an IJavascriptExecutor and executing javascript directly in the browser using a JQuery selector. I find this better for more complex Selenium lookups;
((IJavascriptExecutor)Driver).ExecuteScript("$("a[target='main'][href='import/import.aspx'])").click();

<li class=disabled not working for disable an option in the menu

I will like to know how to disable ChoiceC from this menu if the user is not logon to the
current site using the loging page.
The ChoiceC option will be only available to the user which have connected to the site had been approved.
Can you provide me link or example on how to perform this task with C# ?
I tried to had the class="disabled" but it didn't do anything ie the option is still available.
<div id="menu">
<ul id="menua"; class="ul menua">
<li style="text-align:center;padding:9px;" class="smallwhitetext"></li>
<li>ChoiceA</li>
<li>MenuA
<ul>
<li>option 1</li>
<li>option 2</li>
</ul>
</li>
<li>Choice B</li>
<li class="disabled">
Choice C
</li>
</ul>
</div>
I'd recommend a two-step approach. First, don't have the C# code output the link in the list item if they're not logged in. Second, change the style of the list item by applying a class to that item to indicate to the user that they're not logged in and thus the item is unavailable.
Simply applying a class to that item wont work.
I'm not sure what method you use to build the menu and choices, but normally this could best be done when the page is generated at the server. Just wrap your conditional choice inside an if-statement where you check the approval. Here is some pseudo code for the old style:
<ul>
<li>ChoiceA</li>
<li>MenuA
<ul>
<li>option 1</li>
<li>option 2</li>
</ul>
</li>
<li>ChoiceB</li>
<% if( userIsAuthenticated) { %>
<li>ChoiceC</li>
<% } %>
</ul>
Now I know there are many ways to go about outputting HMTL with MVCs and templates and stuff, but since you didn't mention any specific technique I went for the old style.
Hope it helps!
EDIT
You could also skip the mixing of C# and HTML like one used to do in ASP and still do in PHP and others by simply:
if(userIsAuthenticated) {
Response.Write(#"<li>Choice C</li>");
}
The downside is that when you get a lot of quotes its easier to miss some and a bit harder to read. Plus you wont get code coloring for the HTML.
Note: The # is for verbatim string literals which escape every special character except quotes. You escape these using double quotes instead of the usual \.
<ul id="menua"; class="ul menua">
<li>Option A</li>
<li>Option B</li>
<% if(userIdAuthenticated) { %>
<li>Option C </li>'
<% } %>
</ul>
This is working but still have a small error.
The only error I got is the top ul which is underline in green with the following error message Validation (XHTML5) Text is not allowed between the opening and closing tag for element ul.

How to achieve (auto) code format selection of any html code via jQuery / C# ? (Any solution)

Our application can share code. For example user is sharing the html code as follows
<div id="nav-vert-one">
<ul>
{{for GroupCollection}}
<li>
{{:Name}}
('{{:GroupId}}')">
</li>
{{/for}}
</ul>
which is not in a perfect format .... Now i need to achieve the (auto) code formatting ...
i.e. after auto code format click, it should look like
<div id="nav-vert-one">
<ul>
{{for GroupCollection}}
<li> {{:Name}}
('{{:GroupId}}')"></li>
{{/for}}
</ul>
So, is there ready made plugin available or is there any way(s) to achieve it either via jQuery or C#?
There is a jQuery plugin called jquery-htmlClean: http://code.google.com/p/jquery-clean/
I tried it with your code sample, this is the output:
<div>
<ul>
{{for GroupCollection}}
<li>
{{:Name}} ('{{:GroupId}}')">
</li> {{/for}}
</ul>
</div>
You can try it here: http://www.antix.co.uk/Content/Demos/jQuery-htmlClean/Test.htm

How to control the rendering of a menu in Orchard

I have the following problem: I'm making a site in Orchard and have to apply a design made by some design company. They delivered html and CSS (+ LESS) and I have to make it into a theme.
I get it done for the most part except the menu's. I want to apply a class to the nav tag in the following code, but I can't make any alternates for that end up rendering it.
<article class="widget-navigation widget-menu-widget widget" shape-id="18">
<nav shape-id="19">
<ul class="menu menu-main-menu" shape-id="19">
<li class="current first" shape-id="22">
Home
</li>
<li shape-id="24">
Something1
</li>
<li shape-id="26">
Something2
</li>
<li class="last" shape-id="28">
Something3
</li>
</ul>
</nav>
</article>
How do I influence the rendering of my menu's so that I can apply proper CSS to it? The only alternates that I can make either contain only:
#Model.Text
or:
#Display(Model.Menu)
I think you can create a custom shape for the menu, inside Views/Menu-Main.cshtml, as explained on this page. From there on, you can pretty much do whatever you want to the shape. For example
#{
// Model is Model.Menu from the layout (Layout.Menu)
var tag = Tag(Model, "ul");
var items = (IList<dynamic>)Enumerable.Cast<dynamic>(Model.Items);
if (items.Any()) {
items[0].Classes.Add("first");
items[items.Count - 1].Classes.Add("last");
}
}
<nav class='my-custom-class'>
#tag.StartElement
#DisplayChildren(Model)
#tag.EndElement
</nav>
I haven't actually tried this so apologies if I'm not 100% correct, but this should get you in the right direction at least.
Also, the sample code above is just a slightly modified version of the original menu's code, best part about Orchard is that it's open source... You can view the original code here

Apply CSS for an HTML generic control like <UL> and <LI> in ASP.NET

I don't know how to apply CSS for a HTML generic control like <UL> and <LI> given runat="server" in ASP.NET. I am finding the <li> in a master page from a content page. Once I found that control I want to apply CSS.
<ul id="mainMenu" runat="server" style="width:350px;">
<li id="mainHome" runat="server"><a title="Home" href="#" class="home">Home</a></li>
<li id="mainManage" runat="server"><a title="Manage" href="#"
class="manage">Manage</a></li>
<li id="mainEnquiry" runat="server"><a title="Enquiry" href="#"
class="enquiry">Enquiry</a></li>
<li id="mainReport" runat="server"><a title="Report" href="#"
class="report">Reports</a></li>
</ul>
Please try this,
ull.Style.Add("background-color", "Red");
Or, I have tested this, will definitely work, please check
ull.Attributes.Add("class", "yourClass");
Edit:
To test this solution I have provided you:
make new blank master page and put <ul runat="server" id="ull">
then add a new page and use the above master page.
make findcontrol ul and put in CSS as I have mentioned in the answer.
then run your page, and view source of your HTML page and you will find what you are looking for. Like

Categories