Repeater Control With SeparatorTemplate - c#

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;
}
}

Related

Find index value of repeater to open new webform and read data from SQL

How do I pass the ID value linked to a repeater row to open the values in a new webform with textfields which can then be edited and updated in repeater (SQL Stored procedure). I am new to repeaters and I managed to do this using a GridView but I'm not sure how to do it with a repeater.
What I did with the GridView c# which worked perfect in Default.aspx.cs:
if (dgvEmployees.SelectedIndex != -1)
{
indexId = dgvEmployees.SelectedRow.Cells[1].Text;
Response.Redirect("About.aspx?&Id=" + indexId);
}
What is received in About.aspx.cs
protected void Page_Load(object sender, EventArgs e)
{
if(!String.IsNullOrEmpty(Request.QueryString["Id"]))
{
idNum = Convert.ToInt32(Request.QueryString["Id"]);
if(!IsPostBack)
{
FillEmployeeData();
}
}
}
This is the repeater code:
<asp:Repeater ID="rptList" runat="server" OnItemDataBound="rptList_ItemDataBound" Visible="true">
<HeaderTemplate>
<table class="table table-bordered" id="VersionsTable">
<tr>
<th>Actions
</th>
<th>Employee Number
</th>
<th>ID Number
</th>
<th>Employee Name
</th>
<th>Employee Surname
</th>
<th>Number of Dependants
</th>
<th>Race
</th>
<th>Gender
</th>
<th>Delete
</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tbody>
<tr style="cursor:pointer" onmouseover="style.backgroundColor='#E6E6E6'" onmouseout="style.backgroundColor=''" onclick="style.backgroundColor='#727A91'">
<asp:HiddenField ID="hIDfield" runat="server" Value='<%#Eval("Id")%>' />
<td>
<asp:button runat="server" OnClick="btnEdit_Click" CssClass="btn btn-default" Text="Edit"/>
</td>
<td onclick="PopupEdit('<%# Eval("EmployeeNumber") %>')">
<%# Eval("EmployeeNumber") %>
</td>
<td>
<%# Eval("IDNumber") %>
</td>
<td>
<%# Eval("employeeName") %>
</td>
<td>
<%# Eval("employeeSurname") %>
</td>
<td>
<%# Eval("numberOfDependants") %>
</td>
<td>
<%# Eval("RaceId") %>
</td>
<td>
<%# Eval("GenderId") %>
</td>
<td style="text-align:center">
<asp:CheckBox ID="chkDelete" CssClass="form-control" runat="server" />
</td>
</tr>
</tbody>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
Thank you for your help!

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>

Implementing Different Font Styles in a Single FormView 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>

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();

JQuery Hide table with an enumerated list

I have the following that will enumerate over the model and add an invoice and a date.
Then under that I want to have a table with the line items for that invoice that is collapsible for each invoice. I am not sure how to do this while enumerating over the model, I don't know how to uniquely ID the table, then I am not sure how to tell the jquery function which table we need to hide.
here is the code I have now. I added a comment next to the table I am wanting to hide. There is an anchor tag above it that calls the javascript function in which is the jquery hide function is
<table class="themedtable"
cellspacing="0">
<tr>
<th style="text-align: left">
Invoice
</th>
<th>
Order Date
</th>
</tr>
<% foreach (var item in Model)
{ %>
<tr>
<td style="text-align: left">
<strong>
<%=Html.Encode(item.Invoice)%></strong>
</td>
<td>
<%=Html.Encode(String.Format("{0:d}",item.invcte))%>
</td>
</tr>
<tr>
<td colspan="2">
Show/Hide Table
</td>
</tr>
<%if (item.LineItemList.Count > 0)
{ %>
<tr>
<td>
<table style="margin-left: auto; margin-right: auto; width: 90%" cellspacing="0"> //this is the table i need to id and collapse when the above link is clicked
<tr>
<th>
Part
</th>
<th>
Desc
</th>
<th>
Qty
</th>
<th>
Qty Shipped
</th>
<th>
Status
</th>
</tr>
<%foreach (var lineItem in item.LineItemList)
{ %>
<tr>
<td style="width: 10%">
<%=Html.Encode(lineItem.Partno) %>
</td>
<td style="width: 50%">
<%=Html.Encode(lineItem.Description) %>
</td>
<td style="width: 10%">
<%=Html.Encode(lineItem.Qty) %>
</td>
<td style="width: 20%">
<%=Html.Encode(lineItem.QtyShipped) %>
</td>
<td style="width: 10%">
<%=Html.Encode(lineItem.Status) %>
</td>
</tr>
<%} %>
</table>
</td>
</tr>
<%} %>
<%} %>
</table>
<script type="text/javascript">
function toggletable() {
$(//selector).hide();
}
Here are my two cents worth. I think you may be approaching this in a manner that will make life hard for you.
What I'd do is the following.
Add your invoices if you like and
attach a click event to them.
On click of the invoice, do an Ajax
postback, using jQuery, to get the
line items.
Your ActionResult should then grab
those line items, pass them to a
PartialView and return the
PartialView back to the client.
Then in your Success jQuery Ajax
method, you replace the contents of
a div with the returned HTML.
This saves potentially a lot of data on the page and also makes it look quite neat.

Categories

Resources