Extract html elements id with value from a string in ASP.NET Core

Question

I have a string which has the data of an html table with rows and column.

Each td has its unique id and values.

Now I need to extract the id with value of that id from that string.

String value:

<table id="tblProducts" width="100%" border="1" style="text-align:center">
    <tbody>
        <tr>
            <td>
                <input style="width:100%; text-align:center" id="slNo" maxlength="100" value="1" readonly="">
            </td>
            <td>
                <textarea style="width: 100%; text-align: center" id="Description">TEST</textarea > 
            </td>
            <td>
                <textarea style="width: 100%; text-align: center" id="Specification">UU</textarea > 
            </td>
            <td>
                <input style="width: 100%; text-align: center" id="HSNCode" value="uuu">
            </td>
            <td>
                <input style="width: 100%; text-align: center" id="Unit" value="ii">
            </td>
            <td>
                <input type="number" style="width: 100%; text-align: center" id="Qty" onchange="calculateValue(this)" value="33">
            </td>
            <td>
                <input type="number" style="width: 100%; text-align: center" id="Rate" onchange="calculateValue(this)" value="33">
            </td>
            <td>
                <input style="width: 100%; text-align: center" id="Value" class="totalTaxableValue" readonly="" value="1089">
            </td>
            <td>
                <button type="button" class="del_product btn btn-link" title="Delete" onclick="deleteRow()">
                    <span class="fa fa-trash" aria-hidden="true"></span>
                </button>
            </td>
        </tr>
        <tr>
                              <td>
                                  <input style="width:100%; text-align:center" id="slNo_2" maxlength="100" value="2" readonly="">
                              </td>
                              <td>
                                  <textarea style="width: 100%; text-align: center" id="Description_2">UU</textarea > 
                              </td>
                              <td>
                                  <textarea style="width: 100%; text-align: center" id="Specification_2">TEST</textarea > 
                              </td>
                              <td>
                                  <input style="width: 100%; text-align: center" id="HSNCode_2" value="uu">
                              </td>
                              <td>
                                  <input style="width: 100%; text-align: center" id="Unit_2" value="uu">
                              </td>
                              <td>
                                  <input type="number" style="width: 100%; text-align: center" id="Qty_2" onchange="calculateValue(this)" value="33">
                              </td>
                              <td>
                                  <input type="number" style="width: 100%; text-align: center" id="Rate_2" onchange="calculateValue(this)" value="33">
                              </td>
                              <td>
                                  <input style="width: 100%; text-align: center" id="Value_2" class="totalTaxableValue" readonly="" value="1089">
                              </td>
                              <td>
                                  <button type="button" class="del_product btn btn-link" title="Delete" onclick="deleteRow()">
                                      <span class="fa fa-trash" aria-hidden="true"></span>
                                  </button>
                              </td>
                          </tr>

                      </tbody></table>

I need to get

id = "slNo" value = "1"
id = "Description" value = "TEST"

Thanks in advance

input and textarea have both id attribute, but textarea has no value attribute. Which tag do you want to process, it's not clear from your description as there is no element with id=Description and value=TEST — bgman, Feb 02 '23 at 14:10
@bgman Probably the OP means extracting the contents of element if it has no `value` attribute. — SNBS, Feb 04 '23 at 22:04
Does this answer your question? [What is the best way to parse html in C#?](https://stackoverflow.com/questions/56107/what-is-the-best-way-to-parse-html-in-c) — Progman, Feb 05 '23 at 09:31

Nikhil Sawant · Answer 1 · 2023-02-02T06:54:43.980

You can try this:

const table = document.querySelectorAll('#tblProducts input, textarea')
let array = [];

function createArrayOfInputElements() {
  table.forEach(ele => {
    array.push({
      "id": ele.id,
      "value": ele.value.trim()
    })
  })
}

function print() {
  createArrayOfInputElements()
  console.log(array)
}

print();

<table id="tblProducts" width="100%" border="1" style="text-align:center">
  <tbody>
    <tr>
      <td>
        <input style="width:100%; text-align:center" id="slNo" maxlength="100" value="1" readonly="">
      </td>
      <td>
        <textarea style="width: 100%; text-align: center" id="Description">TEST</textarea>
      </td>
      <td>
        <textarea style="width: 100%; text-align: center" id="Specification">UU</textarea>
      </td>
      <td>
        <input style="width: 100%; text-align: center" id="HSNCode" value="uuu">
      </td>
      <td>
        <input style="width: 100%; text-align: center" id="Unit" value="ii">
      </td>
      <td>
        <input type="number" style="width: 100%; text-align: center" id="Qty" onchange="calculateValue(this)" value="33">
      </td>
      <td>
        <input type="number" style="width: 100%; text-align: center" id="Rate" onchange="calculateValue(this)" value="33">
      </td>
      <td>
        <input style="width: 100%; text-align: center" id="Value" class="totalTaxableValue" readonly="" value="1089">
      </td>
      <td>
        <button type="button" class="del_product btn btn-link" title="Delete" onclick="deleteRow()">
          <span class="fa fa-trash" aria-hidden="true"></span>
        </button>
      </td>
    </tr>
    <tr>
      <td>
        <input style="width:100%; text-align:center" id="slNo_2" maxlength="100" value="2" readonly="">
      </td>
      <td>
        <textarea style="width: 100%; text-align: center" id="Description_2">UU</textarea>
      </td>
      <td>
        <textarea style="width: 100%; text-align: center" id="Specification_2">TEST</textarea>
      </td>
      <td>
        <input style="width: 100%; text-align: center" id="HSNCode_2" value="uu">
      </td>
      <td>
        <input style="width: 100%; text-align: center" id="Unit_2" value="uu">
      </td>
      <td>
        <input type="number" style="width: 100%; text-align: center" id="Qty_2" onchange="calculateValue(this)" value="33">
      </td>
      <td>
        <input type="number" style="width: 100%; text-align: center" id="Rate_2" onchange="calculateValue(this)" value="33">
      </td>
      <td>
        <input style="width: 100%; text-align: center" id="Value_2" class="totalTaxableValue" readonly="" value="1089">
      </td>
      <td>
        <button type="button" class="del_product btn btn-link" title="Delete" onclick="deleteRow()">
          <span class="fa fa-trash" aria-hidden="true"></span>
        </button>
      </td>
    </tr>

  </tbody>
</table>

As I understood the question, the OP needs C# code. – SNBS Feb 02 '23 at 06:52 — SNBS, Feb 02 '23 at 06:52

SNBS · Answer 2 · 2023-02-04T22:07:19.213

As far as HTML is based on XML, you can use XmlReader to get the necessary data, like this:

using System.IO;
using System.Xml;

// ...

var stream = new MemoryStream();
var writer = new StreamWriter(stream);
writer.Write("YourHTML");
writer.Close();

// Now we have a stream with your HTML, let's load it into an XmlReader

using (var reader = XmlReader.Create(stream)) {
  while (reader.Read()) {
    if (reader.NodeType == XmlNodeType.Element && reader.Name == "td") { // Finding td elements
      reader.Read(); // Moving to the inner input element

      if (reader.NodeType == XmlNodeType.Element && reader.Name == "input") { // Checking it is what we need
        string? id = reader.GetAttribute("id"); // Getting ID
        string? @value = reader.GetAttribute("value"); // Getting value
        if (@value == null) @value = reader.ReadContentAsString(); // Getting element contents if it has no "value" attribute

        // Do what you want to do with ID and value
      }
    }
  }
}

Variable id will be null if there's no id attribute in the input (same with variable @value).

Note: symbol @ before variable name tells that the identifier after it should be treated as an identifier, not as a keyword (value is a C# keyword).

Extract html elements id with value from a string in ASP.NET Core

2 Answers2