Dynamic change of css class in the field - c#

I would like to change the color in the (td) field [change color - change / transfer to a different css class?]
Condition:
The condition comes from the "if" query. if (sb == true) then nothing changes, if (sb == false) "[else]"
then the css class in (td class="InputsForUserColor1") may change to class="InputsForUserColor1Change".
Notes
(td class="InputsForUserColor2") is unchanged
My html code (razor/C#):
the variable "sb" is outside "if", assumes a different value
#for (int sth = 0; sth< ViewBag.sth; sth++)
{
if (sb == true)
{
varSth = "00:00";
}
else
{
varSth = "20:00";
}
#for (int sthElse = 0; sthElse< ViewBag.sthElse; sthElse++)
{
if (nr_columns == 2)
{
<td id="td01" class="InputsForUserColor1"></td>
}
if (nr_columns == 3)
{
<td id="td01" class="InputsForUserColor2"></td>
}
}
}
My CSS code:
.InputsForUserColor1, area {
background-color: papayawhip;
border: hidden;
align-content: center;
align-items: center;
vertical-align: central;
}
.InputsForUserColor1Change, area {
background-color: white;
border: hidden;
align-content: center;
align-items: center;
vertical-align: central;
}
personally I didn't write it because I don't know how to approach it

If the color should only be set once, while the page is rendered on the server:
set the target class in a variable of the CSHMTL page (Razor C# code block with #{}).
use the value of this variable (Razor #variableName Syntax).
#* assume that 'sb' does not change its value inside the for loop *#
#{ var userColor1 = sb == true ? "InputsForUserColor1" : "InputsForUserColor1Change"; }
#for (int sth = 0; sth< ViewBag.sth; sth++) {
#for (int sthElse = 0; sthElse< ViewBag.sthElse; sthElse++) {
if (nr_columns == 2) {
<td id="td01" class="#userColor1"></td>
}
else if (nr_columns == 3) {
<td id="td01" class="InputsForUserColor2"></td>
}
}
}
This will render the HTML with the correct class set when the page is delivered to the client browser.
This will not work if the color needs to change due to user interactions on the client (browser) side. In this case, you have to use a client script (JavaScript) to change the color dynamically. To do this, see jQuery addClass.

Related

iTextSharp xmlworker - how to set dotted table border from html

Hello all you smart people of StackOverflow.
I was given a task yesterday to convert this scanned image to PDF document.
As I don't have time to learn all tips and tricks of iText, I decided to use xmlWorker and create an HTML template of the document itself.
I was quite successful, the ending result is this:
HOWEVER!
Not everything went smoothly. If you take a closer look at the scanned document, you may notice that in the middle of the document there is a table with dashed border. And this is where my headache starts.
I've been googling for the past 15 hrs trying to find a solution for this, but was not successful. I've tried all kinds of CSS border definitions like:
border-left-style: dashed;
border-style: dashed;
border: dashed;
It seems that these CSS definitions are simply ignored.
So my question is this, is there a proper way to define an HTML table with dashed border so it can be properly converted to PDF document?
I am using latest iTextSharp from Nuget (v. 5.5.12).
Thank you in advance.
Edit:
Ok, so 24 hrs later I think I have an answer.
It is a combination of these two examples:
http://codejaxy.com/q/395523/c-23-html-asp-net-itextsharp-xmlworker-using-itextsharp-xmlworker-to-convert-html-to-pdf-and-write-text-vertically
One cell with different border types
Basically I implemented IPdfPCellEvent interface so I could use a CellEvent on a PdfCell:
public class DottedCell : IPdfPCellEvent
{
private readonly int _border = 0;
public DottedCell(int border)
{
_border = border;
}
public void CellLayout(PdfPCell cell, Rectangle position, PdfContentByte[] canvases)
{
var canvas = canvases[PdfPTable.LINECANVAS];
canvas.SaveState();
canvas.SetLineDash(0, 2, 2);
cell.Border = Rectangle.NO_BORDER;
if ((_border & Rectangle.TOP_BORDER) == Rectangle.TOP_BORDER)
{
canvas.MoveTo(position.GetRight(1), position.GetTop(1));
canvas.LineTo(position.GetLeft(1), position.GetTop(1));
}
if ((_border & Rectangle.BOTTOM_BORDER) == Rectangle.BOTTOM_BORDER)
{
canvas.MoveTo(position.GetRight(1), position.GetBottom(1));
canvas.LineTo(position.GetLeft(1), position.GetBottom(1));
}
if ((_border & Rectangle.RIGHT_BORDER) == Rectangle.RIGHT_BORDER)
{
canvas.MoveTo(position.GetRight(1), position.GetTop(1));
canvas.LineTo(position.GetRight(1), position.GetBottom(1));
}
if ((_border & Rectangle.LEFT_BORDER) == Rectangle.LEFT_BORDER)
{
canvas.MoveTo(position.GetLeft(1), position.GetTop(1));
canvas.LineTo(position.GetLeft(1), position.GetBottom(1));
}
canvas.Stroke();
canvas.RestoreState();
}
}
After that I overrode a iTextSharp.tool.xml.html.table.TableData class:
public class TableDataProcessor : TableData
{
bool HasBorderStyle(IDictionary<string, string> attributeMap, string borderPosition, string borderStyle)
{
var hasStyle = attributeMap.ContainsKey("style");
if (!hasStyle)
{
return false;
}
var borderLeft = attributeMap["style"]
.Split(';')
.FirstOrDefault(o => o.Trim().StartsWith("border-style-" + borderPosition + ":"));
if (borderLeft != null)
{
return borderLeft.Split(':').Any(o => o.Trim().ToLower() == borderStyle);
}
return false;
}
public override IList<IElement> End(IWorkerContext ctx, Tag tag, IList<IElement> currentContent)
{
var cells = base.End(ctx, tag, currentContent);
var attributeMap = tag.Attributes;
if (HasBorderStyle(attributeMap, "left", "dotted"))
{
var pdfPCell = (PdfPCell) cells[0];
pdfPCell.CellEvent = null;
pdfPCell.CellEvent = new DottedCell(Rectangle.LEFT_BORDER);
}
return cells;
}
}
The last step was to add that class to tag processor for a TD element:
var tagProcessorFactory = Tags.GetHtmlTagProcessorFactory();
tagProcessorFactory.AddProcessor(
new TableDataProcessor(),
new[] {HTML.Tag.TD}
);
htmlContext.SetTagFactory(tagProcessorFactory);
And it works:
HTML markup:
<table class="content-wrapper">
<tbody>
<tr>
<td class="pcnt_60 content-left top" valign="top">
<table>
<tr>
<td style='border-left: 0.5px; border-style-left: dotted;'>content goes here</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>

How to change the text color of disabled Asp.net DropDownList

I searched for some time on this question and couldn't find a working answer anywhere.
I have an asp DropDownList that gets disabled and enabled based on whether the form is in view mode or not. The problem I was having is when the DropDownList.Enabled = false the text is hard to read(grey on lightgrey).
I solved the issue by passing the DropDownList to some methods.
public void DisableDDL(ref DropDownList DDL)
{
DDL.BackColor = System.Drawing.Color.LightGray;
foreach (ListItem i in DDL.Items)
{
if (i != DDL.SelectedItem)
{
i.Enabled = false;
}
}
}
public void EnableDDL(ref DropDownList DDL)
{
DDL.BackColor = System.Drawing.Color.White;
foreach (ListItem i in DDL.Items)
{
i.Enabled = true;
}
}
Is there another way to do this?
I tried using css but that didn't work.
<style>
.disabledStyle
{
color: black;
}
</style>
myDDl.CssClass = "disabledStyle";
There is no readonly property for the dropdownlist control. But you can move the focus to another control when it receives the focus and that will prevent it from being changed and leave the text black.
You need to apply the style to each individual ListItem, and not to the DropDownList itself
I have just put in a dropdownlist and put it to enabled false in the controller, then I found out that it has a class called "aspNetDisabled", I have tried to use CSS to change color on it, it works perfectly.
<style>
.aspNetDisabled
{
color: #FFF;
background-color: #000;
}
</style>
In the code, if you put the dropdownlist, "ddl.enabled = false", it will be like this:
<select name="DropDownList1" id="DropDownList1" disabled="disabled" class="aspNetDisabled"></select>
If the dropdownlists are surrounded by a div with a class, use the class to define the disabled ones:
<style>
.MyCssClass[disabled]
{
color: #FFF;
background-color: #000;
}
</style>
Or try
:disabled,[disabled]
{
-ms-opacity: 0.5;
opacity:0.5;
}
</style>
As said in here:
http://forums.asp.net/t/2028164.aspx?IE+11+disabled+buttons+links+not+shown+as+greyed+out
The simplest way to do that:
<style>
[disabled] { /* Text and background colour, medium red on light yellow */
color:#933;
background-color:#ffc;
}
</style>

Trouble with clicking on an image in running IE with SHDocVw

I am trying to simulate a click on a image in IE through C# using SHDocVw but have a problem. My program does not seem to find the img in the code.. Here is what I got:
SHDocVw.ShellWindows AllBrowsers = new SHDocVw.ShellWindows();
foreach (SHDocVw.InternetExplorer ieInst in AllBrowsers)
{
mshtml.IHTMLDocument2 htmlDoc = ieInst.Document as mshtml.IHTMLDocument2;
string html = htmlDoc.body.outerHTML;
foreach (mshtml.HTMLImg imgElement in htmlDoc.images)
{
if (imgElement.nameProp.ToString().Equals("icon_go.GIF"))
{
imgElement.click();
}
}
}
Here is a part of the html code im working on:
<TD align=center><INPUT title="View Detail Statistics" style="BORDER-LEFT-WIDTH: 0px; HEIGHT: 14px; BORDER-RIGHT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; WIDTH: 14px" src="../App_Themes/Company/Images/icon_go.GIF" type=image name=process1></TD></TR>
A problem is that the picture IS a button on the website but I dont know how to press it through the C# code.
Is there maybe another way to select the button? Like through the name "process1" instead of going for the image name?
As pointed out in your comment you are looping IMG but you should be looping INPUT:
foreach (IHTMLElement element in htmlDoc.all)
{
var input = element as IHTMLInputImage;
if (input != null && Path.GetFileName(input.src).Equals("icon_go.GIF", StringComparison.OrdinalIgnoreCase))
{
((IHTMLElement)input).click();
}
}

How to highlight element in selenium webdriver

I am trying to highlight (around the border) element that is found in selenium webdriver using C#. I have search the net all i found was java codes, but need it in C#.
or is there any other way to do it.
thanks
There is no native way to do this, but because Selenium allows you use to execute Javascript, you can accomplish it just with a little more work:
Therefore the question becomes "how do I change an elements borders in Javascript?"
If you use jQuery it's a little bit easier, you could find the element and then set some border properties. jQuery has a neat little css property that allows you to pass in a JSON dictionary of values, it will handle setting them all for you, an example would be like:
jQuery('div.tagged > a:first').css({ "border-width" : "2px", "border-style" : "solid", "border-color" : "red" });
That would find an element, and set it's border to be solid at 2px wide with a border colour of red.
However, if you already have an IWebElement instance of the element (likely) you can take the 'finding' responsibility out of jQuery/Javascript and make it simpler again.
This would be executed something like:
var jsDriver = (IJavaScriptExecutor)driver;
var element = // some element you find;
string highlightJavascript = #"$(arguments[0]).css({ ""border-width"" : ""2px"", ""border-style"" : ""solid"", ""border-color"" : ""red"" });";
jsDriver.ExecuteScript(highlightJavascript, new object[] { element });
If you just want basic Javascript, then you could make use of the .cssText property, which allows you to give a full string of CSS styles instead of adding them individually (although I don't know how supported it is cross browser):
var jsDriver = (IJavaScriptExecutor)driver;
var element = // some element you find;
string highlightJavascript = #"arguments[0].style.cssText = ""border-width: 2px; border-style: solid; border-color: red"";";
jsDriver.ExecuteScript(highlightJavascript, new object[] { element });
(Although there are more ways, I've just gone for the most verbose to make it clearer)
C# Extension Method: Highlights and Clears in 3 seconds.
using OpenQA.Selenium;
using OpenQA.Selenium.Chrome;
using OpenQA.Selenium.Remote;
using System.Reactive.Linq;
public static class SeleniumUtil
{
public static void Highlight(this IWebElement context)
{
var rc = (RemoteWebElement)context;
var driver = (IJavaScriptExecutor)rc.WrappedDriver;
var script = #"arguments[0].style.cssText = ""border-width: 2px; border-style: solid; border-color: red""; ";
driver.ExecuteScript(script, rc);
Observable.Timer(new TimeSpan(0, 0, 3)).Subscribe(p =>
{
var clear = #"arguments[0].style.cssText = ""border-width: 0px; border-style: solid; border-color: red""; ";
driver.ExecuteScript(clear, rc);
});
}
}
Thanks Arran i just modified your answer..
var jsDriver = (IJavaScriptExecutor)driver;
var element = //element to be found
string highlightJavascript = #"arguments[0].style.cssText = ""border-width: 2px; border-style: solid; border-color: red"";";
jsDriver.ExecuteScript(highlightJavascript, new object[] { element });
it works perfectly...
thanks once again.
Write below JavaScript Executor code in your Class file
public void elementHighlight(WebElement element) {
for (int i = 0; i < 2; i++) {
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript(
"arguments[0].setAttribute('style', arguments[1]);",
element, "color: red; border: 5px solid red;");
js.executeScript(`enter code here`
"arguments[0].setAttribute('style', arguments[1]);",
element, "");
}
Call the above method from Selenium test case to highlight a web page element. Check out below code which shows how it is done. elementHighlight method is called with searchBox as an argument.
#Test
public void GoogleSearch() throws Exception, SQLException {
driver.findElement(By.xpath("//center/div[2]")).click();
WebElement searchBox = driver.findElement(By.xpath("//div[3]/div/input"));
elementHighlight(searchBox);
driver.findElement(By.xpath("//div[3]/div/input")).clear();
driver.findElement(By.xpath("//div[3]/div/input")).sendKeys("Test");
driver.findElement(By.xpath("//button")).click();
}
On executing the above test, Selenium test will highlight the search box on Google home page. You can reuse elementHighlight method for highlighting any elements on web page.

Is it possible to do conditional statements in the CssClass property?

I'm using a repeater control. One of my item attributes is a boolean. I know I can do a conditional statement in the Text property, such as:
Text='<%# Item.Boolean ? "Text 1" : "Text 2" %>
However, what if I want the same text but a different CSS style depending on the boolean?
Is code like the following possible?
CssClass=<%# Item.Boolean ? "CssClass1" : "CssClass2" %>
You cannot do it like that. is not a runat server type of tag, so it cannot attempt to execute the logic there. Instead, you need to set the properties for the gridview in Page_PreRenderComplete.
Use something like the following to do it:
protected void Page_PreRenderComplete(object sender, EventArgs e)
{
this.FormatGridviewRows();
}
private void FormatGridviewRows()
{
foreach (GridViewRow row in this.GridView1.Rows)
{
// Don't attempt changes on header / select / etc. Only Datarow
if (row.RowType != DataControlRowType.DataRow) continue;
// At least make sure everything has the default class
row.CssClass = "gridViewRow";
// Don't affect the first row
if (row.DataItemIndex <= 0) continue;
if (row.RowState == DataControlRowState.Normal || row.RowState == (DataControlRowState.Normal ^ DataControlRowState.Edit))
{
row.CssClass = !this.cbForceOverride.Checked
? "gridViewRow"
: "gridViewRow gridViewRowDisabled";
}
if (row.RowState == DataControlRowState.Alternate || row.RowState == (DataControlRowState.Alternate ^ DataControlRowState.Edit))
{
row.CssClass = !this.cbForceOverride.Checked
? "gridViewAltRow"
: "gridViewAltRow gridViewAltRowDisabled";
}
}
}
and then in your stylesheet:
.gridViewRow {
background-color: #f2f2f2;
}
.gridViewAltRow {
background-color: #ffffff;
}
.gridViewRow, .gridViewAltRow {
color: #000000;
}
.gridViewRowDisabled, .gridViewAltRowDisabled {
color: #DDDDDD;
}

Categories