0

I have a program where I`ll generate a HTML table and save it to a file, now the report has some column content which are quiet big and I dont want to display all of it at once, instead give a 'read more'/'read less' options? Is it possible to do that in C# html? I had referred 'Datatable to html Table' to do this.

I have seen posts using CSS we can do that but I dont have that option since I am generating this in C# building HTML table.

I want to add 'read more' option to the json text in the td tag below, am now even okay to add CSS within the code below.

HTML Code:

<tr align='left' valign='top'>
<td align='left' valign='top' style='width:100px' bgcolor='#F9F8F6'><font size='3'>{
    "quiz": {"sport": {    "q1": {        "question": "Which one is correct team name in NBA?",        "options": [            "New York Bulls",            "Los Angeles Kings",            "Golden State Warriros",            "Huston Rocket"        ],        "answer": "Huston Rocket"    }},"maths": {    "q1": {        "question": "5 + 7 = ?",        "options": [            "10",            "11",            "12",            "13"        ],        "answer": "12"    },    "q2": {        "question": "12 - 8 = ?",        "options": [            "1",            "2",            "3",            "4"        ],        "answer": "4"    }}
    }
} </font></td>
</tr>
DeSon
  • 147
  • 13
  • With JS, sure... – mjwills Jun 11 '19 at 10:43
  • You'll need either css or javascript. – Jamiec Jun 11 '19 at 10:43
  • @Jamiec not sure that's correct; i can think of ways of doing this on a machine that has JS disabled – Caius Jard Jun 11 '19 at 10:50
  • @CaiusJard I think you missed the "css or" part of my comment. – Jamiec Jun 11 '19 at 10:51
  • You implied this can only be done with CSS or with JS, like there was no way to tell a server to change the data it sent before those technologies existed. The OP provided the "without CSS" part of the spec, so when you said "you need CSS or JS" you effectively claimed that JS was the only other way... Hence why I said it could be done without JS (too) – Caius Jard Jun 11 '19 at 10:55

1 Answers1

0

Without CSS? So you dont want the server to send the full data to the client (in reduced mode) at all? Sure.. loads of ways, and we can't really help you pick one, but at its most simplistic you want to implement a way where you instruct the server to send full data or reduced data..

If you vary the URL query string parameters for a parameter that indicates the client wants the full data, and have it so that visiting e.g. http://myserver.com/ThePage.aspx?show=1234 gives the reduced data for record 1234, and visiting http://myserver.com/ThePage.aspx?showFull=1234 gives the full data for 1234, all you now need to do is code up your page so that it puts 

<a href='http://myserver.com/ThePage.aspx?showFull=1234'>see more</a>

at the bottom of the reduced page and 

<a href='http://myserver.com/ThePage.aspx?show=1234'>see less</a>

at the bottom of the full page

These days, a dynamic single page application would load the minimum amount of data, and have a see more, that would call to the server (via scripting) and retrieve more data and dynamically insert it into the page for display; it's certainly a slicker way of doing it and I would encourage you to pursue that path, but this answer is to outline how you might avoid using scripting too; just have a good old "request X and include a link to Y, request Y and include a link to X" style of toggling behavior

Edit: so you said your pages are static, which to me means not even involving C#, just straight HTML:

//full.html
<html><body><table>
  <tr><td>ROW ONE</td></tr>
  <tr><td>ROW TWO</td></tr>
  <tr><td>ROW THREE</td></tr>
  <tr><td>ROW FOUR</td></tr>
  <tr><td>ROW FIVE</td></tr>
  <tr><td><a href='reduced.html'>Show less</a></td></tr>
</table></body></html>

//reduced.html
<html><body><table>
  <tr><td>ROW ONE</td></tr>
  <tr><td><a href='full.html'>Show more</a></td></tr>
</table></body></html>

Here is no CSS, no script, no dynamic - just a toggle between showing less and showing more, and the user toggles the view by clicking to visit a different page..

To make this at least dynamic, have C# generate one or the other of these HTMLs based off a request parameter

Caius Jard
  • 72,509
  • 5
  • 49
  • 80
  • This takes JS I believe, how will I write JS here? Also the page is static and not dynamic and needs a simple solution. – DeSon Jun 11 '19 at 11:44
  • At what point did I write any javascript? When you say "the page is static", you mean it's literally just html? OK, so craft your full.html to have a link to reduced.html and craft your reduced.html to have a link to full – Caius Jard Jun 11 '19 at 13:43
  • This looks like it takes one or two more html files from what I understand from the code, I can`t create html files, also I need to display only hidden content and not TDs or TRs which I think you are trying to do from the code above. I see
    tag do that but that`s displaying the hidden text right below the tag which doesn`t look good, also doesn`t work on IE. It`s simple what I want, when we have 'abcdefghijklmn' I would like to display 'abcd read more', that`s it.
     – DeSon Jun 12 '19 at 06:46
  • I can't understand what you're asking – Caius Jard Jun 12 '19 at 08:04
  • Sorry about that! I have a html file(a static file with table) and I need to add 'read more' where ever the content exceeds lets say 200 chars, and it should display all the text once I click on 'read more' option. – DeSon Jun 12 '19 at 08:09
  • -I have added HTML code in my post above, kindly check if that helps. I apologies if wasnt clear enough. But my requirement doesn`t seem to be challenging. – DeSon Jun 12 '19 at 08:18
  • It's kinda challenging if you are refusing to use any sort of dynamic content manipulation (JS), CSS etc.. It can still be done but it massively depends on what level of control you're after.. If you have 1000 values in your column and only 20% of them were over 200 chars, would you want to be able to click something and show each value individually? Would you want a "show full values" link and it just reloads the page with all the long values on show? What you're asking for is hard because you're not fully specifying what you want and there are a ton of variables and what-ifs – Caius Jard Jun 12 '19 at 08:48
  • Yes! I want to display values individually, there are only 6 columns and only two of them will get huge content, so I guess it`s okay to put 'read more' individually to each of them. Let me know how you want me to do that? Like I said before it works with
    tag but it got some cons.
     – DeSon Jun 12 '19 at 09:48