Implementing Different Font Styles in a Single FormView C# - c#

I'm trying to add different font styles and sizes to one of the fields below. I'm using a FormView and am extracting the data using <%Eval("fieldname")%>. For this question I'm looking at the 'Comments' Eval field.
The output for this field will look like this:
"- this is a comment.
Commented by John Doe 27/09/2016 16:58
-another comment.
Commented by John Doe 27/09/2016 16:59"
Now my question is how to change the font styles of both comment value (- this is a comment.) and the user who commented (Commented by John...).
Basically, I want the comment to standout than the commented by section.
I'd appreciate any help. Thanks in advance!
<asp:FormView runat="server" ID="fvReport" DataKeyNames="ReportId" DataSourceID="SqlDataSource2" BorderStyle="None">
<ItemTemplate>
<div class="body2">
<h4><%# Eval("Report_Type") %> Report ID No. <%# Eval("ReportId") %></h4>
<table>
<tr>
<th colspan="5">Shift Details</th>
</tr>
<tr style="border: solid .5px;">
<td>Staff Name:</td>
<td style="width: 285px">
<%# Eval("StaffName") %>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td style="width: 19%">Shift Type:
</td>
<td>
<%# Eval("ShiftName") %>
</td>
<td style="text-align:right;">Shift Date:</td>
<td>
<%# Convert.ToDateTime(Eval("ShiftDate")).ToString("dddd, dd MMMM yyyy") %>
</td>
</tr>
<tr>
<th colspan="4">Report</th>
</tr>
<tr>
<td colspan="4">
<%# Eval("Report") %>
</td>
</tr>
<tr>
<th colspan="4">Comments</th>
</tr>
<tr>
<td colspan="4">
<%# Eval("Comments") %>">
</td>
</tr>
<tr>
<td colspan="2"> </td>
<td colspan="2"></td>
</tr>
</table>
</div>
</ItemTemplate>
<EditItemTemplate>
</EditItemTemplate>
</asp:FormView>

I'm assuming that comments is just a record(not like records set) and if you want to use same font for all comments
<tr>
<td colspan="4" style>
<span style="font-size:12px;....">
<%# Eval("Comments")
.ToString()
.Substring(
0,
Eval("Comments")
.ToString()
.IndexOf(" Commented by")) %>">
</span>
<span style="font-size:8px;....">
<%# Eval("Comments")
.ToString()
.Substring(
Eval("Comments")
.ToString()
.IndexOf(" Commented by")) %>">
</span>
</td>
</tr>

Related

How to convert Flask {{ }} {% %} syntax into ASP.NET equivalent

I wrote some code in Flask that I'm trying to convert into ASP.NET as that is what the larger website is written in, and I'm not sure how to convert this simple syntax from Flask to ASP.NET.
<table class="table">
<tr>
<td> First Name </td>
<td> Last Name </td>
</tr>
{% for i in range(5) %}
<tr>
<td id="fn_{{i}}">{{i}}</td>
<td id="ln_{{i}}">{{i}}</td>
</tr>
{% endfor %}
</table>
What is the C# equivalent of {% and {{ in this context? I've seen that <% %> might be it, but I'm not sure how to use it. I've tried the following, but the variable "i" goes out of scope when I try and use it.
<table class="table">
<tr>
<td> First Name </td>
<td> Last Name </td>
</tr>
<% for (int i=0;i<5;i++) %>
<tr>
<td id="fn_<% i %>"><% i %></td>
<td id="ln_<% i %>"><% i %></td>
</tr>
</table>
You just need to add some parentheses. The missing brackets is why your variable goes out of scope.
<table class="table">
<tr>
<td> First Name </td>
<td> Last Name </td>
</tr>
<% for (int i=0;i<5;i++) { %> <!-- added parenthesis here -->
<tr>
<td id="fn_<%= i %>"><%= i %></td>
<td id="ln_<%= i %>"><%= i %></td>
</tr>
<% } %> <!-- and here -->
</table>
You use it like this. But I'm not a fan. The code becomes hard to read. If you use Webforms better use a GridView or Repeater. In Razor it becomes much better to implement a for-loop inline.
<table class="table">
<tr>
<td>First Name </td>
<td>Last Name </td>
</tr>
<% for (int i = 0; i < 5; i++) { %>
<tr>
<td id="fn_<%= i %>"><%= i %></td>
<td id="ln_<%= i %>"><%= i %></td>
</tr>
<% } %>
</table>

Asp.net syntax error for Command Argument in linkbutton

I am trying to use linkbutton inside of foreach in asp.net
I have below html.
Asp.net html:
<table border="1" style="grid-cell: inherit; border-spacing: inherit;">
<thead>
<tr>
<th>İlan ID
</th>
<th>İlan Yolu
</th>
<th>Eklenme Tarihi
</th>
<th>İlk Güncelleme Tarihi
</th>
<th>Güncelleme Aralığı
</th>
<th>Son Güncelleme Tarihi
</th>
<th>Aktifmi
</th>
<th>Detay Göster
</th>
</tr>
</thead>
<%foreach (var item in list)
{%>
<tr>
<td style="text-align: center">
<span><%= item.Id%> </span>
</td>
<td>
<span><%=item.DosyaAdi %></span>
</td>
<td style="text-align: center">
<span><%=item.EklemeTarihi %></span>
</td>
<td>
<span><%=item.IlkGuncellemeTarihi %></span>
</td>
<td style="text-align: center">
<span><%=item.GuncellemeAraligi %></span>
</td>
<td style="text-align: center">
<span><%=item.SonGuncelleme %></span>
</td>
<td style="text-align: center">
<input type="checkbox" class="chk" id="<%=item.Id %>" <%= item.Aktif ==true ? "checked='checked'" : "" %> />
</td>
<td style="text-align: center">
<asp:LinkButton ID="lbdetay" runat="server" OnClick="lbdetay_Click" CommandArgument="<%=item.Id%>" CommandName="Detay">Detay</asp:LinkButton>
</td>
</tr>
<% } %>
</table>
Question:
In part of linkbutton as below
<asp:LinkButton ID="lbdetay" runat="server" OnClick="lbdetay_Click" CommandArgument="<%=item.Id%>" CommandName="Detay">Detay</asp:LinkButton>
If i use CommandArgument="<%=item.Id%>" it is not working (it displays syntax error here)
Where i miss inside of code for command argument in linkbutton side ?
Any help will be appreciated.
Thanks
<%= %> is equivalent to Response.Write, it outputs directly to the html markup. So it cannot write to server-side controls at all, since it does not know about them. In other words, what you are trying to do is impossible.
You should probably consider refactoring this foreach to Repeater, which gives control over controls as well as html:
<asp:Repeater runat="server" ID="Repeater1">
<ItemTemplate>
<td style="text-align: center">
<span><%# Eval("Id") %></span>
</td>
... same for other tds ...
<td style="text-align: center">
<asp:LinkButton ID="lbdetay" runat="server" OnClick="lbdetay_Click" CommandArgument='<%# Eval("Id") %>' CommandName="Detay">Detay</asp:LinkButton>
</td>
</ItemTemplate>
</asp:Repeater>
And don't forget to data bind it:
Repeater1.DataSource = list;
Repeater1.DataBind();

Print a div and its content with css style in ASP.net c#

Hello in my ASP Dot Net c# website i have an html report is there.Now i want to take a printout of the same.So i used Javascript and its showing only the content as a raw information.So how can i display both content and its css .
Javascript
<script type="text/javascript">
function PrintDiv() {
var divToPrint = document.getElementsByClassName('widget-content')[0];
var popupWin = window.open('', '_blank', 'width=300,height=400,location=no,left=200px');
popupWin.document.open();
popupWin.document.write('<html><body onload="window.print()">' + divToPrint.innerHTML + '</html>');
popupWin.document.close();
}
</script>
button Click
<input type="button" onclick="PrintDiv()" value="Print" />
HTML Content
<div class="widget-content">
<div class="invoice-content">
<div class="invoice-head">
<div class="invoice-meta">
<%--Invoice <span class="invoice-number">#96558 </span><span class="invoice-date">Date:
2012-07-15</span>--%>
</div>
<h5 style="margin-left: 40%; height: 20px; font-size: large">
Order Form</h5>
<div class="invoice-to">
<ul>
<li><span>Booking Date:<asp:Label ID="dispbookingDate" runat="server"></asp:Label></span>
<span>Name<asp:Label TextMode="MultiLine" runat="server" ID="dispName"></asp:Label></span>
<span>Address:<asp:Label TextMode="MultiLine" runat="server" ID="dispAddress"></asp:Label></span>
</li>
</ul>
</div>
<div class="invoice-from">
<ul>
<li><span>Order No.<asp:Label ID="dispOrderNo" runat="server"></asp:Label></span> <span>
Wedding Date:<asp:Label runat="server" ID="dispWeddingDate"></asp:Label></span>
<span>Malayalam Date:<asp:Label runat="server" ID="dispWeddingMalayam"></asp:Label></span>
</li>
</ul>
</div>
</div>
<div>
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th class="style1">
Description
</th>
<th class="style2">
Rs.
</th>
<th>
Ps.
</th>
</tr>
</thead>
<tfoot>
<tr>
<th class="total-label" colspan="2">
Total:
</th>
<th class="total-amount">
<asp:Label ID="dispTotal" runat="server"></asp:Label>
</th>
</tr>
<tr>
<th class="total-label" colspan="2">
Adavance:
</th>
<th class="total-amount">
<asp:Label ID="dispAvance" runat="server"></asp:Label>
</th>
</tr>
<tr>
<th class="total-label" colspan="2">
Balance:
</th>
<th class="total-amount">
<asp:Label ID="dispBalance" runat="server"></asp:Label>
</th>
</tr>
</tfoot>
<tbody>
<tr>
<td class="style1">
Auditorium Rent
</td>
<td class="style2">
<asp:Label ID="dispRent" runat="server"></asp:Label>
</td>
<td>
<asp:Label ID="Label2" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td class="style1">
Dining Hall Rent
</td>
<td class="style2">
</td>
<td>
</td>
</tr>
<tr>
<td class="style1">
Kathir Mandapam
</td>
<td class="style2">
</td>
<td>
</td>
</tr>
<tr>
<td class="style1">
Tables and chairs
</td>
<td class="style2">
</td>
<td>
</td>
</tr>
<tr>
<td class="style1">
Electricity charge for water
</td>
<td class="style2">
</td>
<td>
</td>
</tr>
<tr>
<td class="style1">
Luxuary Tax
</td>
<td class="style2">
<asp:Label ID="dispLTax" runat="server"></asp:Label>
</td>
<td>
</td>
</tr>
<tr>
<td class="style1">
Central Service Tax
</td>
<td class="style2">
<asp:Label ID="dispCTax" runat="server"></asp:Label>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
<%-- <p class="amount-word">
Amount in Word: <span>
<asp:Label ID="dispAmountWord" runat="server"></asp:Label></span>
</p>--%>
</div>
<input type="button" onclick="PrintDiv()" value="Print" />
</div>
Have you tried:
popupWin.document.write('<html><head><link href="yourstylesheet.css" rel="stylesheet" type="text/css"></head><body onload="window.print()">' + divToPrint.innerHTML + '</html>');
EDIT: I guess you should also close the body tag in this line
popupWin.document.write('<html><head><link href="yourstylesheet.css" rel="stylesheet" type="text/css"></head><body onload="window.print()">' + divToPrint.innerHTML + '</body></html>');
Your code should be like this:
function PrintDiv() {
var divToPrint = document.getElementsByClassName('widget-content')[0];
var popupWin = window.open('', '_blank', 'width=300,height=400,location=no,left=200px');
popupWin.document.open();
popupWin.document.write('<html><head><link href="yourstylesheet.css" rel="stylesheet" type="text/css"></head><body onload="window.print()">' + divToPrint.innerHTML + '</body></html>');
popupWin.document.close();
}
</script>
You have to use only one document.write() then it will definitely work try it .... :D

How to print a div in ASP.NET C#

Net c# website i have an html report is there.Now i want to take a printout of the same.So i used Javascript and its showing only the popup box ,not the content.how to solve this issue.
Javascript
<script type="text/javascript">
function PrintDiv() {
var divToPrint = document.getElementById('widget-content');
var popupWin = window.open('', '_blank', 'width=300,height=400,location=no,left=200px');
popupWin.document.open();
popupWin.document.write('<html><body onload="window.print()">' + divToPrint.innerHTML + '</html>');
popupWin.document.close();
}
</script>
button Click
<input type="button" onclick="PrintDiv()" value="Print" />
HTML Content
<div class="widget-content">
<div class="invoice-content">
<div class="invoice-head">
<div class="invoice-meta">
<%--Invoice <span class="invoice-number">#96558 </span><span class="invoice-date">Date:
2012-07-15</span>--%>
</div>
<h5 style="margin-left: 40%; height: 20px; font-size: large">
Order Form</h5>
<div class="invoice-to">
<ul>
<li><span>Booking Date:<asp:Label ID="dispbookingDate" runat="server"></asp:Label></span>
<span>Name<asp:Label TextMode="MultiLine" runat="server" ID="dispName"></asp:Label></span>
<span>Address:<asp:Label TextMode="MultiLine" runat="server" ID="dispAddress"></asp:Label></span>
</li>
</ul>
</div>
<div class="invoice-from">
<ul>
<li><span>Order No.<asp:Label ID="dispOrderNo" runat="server"></asp:Label></span> <span>
Wedding Date:<asp:Label runat="server" ID="dispWeddingDate"></asp:Label></span>
<span>Malayalam Date:<asp:Label runat="server" ID="dispWeddingMalayam"></asp:Label></span>
</li>
</ul>
</div>
</div>
<div>
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th class="style1">
Description
</th>
<th class="style2">
Rs.
</th>
<th>
Ps.
</th>
</tr>
</thead>
<tfoot>
<tr>
<th class="total-label" colspan="2">
Total:
</th>
<th class="total-amount">
<asp:Label ID="dispTotal" runat="server"></asp:Label>
</th>
</tr>
<tr>
<th class="total-label" colspan="2">
Adavance:
</th>
<th class="total-amount">
<asp:Label ID="dispAvance" runat="server"></asp:Label>
</th>
</tr>
<tr>
<th class="total-label" colspan="2">
Balance:
</th>
<th class="total-amount">
<asp:Label ID="dispBalance" runat="server"></asp:Label>
</th>
</tr>
</tfoot>
<tbody>
<tr>
<td class="style1">
Auditorium Rent
</td>
<td class="style2">
<asp:Label ID="dispRent" runat="server"></asp:Label>
</td>
<td>
<asp:Label ID="Label2" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td class="style1">
Dining Hall Rent
</td>
<td class="style2">
</td>
<td>
</td>
</tr>
<tr>
<td class="style1">
Kathir Mandapam
</td>
<td class="style2">
</td>
<td>
</td>
</tr>
<tr>
<td class="style1">
Tables and chairs
</td>
<td class="style2">
</td>
<td>
</td>
</tr>
<tr>
<td class="style1">
Electricity charge for water
</td>
<td class="style2">
</td>
<td>
</td>
</tr>
<tr>
<td class="style1">
Luxuary Tax
</td>
<td class="style2">
<asp:Label ID="dispLTax" runat="server"></asp:Label>
</td>
<td>
</td>
</tr>
<tr>
<td class="style1">
Central Service Tax
</td>
<td class="style2">
<asp:Label ID="dispCTax" runat="server"></asp:Label>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
<%-- <p class="amount-word">
Amount in Word: <span>
<asp:Label ID="dispAmountWord" runat="server"></asp:Label></span>
</p>--%>
</div>
<input type="button" onclick="PrintDiv()" value="Print" />
</div>
In your javascript you are searching for the div with id widget-content
your code: var divToPrint = document.getElementById('widget-content');
but in your html you have <div class="widget-content"> and it has no id, it only has a class.
So you have 2 options.
OPTION 1
Change class to id
OPTION 2
Change your javascript to search for the class like so
var divToPrint = document.getElementsByClassName('widget-content')
NOTE: this will return an array of elements with that class, whether theres only one or more.
So in order to select the one you want; assuming there is only 1 div with this class you do like so:
var divToPrint = document.getElementsByClassName('widget-content')[0]

Repeater Control With SeparatorTemplate

How to create horizontal line after each row in repeater control ? I think that I should use "SeparatorTemplate", I tried but didn't work. Can you tell me where to put the separator in the code, to make each line separated ?
This is my code
<asp:Repeater ID="EmployeesRepeater" runat="server">
<HeaderTemplate>
<table>
<tr>
<th>
First Name
</th>
<th>
Last Name
</th>
<th>
Title
</th>
<th>
HomePhone
</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<%#Eval("FirstName") %>
</td>
<td>
<%#Eval("LastName") %>
</td>
<td>
<%#Eval("Title") %>
</td>
<td>
<%#Eval("HomePhone") %>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
You could just put in a new row with an <hr> in it in your ItemTemplate.
Eg:
<ItemTemplate>
<tr>
<td>
<%#Eval("FirstName") %>
</td>
<td>
<%#Eval("LastName") %>
</td>
<td>
<%#Eval("Title") %>
</td>
<td>
<%#Eval("HomePhone") %>
</td>
</tr>
<tr>
<td colspan="4"><hr></td>
</tr>
</ItemTemplate>
or use the SeparatorTemplate:
<SeparatorTemplate>
<tr>
<td colspan="4"><hr></td>
</tr>
</SeparatorTemplate>
Here is some documentation on how a the SeperatorTemplate works.
EDIT: The SeparatorTemplate is great for when you need to do summary formatting or something that requires more HTML, controls, binding, etc. If you are looking for just adding lines you should be just using css to style the rows appropriately to get the desired output.
If you set the appropriate style to the tr element should be enough. There's no need to create an extra row just for adding a separator.
For example:
<ItemTemplate>
<tr class="item">
....
style
{
.item {
border-bottom:1px solid #cfcfcf;
}
}

Categories

Resources