HTML template for ASP controls - c#

I am writing an application that requires that my customer can layout their input forms in which ever way they choose.
I would like to use an HTML template with placeholders, and then replace these with secified .NET controls at runtime:
<table style="width: 100%;">
<tr>
<td colspan="2">
<fieldset title="Customers Template" >
<table style="width:100%;">
<tr>
<td width="140">
Policy Number:</td>
<td width="150">
$$Policy Number$$</td>
<td colspan="2" rowspan="3" valign="top">
Type 1:<br />
$$Type 1$$</td>
<td rowspan="3" valign="top">
Info:<br />
$$Info$$</td>
<td rowspan="3" valign="top">
Problems:<br />
$$Problems$$</td>
</tr>...
So I want to find and replace my $$xxx$$ text with various .NET controls, depending on the datatype of the field being added, at runtime.
Any suggestions on good ways to approach this?
Thanks,
Mark

Replace your $$xxx$$ blocks with <asp:PlaceHolder> controls.
At runtime you can parse the template
--- In the most simplest case, you can require the template be valid xhtml, then you can simply use the .NET XML APIs to iterate through all the ChildNodes of the XmlDocument. From each element build the appropriate ASP.NET Server control.
For a more complex (and complete HTML parser) see http://www.developer.com/net/csharp/article.php/2230091
As you parse, wherever you see <asp:PlaceHolder> - replace that with your logic that defines your template.
Tutorial: http://www.devhood.com/tutorials/tutorial_details.aspx?tutorial_id=752

If you're going to replace these placeholders with only strings take a look at NVelocity template engine. In this answer, I simply show how you can create an email by a template.
But for asp.net server controls, you can split your html template into chunks, and add them to your page as LiteralControl like that :
Page.Controls.Add(new LiteralControl(#"<td width='140'>
Policy Number:</td>
<td width='150'>"));
Page.Controls.Add(textBox1);
Page.Controls.Add(new LiteralControl(#"</td><td colspan='2' rowspan='3' valign='top'>
Type 1:<br />"));

Related

Regex c# html tags with specific attribute

I am new to Regular expression:( After lot of search for my requirement I was able to manage get answer but i do get extra results as explained below:
My String
<td valign="top" width="100%">
<td width="100%" valign="top">
<td valign="top" height="100%" width="100%">
<td valign="top">
My Expression
/<td (?=.*valign="top")(?=.*width="100%").*>/gm
My Result
<td valign="top" width="100%">
<td width="100%" valign="top">
<td valign="top" height="100%" width="100%">
Expected result
<td valign="top" width="100%">
<td width="100%" valign="top">
Conclusion: I want to extract TD tag that has valign and width attribute only with specific value.
Note : I have to parse through lots of data file hence HTMLAgility will slow down overall process.
Kindly guide me to final expression. Cheers
This seems to be doing it for me:
\<td\s+((valign="top"\s+width="100%")|(width="100%"\s+valign="top"))\s*>\gm
Your expression searches to see if the two attributes are somewhere ahead of the <td beginning. This one allows for whitespace, then searches for either valign="top" width="100%" or width="100%" valign="top", followed by more optional whitespace before the end of the td tag. This disallows all attributes except for the width and valign attributes.
With that said, there are always unexpected situations when using regex. You can test your regex expressions in real-time here: http://regexr.com/ Just type in your string and the regex expression to see what it selects.
EDIT:
If you want to account for both single quotes and double quotes around the attributes, try this one:
\<td\s+((valign=([",'])top\3\s+width=([",'])100%\4)|(width=([",'])100%\6\s+valign=([",'])top\7))\s*>\gm
Now I'm allowing for either a " or ' at the beginning of the attribute's value, and search for a match of whichever one was found at the end of the attribute's value.
Again, I encourage you to go to the website I linked above and play around with these yourself as well. I almost never use regex, but when I do I can usually find an expression that works for me with that website.

How to use table instead of gridview?

I dont know if the my question is good or bad or duplicate but I really want to ask you a favor.
My designer gave me grid design using html tables which looks quite handsome but when I use the same css classes in asp gridview it totally looks different.
Additional Info: In my project I have used Telerik grids. I have tried applying all the css at that too but of no use.
I cant change the designer css because its for all our company.
Now at last I want to use the same table as designer gave me and use it as grid but i really dont know how to fill it from datatable?
1. GridView generates/renders code in which it is difficult to impossible to modify.
2. I would stay away from Telerik as well.
3. Use Bootstrap CSS, you should be very happy with bootstrap css framework as you will get that look above very easily.
With Bootstrap you would use classes like class=table table-striped and you effectively have a nice grid with alternating row colors just like I see in the image that you posted.
With ASP.NET , use Nuget and install Bootstrap. Reference in Masterpage or layout.
I assume that you have styles that overwrite what your designer gave to you. Perhaps also if you are using THEIR stylesheets, make sure to overwrite the default styles. Either OMIT the style reference in master page etc... or place their stylesheet references below the default in say a asp.net web forms or mvc application. ( I assume web forms with masterpage since you are saying Gridview).
You can use ListView to include components. here is the example code for ListView.
<asp:ListView ID="ListView1" GroupPlaceholderID="group" GroupItemCount="1" ItemPlaceholderID="item" runat="server">
<LayoutTemplate>
<table>
<asp:PlaceHolder runat="server" ID="group"></asp:PlaceHolder>
</table>
</LayoutTemplate>
<GroupTemplate>
<tr>
<asp:PlaceHolder runat="server" ID="item"></asp:PlaceHolder>
</tr>
</GroupTemplate>
<ItemTemplate>
<td>
<table cellpadding="2" cellspacing="0" border="1" style="width: 200px; height: 100px">
<tr>
<td>
<span>
<%# Eval("Id") %>
</span>
</td>
</tr>
<tr>
<td>
Name: <span><%# Eval("Field_name_of_your_DB") %></span><br />
Number: <span><%# Eval("Field_name_of_your_DB") %></span><br />
Date: <span><%# Eval("Field_name_of_your_DB", "{0:MM dd, yyyy}") %></span><br />
Comment: <span><%# Eval("Field_name_of_your_DB") %></span><br />
</td>
</tr>
</table>
</td>
</ItemTemplate>
</asp:ListView>

twitter bootstrap table css

i am developing an asp.net c# application using the twitter bootstrap framework.
i am trying not to add change or add any CSS so wanted to know the following
i have a asp.net gridview, which eventually renders as table. i wanted to know what is the css class to be applied for tables?
ASP.NET
C#
Twitter Bootstrap
<table cellspacing="0" rules="all" border="1" id="VideoList" style="border- collapse:collapse;">
<tr>
<th scope="col"> </th><th scope="col"> </th>
</tr><tr>
<td>Senior Care</td><td>
</td>
</tr><tr>
<td>Cardiac Catheterization Lab</td><td>
</td>
</tr>
</table>
any ideas will be much appreciated.
Well the minimum styling can be added just with the "table" class. That is:
MyGrid.CssClass = "table";
Optionally, you can include additional table formatting such as
MyGrid.CssClass = "table table-striped table-bordered";
To see some more noticeable styling

Given a web response, how do I extract a specific portion for further processing?

I have some code that gets a web response. How do I take that response and search for a table using its CSS class (class="data")? Once I have the table, I need to extract certain field values. For example, in the sample markup below, I need the values of Field #3 and Field #5, so "85" and "1", respectively.
<table width="570" border="0" cellpadding="1" cellspacing="2" class="data">
<tr>
<td width="158"><strong>Field #1:</strong></td>
<td width="99">1</td>
<td width="119"><strong>Field #2:</strong></td>
<td width="176">110</td>
</tr>
<tr>
<td width="158"><strong>Field #3:</strong></td>
<td width="99">85</td>
<td width="119"><strong>Field #4:</strong></td>
<td width="176">-259.34</td>
</tr>
<tr>
<td width="158"><strong>Field #5:</strong></td>
<td width="99">1</td>
<td width="119"><strong>Field #6:</strong></td>
<td width="176">110</td>
</tr>
<tr>
<td width="158"><strong>Field #7:</strong></td>
<td width="99">12</td>
<td width="119"><strong>Field #8:</strong></td>
<td width="176">123.23</td>
</tr>
</table>
Use the HTML Agility Pack and parse the HTML. If you want to do it the simplest way then go grab its beta (it supports LINQ).
As Randolf suggests, using HTML Agility Pack is a good option.
But, if you have control of the format of the HTML, it is also possible to do string parsing to extract the values you are after.
It is nearly trivial to download the entire HTML as a string and search for the string "<table" followed by the string "class=\"data\"". Then you can easily extract the values you are after by doing similar string manipulations.
I'm not saying you should do this, for the resulting code will be harder to read and maintain that the code using HTML Agility Pack, but it will save you an external dependency and your code will probably perform much better.
In a WP7 app I made, I started using HTML Agility Pack to parse some HTML and extract some values. This worked well, but it was quite slow. Switching to the string parsing regime made my code many times faster while returning the exact same result.

Placing data within an HTML template using ASP.NET

I have an ASP.NET web app that retrieves a JSON collection and outputs the content of the collection, via LINQ to a StringBuilder that has a lot of table and other tags in HTML, with my data pieces interspersed.
This is what I mean:
sb.AppendFormat(#"
<table cellpadding=""0"" class=""TableStyle"" style=""width: 70%; height: 100%;"" cellspacing=""5"">
<tr>
<td class=""PicHolder"" style=""width: 151px"" rowspan=""2"">
<a href=""http://twitter.com/{0}"" target=""_blank""><img height=""45px"" width=""45px"" src=""{1}"" alt=""{4}""></td>
<td style=""width: 100%; height: 36px;"" class=""LinkTitleCell"" valign=""top"">
<span class=""BoldText"" style=""height: 23px"">
<span class=""HyperLinks"">{6}</span></span></ br><span class=""NormText"">
</tr>
<tr>
<td style=""width: 100%; height: 10px;"" class=""MentionedXTimes"" valign=""top"">
<span class=""NormText"">Mentioned {3} time(s).</span></td>
</tr>
<tr>
<td style=""width: 151px"" class=""UserName""><span class=""UserName""><img height=""1"" src=""spacer.gif"" width=""1"" />{4}:</span></td>
<td style=""height: 23%; width: 100%"" class=""WhatUserSaid"" valign=""top"">
{5}</td>
</tr>
<tr>
<td style=""width: 151px"" class=""UserName"">Info:</td>
<td style=""height: 24px; width: 100%"" class=""LinkTitleCell"" valign=""top""><span class=""NormText"">{7}</span></td>
</tr>
<tr>
<td style=""height: 9px; width: 151px""></td>
<td class=""LinkGreen"" style=""height: 9px; width: 100%"" valign=""top"">{2}</td>
</tr>
<tr>
<td style=""height: 9px; width: 151px""> </td>
<td class=""TableSpacer"" style=""height: 9px; width: 100%"" valign=""top""> </td>
</tr>
</table>",
count.First.userName, count.First.imgURL, newdata, count.Count, count.First.userName, count.First.txtDesc, (title != string.Empty) ? title2 : newdata, metaDesc2);
You can see all of the {0} and {1} data place holders I am using in the code above, and the reference to the data required at the end of the StringBuilder method call.
I want to be able to separate the HTML from my app so that I can edit it more easily without having to escape all of the "" quote marks.
So I need a template that has place holder for where my data goes. This is a noob question and I know exactly what want but not how to implement it.
Any help much appreciated!
I'm getting some bad vibes here, like you're building the entire page or at least a very large part of it inside a single stringbuilder for output. This is a very bad thing to do.
If you want to "accumlate" your page string like this, you should write to the Response object directly instead. The StringBuilder forces you to keep all that html in memory on your server for every request, and memory use like this on a web server just won't scale well when you have many requests going at once. Even worse, there's a chance of these stringbuilders ending up on the Large Object Heap. If that happens it could ultimately cause OutOfMemoryExceptions. By contrast, the Response object buffers your html as you write it, and so you only use memory per request up to the size of the buffer. That will scale/perform much better.
Even better, though, is if you work with ASP.Net to make this happen rather than against it. That solves both the scaling problem and your "templating" problem. For example, I'll show you a better way to adapt just a small snippet of the html you posted. First write your .aspx markup like this:
<table cellpadding="0" class="TableStyle" style="width: 70%; height: 100%;" cellspacing="5">
<tr>
<td class="PicHolder" style="width: 151px" rowspan="2">
<asp:HyperLink runat="server" ID="TwitterLink" target="_blank">
<asp:Image runat="server" ID="TwitterLinkImage" Height="45px" Width="45px"/>
</asp:HyperLink></td>
...
</tr>
And then use code like this in your .cs code-behind:
TwitterLink.NavigateUrl = "http://twitter.com/" + count.First.userName;
TwitterLinkImage.ImageUrl = count.First.imgURL;
TwitterLinkImage.AlternateText = newdata;
There you go. Clean separation of markup and code/data that's more readable, avoids all the messy escaping, and will perform even better than your stringbuilder. If you have a lot of records that are exactly the same and you still want fine control over your HTML output, use an <asp:Repeater> control and set up markup like this in it's ItemTemplate. Then c# code will go in the repeater's ItemDatabound event.
As with most things there are a number of ways of doing it; from the pure code behind which you have as your original question through to the pure client side / jquery templating.
Another option would be to have a user control with the html part of the output in. This could have an associated property with the data object assigned to it. You could then access the data in the html you would put somethihng like:
<%= MyClass.Property %>
Where ever you want that value to appear in the html.
So what I'd look to do (not tested as don't have VS installed on this machine) is the following:
create a class which will store the data which you will be receiving in json format
Create the user control
Specifiy a property on the control which takes an instance of your class defined above
Add the control onto your aspx page
In the code behind of the aspx page set the retrieval and parsing of the json data in the Page_Load event.
Still in the Page_Load; assign the newly created instance of the object to the usercontrol property
Once this is done when the page renders the user control can access the data and display it through the mechanism (bit of code) above.
Hope this helps, been doing a lot of MVC stuff recently so my Web Forms is a little rusty :-)
If this doesn't make much sense, I appologise in advance and if you let me know I will try and update the post with some more code examples to try and make it make more sense :-)
Perhaps it's better to return the data as json to the browser and there use jqGrid or jQuery template.
Grz, Kris.

Categories

Resources