We Keep Coding

How Send text to textarea in webbrowser C#

This is the textarea. I want to send value there but. There isnt name or id. I couldnt send value.
<div id="cke_1_contents" class="cke_contents cke_reset" role="presentation" style="height: 300px;">
<textarea style="width: 100%; height: 100%; resize: none; outline: currentcolor none medium; text-align: left; -moz-tab-size: 4;" dir="ltr" class="cke_source cke_reset cke_enable_context_menu cke_editable cke_editable_themed cke_contents_rtl" tabindex="0" role="textbox" aria-multiline="true" aria-label="ویرایش‌گر متن غنی, txtPostContent" title="ویرایش‌گر متن غنی, txtPostContent"></textarea>
</div>

you can set the value of textarea inside the WebBrowser component by executing the below code
//get the main div HTML element by ID
var cke1ContentsElements = webBrowser1.Document.GetElementById("cke_1_contents");
//from main div select all HTML elements with the tag name "textarea"
var cke1TextareaList = cke1ContentsElements.GetElementsByTagName("textarea");
//from the selected list of items set value attribute for first element
cke1TextareaList[0].SetAttribute("value", "Send This String To TextArea ");

ASP.NET C# Dynamic Element Styling and Events

I am currently dynamically generating ASP elements on a website. The site displays items for a specific motorcycle based on the make/model/year.
Issue 1: I have all of the items displaying correctly, on the page, but I cannot figure out how to get my CSS styling to apply to the dynamically generated items.
Heres what I have, it querys the items into a datatable first:
try
{
int tempflag = 0;
foreach (DataRow tempRow in dt.Rows)
{
string tempCategory = tempRow[4].ToString();
string tempPartUrl = tempRow[5].ToString();
string tempImageUrl = tempRow[6].ToString();
string tempPartBrand = tempRow[7].ToString();
string tempPartName = tempRow[8].ToString();
string tempPrice = tempRow[9].ToString();
string tempStoreName = tempRow[10].ToString();
//panel to hold an item
Panel pnlItem = new Panel();
pnlItem.ID = "id_pnItem_" + tempflag;
pnlItem.CssClass = "itemDiv";
divSearchResultsBody.Controls.Add(pnlItem);
//image
Image tpImg = new Image();
tpImg.ID = "id_tpImg_" + tempflag;
tpImg.ImageUrl = tempImageUrl;
pnlItem.Controls.Add(tpImg);
Label lblBR = new Label();
lblBR.ID = "frt" + tempflag;
lblBR.Text = "<br />";
pnlItem.Controls.Add(lblBR);
//brand
Label lblBrand = new Label();
lblBrand.ID = "id_lblBrand_" + tempflag;
lblBrand.Text = tempPartBrand;
pnlItem.Controls.Add(lblBrand);
//name
Label lblName = new Label();
lblName.ID = "id_lblName_" + tempflag;
lblName.Text = tempPartName;
pnlItem.Controls.Add(lblName);
//price
Label lblPrice = new Label();
lblPrice.ID = "id_lblPrice_" + tempflag;
lblPrice.Text = tempPrice;
pnlItem.Controls.Add(lblPrice);
//url
HyperLink hyp = new HyperLink();
hyp.ID = "id_link_" + tempflag;
hyp.NavigateUrl = tempPartUrl;
hyp.Text = "View Part";
pnlItem.Controls.Add(hyp);
tempflag++;
}
}
catch (Exception ex)
{
handleTheError(ex);
}
I'm not sure how to access my css sheet from the .aspx.cs. so all the elements are just smashed together one after another each in a panel.
Issue 2: I am also generating checkboxes based on the item's category's so I can create a filter. I grab distinct categories with a query and fill them into a datatable. I have all the checkboxes but I have no idea how to go about generating an event for them because they are dynamic, and I've only used events that are hard coded. The code is similar:
foreach (DataRow tempRow in dt2.Rows)
{
string tempCategory = tempRow[0].ToString();
CheckBox cbCategory = new CheckBox();
cbCategory.ID = "id_cbCategory_" + tempflag2;
cbCategory.Text = tempCategory;
divFilterCategory.Controls.Add(cbCategory);
tempflag2++;
}
Issue 3: There are two divs that are next to each other, one for filter results that are generated, and another for the item results that are generated. As I mentioned they both generate properly at the moment, but for some reason when the items generate it shoots the second div halfway down the page. Pics:Before searching, After searching, Filters halfway down the page
Heres what the initial design looks like
<div runat="server" id="divSearch" class="divCenterItems">
<table class="searchTable">
<tr style="width: 100%">
<td style="width: 29%">
<div runat="server" id="divSearchFiltersHeader" class="divSearchHeaders">
<asp:Label runat="server" ID="lblFilterResults" Text="Filter Results" CssClass="headerLabels"></asp:Label>
</div>
<div runat="server" id="divSearchFiltersBody">
<div runat="server" id="divFilterCategory"></div>
<div runat="server" id="divFilterBrand"></div>
<div runat="server" id="divFilterPrice"></div>
</div>
</td>
<td style="width: 69%">
<div runat="server" id="divSearchResultsHeader" class="divSearchHeaders">
<asp:Label runat="server" ID="lblSearchTitle" Text="Search Results Title" CssClass="headerLabels"></asp:Label>
</div>
<div runat="server" id="divSearchResultsBody">
<div runat="server" id="divItemsMSS"></div>
<div runat="server" id="divItemsRMATVMC"></div>
<div runat="server" id="divItemsDK"></div>
</div>
</td>
</tr>
</table>
</div>
Styles:
.divCenterItems
{
border: 1px solid black;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.searchTable
{
width: 100%;
padding-left: 5px;
padding-right: 5px;
}
.divSearchHeaders
{
border: 1px solid black;
background-image: url('../Resources/header.png');
background-repeat: no-repeat;
background-size: 100% 100%;
height: 30px;
}
.headerLabels
{
color: white;
font-size: 16px;
line-height: 2em;
padding-left: 10px;
}
Im not sure if any of these styles would be causing the filter div to act like this, but I've been playing around with them with no success. Any tips for tricks for these types of situations would be greatly appreciated, I'm new to dynamically generating elements. Cheers!

Issue 1:
Consider Using the Literal Web Control and putting html elements inside of the text with your desired classes.
var ltl = new Literal();
ltl.ID = "id_ltlName_" + tempFlag;
ltl.Text = $"<div class='class1'>{tempRow[1]}></div><div>{tempRow[2]}";
pnlItem.Controls.Add(ltl);
You could also create an ascx user control, and load instances of that dynamically if you want more functionality inside of the panel.
Issue 2
To add events to a dynamically created control, use the += operator to add a handler to be called when the event is fired. For Example, to handle the CheckChanged event for a checkbox. Remember that with dynamic controls, these event handlers have to be registered on every postback.
var checkbox1 = new CheckBox();
checkbox1.CheckedChanged += ClickedCheckBox;
private void ClickedCheckBox(object sender, EventArgs e)
{
var checkbox1 = sender as CheckBox;
}
Issue 3
You have 2 tds next to each other. Try vertical-align:top on both of them
<div runat="server" id="divSearch" class="divCenterItems">
<table class="searchTable">
<tr style="width: 100%">
<td style="vertical-align:top;width: 29%;">
</td>
<td style="vertical-align:top;width: 69%">
</td>
</tr>
</table>
</div>

Making a link work with no text in Sitecore

I am having a problem with how to display a link in Sitecore. Currently I have three fields that I use: Name, Title and Link. All three of these fields are within a div tag, so...
<div class="container">
<div class="name"><sc:FieldRenderer ID="ColumnName" FieldName="Name" runat="server" /></div>
<div class="title"><sc:FieldRenderer ID="ColumnTitle" FieldName="Title" runat="server" /></div>
<div class="link"><sc:FieldRenderer ID="ColumnLink" FieldName="Link" runat="server" /></div>
</div>
For regular view, the link tag is being displayed as just text (that is written in Sitecore) but when it switches to mobile view, the container becomes the link with the Name and Title as the only thing showing and taking away what is in the Link field. My problem is how do I make the container the same link as the one that displays as text in desktop view? Is there a way have the text not be displayed and put an overlay container ontop of everything but just have the background as transparency to make the container go to the same link? For the backend, I just used a Listview that contained everything to make the fields show:
protected void Page_Load(object sender, EventArgs e)
{
Item item = this.DataSourceItem;
lvContains.DataSource = ((MultilistField)item.Fields["Columns"]).GetItems();
lvContains.DataBind();
}
protected void lvContains_ItemDataBound(object sender, ListViewItemEventArgs e)
{
if (e.Item.ItemType == ListViewItemType.DataItem)
{
Item item = (Item)e.Item.DataItem;
((FieldRenderer)e.Item.FindControl("ColumnName")).Item = item;
((FieldRenderer)e.Item.FindControl("ColumnTitle")).Item = item;
((FieldRenderer)e.Item.FindControl("ColumnLink")).Item = item;
}
}

Assuming you are using a responsive design, for the mobile/tablet breakpoints you can add some additional CSS properties to make the link the full height/width of the parent container and hide the text:
.container { border: solid 1px red; position: relative; }
.name { border: solid 1px blue; }
.title { border: solid 1px green; }
.link a {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
font-size: 0;
color: transparent;
}
<div class="container">
<div class="name">Item Name</div>
<div class="title">Item Title</div>
<div class="link">Item Link</div>
</div>
If you are not using a responsive design, and using device detection, then you can add an additional CSS class to the link and modify the css to match:
.link a.mobile {
...
}
And add the CSS Class in code behind:
((FieldRenderer)e.Item.FindControl("ColumnLink")).CssClass = "mobile";

Dynamically created treeview format

EDIT
It was fixed by adding width: 100% to the css.
I have a dynamically created treeview that pulls locations as parent nodes and lists deals at those locations in the child nodes.The treeview is dynamically created, so it's not like I can put a div around it and format the div. I've tried that. The formatting in the div doesn't show up at all. I want the treeview to display like this:
_ Location A
____ Deal A
____ Deal B
____ Deal C
_ Location B
____ Deal A
____ Deal B
____ Deal C
But right now it displays centered and it looks ugly. I've tried using a div, I've tried using classes. The nodes refuse to left align and stay firmly in the center. I know the class is working because I can change the margins and the border and the background color, but nothing touches the actual text.
aspx:
<asp:MultiView ID="LoginView" runat="server">
<asp:View ID="VendorContent" runat="server">
<h2>My Locations</h2>
<hr style="margin-left: 10%; margin-right: 10%">
<br />
<div class="location" runat="server">
<div id="treeview" runat="server">
<asp:TreeView ID="LocationTreeView" runat="server" Value="Left" CssClass="treeview">
</asp:TreeView>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
</div>
<asp:Button runat="server" ID="saveChanges" OnClick="saveChanges_Click" Text="Save Changes" CssClass="save_treeview"/>
<a id="newDealLink" href="deals.aspx">Make a new deal</a>
</div>
</asp:View>
</asp:MultiView>
aspx.cs:
This is called in the page load if the view is a vendor:
private void loadVendorTree(UserInfo userinfo)
{
LocationTreeView.ShowCheckBoxes = TreeNodeTypes.All;
foreach (Location location in locations)
{
List<int> deal_IDs = new List<int>();
TreeNode node = new TreeNode(location.Address, location.Location_id.ToString());
node.ShowCheckBox = false;
foreach (Deal deal in deals)
{
TreeNode dealNode = new TreeNode(deal.Info, deal.Deal_id.ToString());
if(location.Deals.Contains(deal)){
dealNode.Checked = true;
}
else
{
dealNode.Checked = false;
}
deal_IDs.Add(deal.Deal_id);
dealNode.SelectAction = TreeNodeSelectAction.Select;
node.ChildNodes.Add(dealNode);
}
LocationTreeView.Nodes.Add(node);
}
}
css:
.treeview {
text-align: left;
margin: .5em 0;
padding-left: 0;
padding-right: 6em;
color: black;
border: 2px solid pink;
}
.save_treeview {
margin-left: .5em;
margin-bottom: .5em;
width: 10em;
}
.location {
text-align: left;
max-width: 45em;
margin: 0 auto;
background: rgba(255,255,255,0.5);
border: 2px solid #dcdaf1;
}
If anyone can help me or direct me to something that can I would really appreciate it.

maybe try nested unordered lists like this:
<ul>
<li>Location A</li>
<li>
<ul>
<li>Deal A</li>
<li>Deal B</li>
<li>Deal C</li>
</ul>
</li>
<li>Location B</li>
<li>
<ul>
<li>Deal A</li>
<li>Deal B</li>
<li>Deal C</li>
</ul>
</li>
</ul>
Then just style the unordered lists and list items with css and you are good.

"Dynamic" div between 2 "Static" divs [CSS][ASP.NET]

I have some problems with css that I need help with.
I have the following code:
<div class="UpperClass"></div>
<div class="LowerClass"></div>
Wit the following simple CSS:
.UpperClass{
background-color: red;
width: 50px;
height: 50px;
}
.MiddleClass{
background-color: green;
width: 50px;
height: 50px;
}
.LowerClass{
background-color: blue;
width: 50px;
height: 50px;
}
Now, in code behind I am dynamically adding the middle class div:
int count = 1; //Could be anything
foreach (var item in count)
{
Label placeholder = new Label();
StringBuilder sbExample = new StringBuilder();
sbExample.append("<div class='MiddleClass'></div>");
HtmlString text = new HtmlString(sbExample.ToString());
placeholder.Text = text.ToString();
this.Controls.Add(placeholder);
}
Now, all 3 divs are showing on the page, but the div with the middleclass is behind the upperclass, what I want is the upperclass to come first, then all middleclass divs and below that the lowerclass div, all nicely sorted below each other. How do I do that?
Thanks in advance.
EDIT:
Also, if I want a wrapper around it, how can I place it like this:
<div class="wrapper">
<div class="UpperClass">
</div>
//Middle class here
<div class="LowerClass">
</div>
</div>

On the front end have this:
<div class="UpperClass"></div>
<%= PopulateMiddleClass() %>
<div class="LowerClass"></div>
and on the backend
String PopulateMiddleClass()
{
String ret = "";
//loop through and populate string
return ret;
}
Or
<div class="UpperClass"></div>
<asp:PlaceHolder ID="MyPlaceHolder" runat="server"></asp:PlaceHolder>
<div class="LowerClass"></div>
Then on the backend
Page_Load(object sender, EventArgs e)
{
Literal literal = new Literal();
literal.Text = "<div class='MiddleClass'></div>";
MyPlaceHolder.Controls.Add(literal); // you could loop through and keep adding controls or you could compile them all into the one literal.
}
Hopefully this gets you on your way.

You can create one div with attribute runat="server" and use it as shown below :
Design Page:
<div class="wrapper">
<div class="UpperClass">
</div>
<div runat="server" id="divMiddle">
</div>
<div class="LowerClass"></div>
</div>
Code Behind :
int count = 1; //Could be anything
for (int i = 0; i < count; i++ )
{
Label placeholder = new Label();
StringBuilder sbExample = new StringBuilder();
sbExample.Append("<div class='MiddleClass'></div>");
HtmlString text = new HtmlString(sbExample.ToString());
placeholder.Text = text.ToString();
this.divMiddle.Controls.Add(placeholder);
}