I am working with a .NET Core 6 Web API and I am using Rotativa to generate reports. I am currently renouncing the creation of a dynamic grid with the data that comes from a stored procedure which is called in the controller and then I pass its result to said method that passes and then iterates and builds the html.
I'm building everything on the API side in C#.
I attach the code where I put together the HTML
public string GetHtml(List<ListaMovimientosArea> movimientosArea)
{
string tablaHtml = "";
foreach (var movArea in movimientosArea)
{
tablaHtml += String.Format
("<tr>" +
"<td colspan=\"1\">{0}<td>" +
"<td colspan=\"2\">{1}<td>" +
"<td colspan=\"2\">{2}<td>" +
"<td colspan=\"3\">{3}<td>" +
"<td colspan=\"3\">{4}<td>" +
"<td colspan=\"1\">{5}<td>"+
"</tr>",
movArea.MovimientoId,
movArea.NombreArea,
movArea.FechaMovimiento,
movArea.TipoMovimientoNombre,
movArea.NombrePersona,
movArea.MontoTotal
);
}
string html = #"<!DOCTYPE html>
<html>
<head>
<meta charset=""utf-8"" />
<title>A simple, clean, and responsive HTML invoice template</title>
<style>
.invoice-box {
max-width: 800px;
margin: auto;
padding: 30px;
border: 1px solid #eee;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
font-size: 16px;
line-height: 24px;
font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
color: #555;
}
.invoice-box table {
width: 100%;
line-height: inherit;
text-align: left;
}
.invoice-box table td {
padding: 5px;
vertical-align: top;
}
.invoice-box table tr td:nth-child(2) {
text-align: right;
}
.invoice-box table tr.top table td {
padding-bottom: 20px;
}
.invoice-box table tr.top table td.title {
font-size: 45px;
line-height: 45px;
color: #333;
}
.invoice-box table tr.information table td {
padding-bottom: 40px;
}
.invoice-box table tr.heading td {
background: #eee;
border-bottom: 1px solid #ddd;
font-weight: bold;
}
.invoice-box table tr.details td {
padding-bottom: 20px;
}
.invoice-box table tr.item td {
border-bottom: 1px solid #eee;
}
.invoice-box table tr.item.last td {
border-bottom: none;
}
.invoice-box table tr.total td:nth-child(2) {
border-top: 2px solid #eee;
font-weight: bold;
}
#media only screen and (max-width: 600px) {
.invoice-box table tr.top table td {
width: 100%;
display: block;
text-align: center;
}
.invoice-box table tr.information table td {
width: 100%;
display: block;
text-align: center;
}
}
/** RTL **/
.invoice-box.rtl {
direction: rtl;
font-family: Tahoma, 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
}
.invoice-box.rtl table {
text-align: right;
}
.invoice-box.rtl table tr td:nth-child(2) {
text-align: left;
}
tr.spaceUnder > td {
padding-top: 10em;
}
tr.border > td {
border: solid;
border-width: 1px 0;
}
</style>
</head>
<body>
<div class=""invoice-box"">
<table border=""1"" cellpadding=""0"" cellspacing=""0"">
<tr class=""top"">
<td>
<table border=""1"">
<tr>
<td class=""title"">
<img THERE IS A IMAGE>
</td>
</tr>
</table>
</td>
</tr>
<tr class=""information"">
<td>
<table>
<tr>
<td>
Caritas Argentina<br />
Diocesana Villa Maria<br />
Tel/Fax (0353) 4530388/4528919 <br />
Mexico 60 - 5900 Villa Maria (Cba.) <br />
e-mail: caritasvillamaria#hotmail.com
</td>
</tr>
</table>
</td>
</tr>
<table border=""1"">
<tr class=""heading"">
<td colspan = ""1"">Codigo</td>
<td colspan = ""2"">Area</td>
<td colspan = ""2"">Fecha Mov.</td>
<td colspan = ""3"">Tipo Mov.</td>
<td colspan = ""3"">Persona</td>
<td colspan = ""1"">Monto</td>
</tr>" +
tablaHtml
+
"</table>" +
"<tr class=\"total\"\">\r\n " +
"<td></td>\r\n\r\n" +
" <td>Total: $385.00</td>\r\n" +
"</tr>\r\n" +
"</table>\r\n" +
" </div>\r\n" +
"</body>\r\n" +
"</html>";
return html;
}
}
I attach the image of how it looks, I put the border in 1 to see why the problem but I couldn't solve it.
I attach the image of what the pdf looks like
The tests I did was to modify the style but I did not get a result.
Related
This question was migrated from Super User because it can be answered on Stack Overflow.
Migrated 28 days ago.
I'm currently developing an app in .NET c# for my own company and I'm facing some trouble when trying to use a HTML template to send a automated e-mail to my users with my app in c#.
C# Code to send e-mail using Gmail API
public bool sendEmail(SendEmailModel email)
{
try
{
UserCredential credential = loadCredentials();
string message = $"To: {email.receiver}\r\nSubject: {email.subject}\r\nContent-Type: text/html;charset=utf-8\r\n\r\n<h1>{email.content}</h1>";
var service = new GmailService(new BaseClientService.Initializer() { HttpClientInitializer = credential, ApplicationName = ApplicationName });
var msg = new Google.Apis.Gmail.v1.Data.Message();
msg.Raw = Base64UrlEncode(message.ToString());
service.Users.Messages.Send(msg, "me").Execute();
return true;
}
catch(Exception ex)
{
return false;
}
}
string Base64UrlEncode(string input)
{
var data = Encoding.UTF8.GetBytes(input);
return Convert.ToBase64String(data).Replace("+", "-").Replace("/", "_").Replace("=", "");
}
HTML Template
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="x-apple-disable-message-reformatting">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700" rel="stylesheet">
<style>
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
background: #f1f1f1;
}
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
div[style*="margin: 16px 0"] {
margin: 0 !important;
}
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
img {
-ms-interpolation-mode:bicubic;
}
a {
text-decoration: none;
}
*[x-apple-data-detectors], /* iOS */
.unstyle-auto-detected-links *,
.aBn {
border-bottom: 0 !important;
cursor: default !important;
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
.a6S {
display: none !important;
opacity: 0.01 !important;
}
.im {
color: inherit !important;
}
img.g-img + div {
display: none !important;
}
#media only screen and (min-device-width: 320px) and (max-device-width: 374px) {
u ~ div .email-container {
min-width: 320px !important;
}
}
#media only screen and (min-device-width: 375px) and (max-device-width: 413px) {
u ~ div .email-container {
min-width: 375px !important;
}
}
#media only screen and (min-device-width: 414px) {
u ~ div .email-container {
min-width: 414px !important;
}
}
</style>
<style>
.primary{
background: #17bebb;
}
.bg_white{
background: #ffffff;
}
.bg_light{
background: #f7fafa;
}
.bg_black{
background: #000000;
}
.bg_dark{
background: rgba(0,0,0,.8);
}
.email-section{
padding:2.5em;
}
.btn{
padding: 10px 15px;
display: inline-block;
}
.btn.btn-primary{
border-radius: 25px;
background: #e77d1a;
color: #ffffff;
}
.btn.btn-white{
border-radius: 5px;
background: #ffffff;
color: #000000;
}
.btn.btn-white-outline{
border-radius: 25px;
background: transparent;
border: 1px solid #e77d1a;
color: #e77d1a;
}
.btn.btn-black-outline{
border-radius: 0px;
background: transparent;
border: 2px solid #000;
color: #000;
font-weight: 700;
}
.btn-custom{
color: rgba(0,0,0,.3);
text-decoration: underline;
}
h1,h2,h3,h4,h5,h6{
font-family: 'Poppins', sans-serif;
color: #000000;
margin-top: 0;
font-weight: 400;
}
body{
font-family: 'Poppins', sans-serif;
font-weight: 400;
font-size: 15px;
line-height: 1.8;
color: rgba(0,0,0,.4);
}
a{
color: #17bebb;
}
table{
}
.logo h1{
margin: 0;
}
.logo h1 a{
color: #17bebb;
font-size: 24px;
font-weight: 700;
font-family: 'Poppins', sans-serif;
}
.hero{
position: relative;
z-index: 0;
}
.hero .text{
color: rgba(0,0,0,.3);
}
.hero .text h2{
color: #000;
font-size: 34px;
margin-bottom: 0;
font-weight: 200;
line-height: 1.4;
}
.hero .text h3{
font-size: 24px;
font-weight: 300;
}
.hero .text h2 span{
font-weight: 600;
color: #000;
}
.text-author{
bordeR: 1px solid rgba(0,0,0,.05);
max-width: 50%;
margin: 0 auto;
padding: 2em;
}
.text-author img{
border-radius: 50%;
padding-bottom: 20px;
}
.text-author h3{
margin-bottom: 0;
}
ul.social{
padding: 0;
}
ul.social li{
display: inline-block;
margin-right: 10px;
}
.footer{
border-top: 1px solid rgba(0,0,0,.05);
color: rgba(0,0,0,.5);
}
.footer .heading{
color: #000;
font-size: 20px;
}
.footer ul{
margin: 0;
padding: 0;
}
.footer ul li{
list-style: none;
margin-bottom: 10px;
}
.footer ul li a{
color: rgba(0,0,0,1);
}
#media screen and (max-width: 500px) {
}
</style>
</head>
<center style="width: 100%; background-color: #f1f1f1;">
<div style=" display: none; font-size: 1px;max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all; font-family: sans-serif;"></div>
<div style=" max-width: 900px; margin: 0 auto;" class="email-container">
<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #dedede; margin: auto;">
<tr>
<td valign="middle" class="hero bg_white" style="background-color: #dedede; padding: 2em 0 2em 0;">
<div class="text-author" style="border-radius: 20px;background-color: #ffffff;border-color: #ffffff; ">
<table table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="text-align: center;">
<img src="{LOGO_1}" style="height: 100px; width: auto;">
</td>
</tr>
<tr>
<td style="text-align: left;">
<h3 class="name" style="font-weight: 600; font-size: 25px; color: #171717;">Olá,</h3>
<span class="position">{content}</span>
</td>
</tr>
<tr >
<td style="text-align: center;">
<p><a class="btn btn-white-outline" style="width: 94%;">{btn_1_content}</a></p>
<p>{btn_2_content}</p>
</td>
</tr>
<tr>
<td style="text-align: left;">
<div style="height: 10px;"></div>
<span class="position" style="color: #dbdbdb;">Este é um e-mail enviado automaticamente.</span>
<div style="height: 10px;"></div>
</td>
</tr>
<tr>
<td style="text-align: left;">
<div class="separator" style="background-color: #d7d7d7; height: 1px;"></div>
</td>
</tr>
<tr>
<td style="text-align: center;">
<div style="height: 20px;"></div>
<span class="position" style="color: #dbdbdb;">Se você já realizou o pagamento desse boleto desconsidere esse e-mail.</span>
</td>
</tr>
<tr>
<td style="text-align: left;">
<h3 class="name" style="font-weight: 250; font-size: 16px; color: #171717;">Abraços,</h3>
<h3 class="name" style="font-weight: 600; font-size: 16px; color: #171717;">Equipe Acalanto.</h3>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td style="text-align: center;">
<div>
<img src="{LOGO_2}" height="60px">
<h3 style="color: #898989; font-size: 14px;">© Organização Diamante LTDA</h3>
</div>
</td>
</tr>
</table>
</div>
</center>
</body>
</html>
I have no idea on how to use any kind of template with Gmail API. If Gmail API isn't the "go" for this case please let me know, I don't mind to use othe types of e-mail services but I really like Google stuff, but, in this case they don't have any info on .NET c# or even on how to use templates.
SOLUTION
After some thought I found the solution.
In the line of code:
tring message = $"To: {email.receiver}\r\nSubject: {email.subject}\r\nContent-Type: text/html;charset=utf-8\r\n\r\n<h1>{email.content}</h1>";
I just replaced <h1>{email.content}</h1> with File.ReadAllText("PATH_TO_HTML_FILE") and that was it. Sorry for the dumb question. In my opinion, Google should update their Gmail API documentation and examples, because I don't think anyone will go to the trouble of implementing a e-mail api and e-mail system to send simple e-mails with plain text and images.
I am working on WCF application which is running fine in production. It has lots of service methods. Now there is requirement that if one of the field in config file is set to true then it must show some custom message to consumer.
I created constructor to make sure it will be called for each request and checked for that config key there and thrown FaultException as below
public RESTService()
{
if (ConfigurationManager.AppSettings("BlockLogin") == "1")
throw new FaultException("Application under maintainance");
}
but it is not giving response in JSON. Instead it returns it in html format as below
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Request Error</title>
<style>BODY { color: #000000; background-color: white; font-family: Verdana; margin-left: 0px; margin-top: 0px; } #content { margin-left: 30px; font-size: .70em; padding-bottom: 2em; } A:link { color: #336699; font-weight: bold; text-decoration: underline; } A:visited { color: #6699cc; font-weight: bold; text-decoration: underline; } A:active { color: #336699; font-weight: bold; text-decoration: underline; } .heading1 { background-color: #003366; border-bottom: #336699 6px solid; color: #ffffff; font-family: Tahoma; font-size: 26px; font-weight: normal;margin: 0em 0em 10px -20px; padding-bottom: 8px; padding-left: 30px;padding-top: 16px;} pre { font-size:small; background-color: #e5e5cc; padding: 5px; font-family: Courier New; margin-top: 0px; border: 1px #f0f0e0 solid; white-space: pre-wrap; white-space: -pre-wrap; word-wrap: break-word; } table { border-collapse: collapse; border-spacing: 0px; font-family: Verdana;} table th { border-right: 2px white solid; border-bottom: 2px white solid; font-weight: bold; background-color: #cecf9c;} table td { border-right: 2px white solid; border-bottom: 2px white solid; background-color: #e5e5cc;}</style>
</head>
<body>
<div id="content">
<p class="heading1">Request Error</p>
<p xmlns="">The server encountered an error processing the request. Please see the
<a rel="help-page" href="http://172.16.3.156:81/_RestAPI/RESTService.svc/help">service help page</a> for constructing valid requests to the service.
</p>
</div>
</body>
</html>
You don't need to use exception - as you saw WCF will convert it to a 500 server error, and not give you control.
You could create a class (plain class) called (for example) BusinessFault:
public class BusinessFault
{
public string ErrorCode { get; set; }
public string ErrorMessage { get; set; }
}
Then, when you would like to return a fault:
if (ConfigurationManager.AppSettings("BlockLogin") == "1")
{
return new BusinessFault() {
ErrorCode = "0001",
ErrorMessage = "Application under maintainance"
}
}
I am having issues using the HTML Renderer properly. It generates the PDF, but for some reason, when I have a colspan of 2, it seems to ignore this.
Here is the entire HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Receipt</title>
<style>
.invoice-box {
max-width: 800px;
margin: auto;
padding: 30px;
border: 1px solid #eee;
box-shadow: 0 0 10px rgba(0, 0, 0, .15);
font-size: 16px;
line-height: 24px;
font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
color: #555;
}
.invoice-box table {
width: 100%;
line-height: inherit;
text-align: left;
}
.invoice-box table td {
padding: 5px;
vertical-align: top;
}
.invoice-box table tr td:nth-child(2) {
text-align: right;
}
.invoice-box table tr.top table td {
padding-bottom: 20px;
}
.invoice-box table tr.top table td.title {
font-size: 45px;
line-height: 45px;
color: #333;
}
.invoice-box table tr.information table td {
padding-bottom: 40px;
}
.invoice-box table tr.heading td {
background: #eee;
border-bottom: 1px solid #ddd;
font-weight: bold;
}
.invoice-box table tr.details td {
padding-bottom: 20px;
}
.invoice-box table tr.item td{
border-bottom: 1px solid #eee;
}
.invoice-box table tr.item.last td {
border-bottom: none;
}
.invoice-box table tr.total td:nth-child(2) {
border-top: 2px solid #eee;
font-weight: bold;
}
.invoice-box table tr.top table tr td {
width: 100%;
display: block;
text-align: center;
}
.invoice-box table tr.information table tr td {
width: 100%;
display: block;
text-align: center;
}
/** RTL **/
.rtl {
direction: rtl;
font-family: Tahoma, 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
}
.rtl table {
text-align: right;
}
.rtl table tr td:nth-child(2) {
text-align: left;
}
</style>
</head>
<body>
<div class="invoice-box">
<table cellpadding="0" cellspacing="0">
<tr class="top">
<td colspan="2">
<table>
<tr>
<td class="title">
<img src="" style="width:100%; max-width:300px;">
</td>
<td>
Order number #: xxxxxxxx<br>
Order Date: February 26 2018
</td>
</tr>
</table>
</td>
</tr>
<tr class="information">
<td colspan="2">
<table>
<tr>
<td>
CompanyS<br>
address<br>
state
</td>
<td>
Contact<br>
Email
</td>
</tr>
</table>
</td>
</tr>
<tr class="details">
<td>
</td>
<td>
</td>
</tr>
<tr class="heading">
<td>
</td>
<td>
</td>
</tr>
<tr class="item">
<td>
</td>
<td>
</td>
</tr>
<tr class="total">
<td></td>
<td>
</td>
</tr>
</table>
</div>
</body>
</html>
And here is the code to get the HTML:
var emailContentUrl = url;
var html = FetchResponseHtml(emailContentUrl);
var pdf = PdfGenerator.GeneratePdf(html, PageSize.A4);
FetchResponseHtml:
public string FetchResponseHtml(string emailContentUrl)
{
var request = (HttpWebRequest)WebRequest.Create(emailContentUrl);
var response = (HttpWebResponse)request.GetResponse();
var responseHtml = "";
if (response.StatusCode == HttpStatusCode.OK)
{
var receiveStream = response.GetResponseStream();
StreamReader readStream = null;
if (response.CharacterSet == null)
{
readStream = new StreamReader(receiveStream);
}
else
{
readStream = new StreamReader(receiveStream, Encoding.GetEncoding(response.CharacterSet));
}
responseHtml = readStream.ReadToEnd();
response.Close();
readStream.Close();
}
return responseHtml;
}
But for some reason, when the PDF is generated, the PDF only has the company info. There is no Order Number/Order Date nor any contact info.
Is HTML Renderer ignoring extra colspans, or why does this happen?
The HTML code seems to be valid.
Maybe you are breaking the syntax while adding Order related information.
I'm try to do a table with a ImageButton in one cell.
My table is implemented like this:
<table class="features-table">
<thead>
<tr>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>1</td>
</tr>
</thead>
<tfoot>
</tfoot>
<tbody>
<div id="IDDIV" runat="server"></div>
</tbody></table>
I'm filling my table by adding a html-string to the div. This string is generated with a method like this:
private string buildHtmlTableString(List<Week> w)
{
string result = "";
foreach (Week element in w)
{
string s = "<tr>" +
"<td> Week " + element.weekNumber +
"</td>" +
"<td>" + element.1 + " €</td>" +
"<td>" + element.2 + " €</td>" +
"<td>" + element.3 + " €</td>" +
"<td>" + element.4 + "</td>" +
"<td>" + element.5 + " €</td>" +
"<td>" + element.6+ "</td>" +
"<td>" + element.7 +" €</td>" +
"<td>" + element.8 + "</td>" +
"<td>" + element.9 + " €</td>" +
"<td>" + element.10 + " €</td>" +
"<td>" + "<asp:ImageButton runat=\"server\" ID=\"" + element.1 + "\" Height=\"20px\" Width=\"20px\" OnClick=\"test_Click\" ImageUrl=\"~/detail.ico.ico\"></asp:ImageButton></td>" +
"</tr>";
result = result + s;
}
return result;
}
The style of the table:
#main
{
width: 960px;
margin: 160px auto 0 auto;
background: white;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
padding: 30px;
border: 1px solid #adaa9f;
-moz-box-shadow: 0 2px 2px #9c9c9c;
-webkit-box-shadow: 0 2px 2px #9c9c9c;
}
/*Features table------------------------------------------------------------*/
.features-table
{
width: 100%;
margin: 0 auto;
border-collapse: separate;
border-spacing: 0;
text-shadow: 0 1px 0 #fff;
color: #2a2a2a;
background: #fafafa;
background-image: -moz-linear-gradient(top, #fff, #eaeaea, #fff); /* Firefox 3.6 */
background-image: -webkit-gradient(linear,center bottom,center top,from(#fff),color-stop(0.5, #eaeaea),to(#fff));
}
.features-table td
{
border-right: 1px solid #cdcdcd;
height: 50px;
line-height: 50px;
padding: 0 20px;
border-bottom: 1px solid #cdcdcd;
box-shadow: 0 1px 0 white;
-moz-box-shadow: 0 1px 0 white;
-webkit-box-shadow: 0 1px 0 white;
white-space: nowrap;
text-align: center;
}
/*Body*/
.features-table tbody td
{
text-align: center;
font: normal 12px Verdana, Arial, Helvetica;
width: 150px;
}
.features-table tbody td:first-child
{
width: auto;
text-align: left;
}
.features-table td:nth-child(1)
{
background: #e7f3d4;
background: rgba(179,0,0,0.3);
}
/*Header*/
.features-table thead td
{
background: rgba(144,144,144,0.15);
font: bold 12px 'trebuchet MS', 'Lucida Sans', Arial;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 10px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
border-top: 1px solid #eaeaea;
}
.features-table thead td:first-child
{
border-top: none;
}
/*Footer*/
.features-table tfoot td
{
font: bold 1.4em Georgia;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom: 1px solid #dadada;
}
.features-table tfoot td:first-child
{
border-bottom: none;
}
My Problem is that those Image buttons aren't shown in the table. If I analyse the html code of my page with chrome I can see that the labels are generated, but, and I have no idea why, my button is sized 0px x 0px. Maybe anyone of you knows what to do?
You can't add div in table without keeping its structure. As you can see in firebug your div is ignored by table and located inside body. The structure should be like this.
<table class="features-table">
<thead>
<tr>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>1</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<div id="IDDIV" runat="server"></div>
</td>
</tr>
</tbody>
</table>
Couldn't test your code without image, so not sure if this will solve the problem, but I guess you should start from this, this will solve much problems for you
I actually dont know the Problem, but you could do a little workaround until someone else has a solution.
Dont add a button, just add a piczure and link it to your page with a dynamically parameter. Like a week number in your case. In your Linked file you just have to analyze the paramenter and voila you know wich tablecoulom is pressed.
Intrested to see other solutions!
Hope that helps!
<asp:ImageButton> is an ASP.NET server-side control... and as such it needs to be created by ASP.NET.
You cannot just create a string using <asp:ImageButton> and expect the system to recognise it as a control. My guess is that when you look at the rendered HTML, you're actually seeing <asp:ImageButton> instead of what an actual control would produce (which would be <input type="image">).
In order to do what you want, you need to generate a series of controls, first using a <asp:Literal> for the normal text, and then <asp:ImageButton> for buttons.
Instead of using <div> use a <asp:PlaceHolder>.
Then build up your controls roughly like this...
private void buildHtmlTableString(List<Week> w)
{
var sb = new System.Text.StringBuilder();
foreach (Week element in w)
{
sb.Append("<tr>");
sb.AppendFormat("<td> Week {0}</td>", element.weekNumber);
sb.AppendFormat("<td>{0} €</td>", element.1);
...
sb.AppendFormat("<td>{0} €</td>", element.10);
sb.Append("<td>");
myPlaceholder.Controls.Add(new System.Web.UI.WebControls.Literal(sb.ToString()));
sb.Length = 0;
var imgBtn = new System.Web.UI.WebControls.ImageButton
{
ID = element.1.ToString(),
Width = new System.Web.UI.WebControls.Unit(20),
Height = new System.Web.UI.WebControls.Unit(20),
ImageUrl = #"~/detail.ico"
};
imgBtn.Click += new System.Web.UI.ImageClickEventHandler(text_Click);
myPlaceholder.Controls.Add(imgBtn);
sb.Length = 0;
myPlaceholder.Controls.Add(new System.Web.UI.WebControls.Literal("</td></tr>");
}
}
Also, having a <div> within the <tbody> is invalid HTML, but the above removes that anyway
I have a radtextbox where I would like to prompt the user to enter a URL, is there a property that exists that validates this input in a radtextbox?, if not, what can I use to allow users to enter urls?.
I would appreciate any advise on this matter.
Regards
because they use a textbox and assign a mask with JavaScipt
ASP_BUTTON
<asp:TextBox runat="server" ID="txtOrigeenHup" CssClass="mycssMascara" Width="390px"
TextMode="MultiLine" Text='<%# Eval("urlOrigen") %>'
onfocus="OnFocus(this.id,'http://paginaEjemplo.com')"
onblur="OnBlur(this.id,'http://paginaEjemplo.com')">http://paginaEjemplo.com asp>
JAVASCRIPT
function OnFocus(elementId, defaultText) {
if (document.getElementById(elementId).value == defaultText) {
document.getElementById(elementId).className = "mycssMascara";
document.getElementById(elementId).value = "";
}}
function OnBlur(elementId, defaultText) {
var textValue = document.getElementById(elementId).value;
if (textValue == defaultText || textValue.length == 0) {
document.getElementById(elementId).className = "mycssMascara";
document.getElementById(elementId).value = defaultText;
}
else
document.getElementById(elementId).className = "mycss"; }
CSS
.mycssMascara
{
font-weight: normal; color: #808080; background-color: #FFFFFF; border: 1px solid #C0C0C0; letter-spacing: 0pt; word-spacing: 1pt; font-size: 14px; text-align: left; font-family: arial, helvetica, sans-serif; line-height: 1; margin: 4px; padding: 6px;
}
.mycss
{ font-weight: normal; color: #000000; background-color: #FFFFFF; border: 1px solid #C0C0C0; letter-spacing:
0pt; word-spacing: 1pt; font-size: 14px; text-align: left; font-family: arial, helvetica, sans-serif; line-height: 1; margin: 4px; padding: 6px;
}
Use InputType
As of Q3 2011 RadTextBox provides support for the new HTML5 input types
Example:
<telerik:RadTextBox ID="txt1" runat="server" RenderMode="Lightweight" Label="Image Url: " MaxLength="100" ToolTip="Put URL ..." InputType="Url" />