ASP.Net Get HTML cell value for code behind by clicking - c#

I'm not a professional in C# and ASP.Net so please have some patience with me.
I have the following problem.
I'm using ASP.Net WebForm API with C# for creating a dashboard.
I have a generic HTML table (taken out from a sql query) which will be displayed. Now I want to implement the feature, that when the user clicks on a cell for example in the column ID, he should get an details view which is a bootstrap modal.
For that I need the ID value which is in this cell. How can I get this value?
With the value I will start a new sql query and more other specific informations are going to be shown.
Here is my aspx. structure:
<table id="MyTable" class="table table-striped table-bordered table-condensed table-responsive">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Typ</th>
<th>Something else</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<%=Tabelle.GetTable.dataTable_all%>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function () {
$('#MyTable').DataTable();
});
</script>
the variable dataTable_all is a string. So this is my table in HTML Code.
My Result for <tbody> is 366 rows big and here is an extract:
<tr>
<td>154789</td>
<td>Testproject X</td>
<td>Good</td>
<td>greencolored</td>
<td>01.01.2015</td>
</tr>
<tr>
<td>189365</td>
<td>Testproject B</td>
<td>Good</td>
<td>redcolored</td>
<td>08.01.2015</td>
</tr>
<tr>
<td>136471</td>
<td>Testproject Y</td>
<td>Bad</td>
<td>pinkcolored</td>
<td>15.04.2015</td>
</tr>
So how can I do it that when I click on for example ID 136471 that the value will be given to a variable in my c# code?

Change to:
<tr data-id="154789">
<td>154789</td>
<td>Testproject X</td>
<td>Good</td>
<td>greencolored</td>
<td>01.01.2015</td>
</tr>
<tr data-id="189365">
<td>189365</td>
<td>Testproject B</td>
<td>Good</td>
<td>redcolored</td>
<td>08.01.2015</td>
</tr>
<tr data-id="136471">
<td>136471</td>
<td>Testproject Y</td>
<td>Bad</td>
<td>pinkcolored</td>
<td>15.04.2015</td>
</tr>
Then use:
$('tbody tr').click(function() {
alert($(this).data('id'));
});
Working demo
https://jsfiddle.net/jknysneo/

Related

Mark item when it's selected

I am starting to learn asp.net and I am a totally noob.
So, I am trying to select a town and, in the right side I should get the list of all town (like in the picture above).
So I am trying to do like, when I select a town from left side it should be mark as selected as from the right side.
My code is below
<table class="table datatable-responsive datatable-medical-map" id="medProviders" style="width:100%">
<thead>
<tr class="bg-info">
<th>Medical Provider (* Choose one)</th>
<th>Distance (miles)</th>
<th>Duration</th>
</tr>
</thead>
<tbody>
#{ int i = 0;
foreach (var item in medProviders)
{
<tr class="sortList" style="cursor:pointer" id="increment-#i" data-id="#item.Id" data-lat="#item.Latitude" data-long="#item.Longitude">
<td>#item.Firstname</td>
<td id="distance-#i"></td>
<td id="duration-#i"></td>
</tr>
i++;
}
}
</tbody>
</table>
<p id="medicalValidation"></p>

Razor get value of input HTML bounded by foreach

I have one following table html, the data of rows in the table is looped by foreach.
Can I use Razor to get the value of each row into a List or an array in C#?
My C# code Razor (I tried this so far)
#{
var l = new List<string>();
l.Add(#<input id="updated_value2" data-bind="value:value,visible:isEditing()" />);
}
Here's my table
<table class="table table-hover">
<tbody data-bind="foreach: $root.mapJsons(parameters())">
<tr class="data-hover">
<td>
<strong>
<span data-bind="text:key" />
</strong>
</td>
<td>
#*display label and input for dictionary<value> false DIS true APP*#
<input id="updated_value" data-bind="value:value,visible:isEditing()" />
<label id="display_value" data-bind="text:value,visible:!isEditing()" />
</td>
</tr>
</tbody>
<thead>
<tr>
<th style="width: 30%">
Name
</th>
<th style="width: 30%">
Value
</th>
<th></th>
</tr>
</thead>
</table>
Your foreach loop is being executed client-side (looks like a KnockoutJS binding?) rather than server-side, so any Razor code you embed in the table is only going to be called once as it's rendered by the server. So the answer is no, you cannot populate a server-side list with this particular foreach loop.

How to get the count of tables in an html file with C# and html-agility-pack

This is a newbie question so please provide working code.
How do I count the tables in an html file using C# and the html-agility-pack?
(I will need to get values from specific tables in an html file based on the count of tables. I will then perform some math on the values retrieved.)
Here is a sample file with three tables for your convenience:
<html>
<head>
<title>Tables</title>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Phone</th>
<th>City</th>
<th>Number</th>
</tr>
<tr>
<td>Scott</td>
<td>555-2345</td>
<td>Chicago</td>
<td>42</td>
</tr>
<tr>
<td>Bill</td>
<td>555-1243</td>
<td>Detroit</td>
<td>23</td>
</tr>
<tr>
<td>Ted</td>
<td>555-3567</td>
<td>Columbus</td>
<td>9</td>
</tr>
</table>
<p></p>
<table border="1">
<tr>
<th>Name</th>
<th>Year</th>
</tr>
<tr>
<td>Abraham</td>
<td>1865</td>
</tr>
<tr>
<td>Martin</td>
<td>1968</td>
</tr>
<tr>
<td>John</td>
<td>1963</td>
</tr>
</table>
<p></p>
<table border="1">
<tr>
<th>Animal</th>
<th>Location</th>
<th>Number</th>
</tr>
<tr>
<td>Tiger</td>
<td>Jungle</td>
<td>8</td>
</tr>
<tr>
<td>Hippo</td>
<td>River</td>
<td>4</td>
</tr>
<tr>
<td>Camel</td>
<td>Desert</td>
<td>3</td>
</tr>
</table>
</body>
</html>
If you would, please SHOW how to send the results to a new text file.
Thanks!
I think this can be a starting point
var doc = new HtmlAgilityPack.HtmlDocument();
doc.LoadHtml(html);
var tables = doc.DocumentNode.Descendants("table");
int tablesCount = tables.Count();
foreach (var table in tables)
{
var rows = table.Descendants("tr")
.Select(tr => tr.Descendants("td").Select(td => td.InnerText).ToList())
.ToList();
foreach(var row in rows)
Console.WriteLine(String.Join(",", row));
}
Something like this:
HtmlDocument doc = new HtmlDocument();
doc.Load(myTestFile);
// get all TABLE elements recursively
int count = doc.DocumentNode.SelectNodes("//table").Count;
// output to a text file
File.WriteAllText("output.txt", count.ToString());

Retrieve element within html hierarchy

I have this piece of html code. I want to get the text inside the <div> tag using WatiN. The C# code is below, but I'm pretty sure it could be done way better than my solution. Any suggestions?
HTML:
<table id="someId" cellspacing="0" border="1" style="border-collapse:collapse;" rules="all">
<tbody>
<tr>
<th scope="col"> </th>
</tr>
<tr>
<td>
<div>Some text</div>
</td>
</tr>
</tbody>
</table>
C#
// Get the table ElementContainer
IElementContainer diagnosisElementContainer = (IElementContainer)_control.GetElementById("someId");
// Get the tbody element
IElementContainer tbodyElementContainer = (IElementContainer)diagnosisElementContainer.ChildrenWithTag("tbody");
// Get the <tr> children
ElementCollection trElementContainer = tbodyElementContainer.ChildrenWithTag("tr");
// Get the <td> child of the last <tr>
IElementContainer tdElementContainer = (IElementContainer)trElementContainer.ElementAt<Element>(trElementContainer.Count - 1);
// Get the <div> element inside the <td>
Element divElement = tdElementContainer.Divs[0];
Based on the given, something like this is how I'd go for IE.
IE myIE = new IE();
myIE.GoTo("[theurl]");
string theText = myIE.Table("someId").Divs[0].Text;
The above is working on WatiN 2.1, Win7, IE9.

Html Agility Pack - loop through rows and columns

How can I loop through table and row that have an attribute id or name to get inner text in deep down in each td cell? I work on asp.net, c#, and the newest html agility package. Please guide. Thank you.
An html file have several tables. One of them has an attribute id=main-part. In that identified table, there are many rows. Some of those rows have same attribute name=display. In those named rows, there are many columns which I have to extract text from. Something like this:
<body>
<table>
...
</table>
<table>
...
</table>
<table id="main-part">
<tr>
<td></td>
...
</tr>
<tr>
<td></td>
...
</tr>
<tr name="display">
<td>Jan</td>
<td>Feb</td>
<td>Mar</td>
...
</tr>
<tr name="display">
<td>Apr</td>
<td>May</td>
<td>June</td>
...
</tr>
<tr name="display">
<td>Jul</td>
<td>Aug</td>
<td>Sep</td>
...
</tr>
<tr>
<td></td>
...
</tr>
<tr name="display">
<td>Oct</td>
<td>Nov</td>
<td>Dec</td>
...
</tr>
<tr>
<td></td>
...
</tr>
</table>
<table>
...
</table>
</body>
You need to select these nodes using xpath:
foreach(HtmlNode cell in doc.DocumentElement.SelectNodes("//tr[#name='display']/td")
{
// get cell data
}
It worked! Thank you very much Oded.
HtmlDocument doc = new HtmlDocument();
doc.Load(#"C:/samplefolder/sample.htm");
foreach(HtmlNode cell in doc.DocumentNode.SelectNodes("//tr[#name='display']/td"))
{
string test = cell.InnerText;
Response.Write(test);
}
It showed result like JanFebMarAprMayJuneJulAugSepOctNovDec. How can I sort them out, separate by a space or a tab? Thank you.

Categories