Develop Reference

C# ASP.NET Need some idea on how to turn this hardcoded HTML Item boxes into Item info that I can took from the DB

I am creating a website that looks like eBay and I got some HTML template which I think I can use to integrate into the ASPX
However, I needed some help with this part,
If you look at the picture, you can see there are four boxes that include item
This is the html code
<div class="ltabs-item product-layout">
<div class="product-item-container">
<div class="left-block">
<div class="product-image-container second_img ">
<img src="image/demo/shop/resize/J5-270x270.jpg" alt="Apple Cinema 30"" class="img-responsive" />
<img src="image/demo/shop/resize/J9-270x270.jpg" alt="Apple Cinema 30"" class="img_0 img-responsive" />
</div>
<!--Sale Label-->
<span class="label label-sale">-15%</span>
<!--full quick view block-->
<a class="quickview iframe-link visible-lg" data-fancybox-type="iframe" href="quickview.html">Quickview</a>
<!--end full quick view block-->
</div>
<div class="right-block">
<div class="caption">
<h4>Cupim Bris</h4>
<div class="ratings">
<div class="rating-box">
<span class="fa fa-stack"><i class="fa fa-star fa-stack-1x"></i><i class="fa fa-star-o fa-stack-1x"></i></span>
<span class="fa fa-stack"><i class="fa fa-star fa-stack-1x"></i><i class="fa fa-star-o fa-stack-1x"></i></span>
<span class="fa fa-stack"><i class="fa fa-star fa-stack-1x"></i><i class="fa fa-star-o fa-stack-1x"></i></span>
<span class="fa fa-stack"><i class="fa fa-star fa-stack-1x"></i><i class="fa fa-star-o fa-stack-1x"></i></span>
<span class="fa fa-stack"><i class="fa fa-star-o fa-stack-1x"></i></span>
</div>
</div>
<div class="price">
<span class="price-new">$50.00</span>
<span class="price-old">$62.00</span>
</div>
</div>
<div class="button-group">
<button class="addToCart" type="button" data-toggle="tooltip" title="Add to Cart" onclick="cart.add('42', '1');"><i class="fa fa-shopping-cart"></i><span class="">Add to Cart</span></button>
<button class="wishlist" type="button" data-toggle="tooltip" title="Add to Wish List" onclick="wishlist.add('42');"><i class="fa fa-heart"></i></button>
<button class="compare" type="button" data-toggle="tooltip" title="Compare this Product" onclick="compare.add('42');"><i class="fa fa-exchange"></i></button>
</div>
</div>
<!-- right block -->
</div>
</div>
Basically when you look at the code, everything is hard coded, what I wanted to do is that every time the page loads, the item info will be taken from the DB and code-behind will supply the information then parse into that field.
How should I do that?

Take a look into this tutorial. https://www.tutorialspoint.com/asp.net/

To show your c# page with dynamic content,you should update your static HTML page with scripting language to get data from database and update UI
AngularJS is one of the Java script framework to create page with dynamic content

I assume you are developing with ASP.NET Web Forms as you mention ASPX files. If that is the case then you can use the runat = "server' attribute for the desired HTML elements. This way you can interact with them from your backend code. More on ASP.NET Web Forms and on HTML Server Controls and runat = "server" attribute

Unable to click button in popup using webdriver

I am trying to click a button using selenium webdriver. Working fine with the following XPath
driver.FindElement(By.XPath("html/body/div[36]/div[3]/div/button[1]")).click();
it clicks the button fine but if I try to find it using class then it wont click it
driver.FindElement(By.XPath("//div[#class='ui-dialog-buttonset']/button[1]")).click();
Any Idea what I am doing wrong. Actual source code is as follows:-
<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
::before
<div class="ui-dialog-buttonset">
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="button" role="button" aria-disabled="false">
<span class="ui-button-text"></span>
</button>
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="button" role="button" aria-disabled="false">
<span class="ui-button-text"></span>
</button>
</div>
::after
</div>
</div>

I see two buttons with the same class name. You could try this:
List<WebElement> list = driver.findElements(By.cssSelector("button[class=\"ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only\"]"));
//click on the first button
list.get(0).click();

you can try the contains operator "*" of css selector.
List<WebElement> mylist = driver.findElements(By.cssSelector("button[class*='ui-corner-all']"));
mylist[0].click();
you can visit this link for CSS Selector tutorial in Selenium with c#
http://binaryclips.com/2015/02/16/css-selectors-for-selenium-webdriver/

How to locate a dropdown from div?

Below is some html code.
<div id="ServiceTypeId_chzn" class="chzn-container chzn-container-single" style="width: 389px;">
<a class="chzn-single" tabindex="-1" href="javascript:void(0)">
<span>Choose an Option</span>
<div>
<b></b>
</div>
Upon clicking the dropdown the list pops up.
I'm trying to locate an element with the C# code below:
driver.FindElement(By.XPath("//div[#Id='ServiceTypeId_chzn']")).Click();
But I'm unable to locate it.

XPath is case-sensitive:
<div id="ServiceTypeId_chzn" class="chzn-container chzn-container-single" style="width: 389px;">
<a class="chzn-single" tabindex="-1" href="javascript:void(0)">
<span>Choose an Option</span>
<div>
<b></b>
</div>
id="ServiceTypeId_chzn"
//div[#Id='ServiceTypeId_chzn']
Should be: //div[#id='ServiceTypeId_chzn']

Linq to xml - access deep element

In C# i need to access element that is nested in many other elements. I could write a query by naming all of elements but that would be very time consuming. Is there any easy way to do this or maybe some generator?
for example i have a xml:
<div id="list_offers">
<div class="container">
<div id="header">
<div class="row">
<div class="space-on-sides">
<div class="sixteen columns relative">
<div class="logo">
<a href="/">
<img src="/images/design_resp/design/logo_profesia.png" width="113" height="76" alt="PROFESIA.SK - práca, zamestnanie, ponuky práce, brigáda, voľné pracovné miesto" title="PROFESIA.SK - práca, zamestnanie, ponuky práce, brigáda, voľné pracovné miesto" />
</a>
</div>
<div class="right-panel">
<a class="login-company small red button nice radius right hide-on-phones margin-on-left" title="Vstup pre firmy" href="/login_person.php?action=company_login">Vstup pre firmy</a>
<a class="login-company small red button nice radius right show-on-phones margin-on-left" href="/login_person.php?action=company_login">Firmy</a>
<a rel="nofollow" id="login_modal" class="small gray button nice radius right" title="Prihláste sa do konta" href="/login_person.php?action=login">Prihlásiť</a>
<div class="search">
<div class="relative hide-on-phones">
<form name="fulltextsearch" id="fulltextsearch" action="/search.php" method="get" onsubmit="if(document.getElementById('search').value=='HÄľadanie') return false; return true;" class="nice" />
<input name="which_form" type="hidden" value="simple" />
<input name="tab_name" type="hidden" />
<input name="search_anywhere" type="text" id="search" placeholder="HÄľadanie" tabindex="1" class="input-text expand" />
<input name="submit_search_simple" type="image" src="/images/design_resp/design/blank.png" alt="HÄľadaĹĄ" class="ico search-nosprite" /></form>
</div>
<div class="show-on-phones">
<a title="HÄľadajte ponuky práce podÄľa rĂ´znych kritĂ©riĂ">
</a>
</div>
</div>
<div class="row-header-favorite">
<div class="header-favorite">
<a title="Moje vybrané pracovné ponuky" class="ico-shopping-cart-toppanel" rel="nofollow" href="/user_details.php?action=show_my_offers&ref_top_panel=157">0</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
and i need access:
input name="tab_name" type="hidden"

You can use Linq to xml
var xDoc = XDocument.Load(pathToXmlFile); //XDocument.Parse(xmlstring);
var input = xDoc.Descendants("input")
.First(i=>(string)i.Attribute("name")=="tab_name");
XPath can be used too
var input = xDoc.XPathSelectElement("//input[#name='tab_name']");

If you need to access that element on server side, you'll need to add a runat attribute there (like this: runat="server"), to make it a server side control. I would strongly suggest making it a control of your page, then, so you can access it like any other variable. You would have to give it an ID, so at the very least you could fetch it through that property.
But! your problem seems to be more client side related, so I strongly, really strongly suggest you use jQuery instead. Get jQuery in your site, and it becomes as easy as:
$("input[name='tab_name']");
Or better yet, if you give it an ID:
$("#idYouGaveTotheField");

Using n2cms, How do I stop a div from automatically wrapped around my user controls

I'm trying to create a part which is essentially a list
<ul>
<n2:DroppableZone ID="zoneSlideshowItems" ZoneName="SlideshowItems" AllowExternalManipulation="true" runat="server"></n2:DroppableZone>
</ul>
I have another part that i drop multiple times onto the above zone:
<li>
<a href="<%= CurrentItem.Link %>">
<img src="<%=CurrentItem.ImageUrl %>" alt="<%= CurrentItem.Title %>" />
<div class="overlayBox">
<h1><%= CurrentItem.OverlayHeader %></h1>
<p><%= CurrentItem.OverlayText %></p>
</div>
<div class="overlayBoxBack">
</div>
</a>
</li>
However when i look at the page source, its adding a div around each element that i drop onto the zone:
<div class='uc slideshowItem'> <<<< That Guy!!
<li>
<a href="http://gigpig.fm">
<img src="/Upload/skal.jpg" alt="Anthony is Jacinta" />
<div class="overlayBox">
<h1>Anthony</h1>
<p>im trying to tell you something</p>
</div>
<div class="overlayBoxBack">
</div>
</a>
</li>
</div>
Does anyone know how to stop that div from being generated?
Cheers!