I realize this is a strange/simple question. I have HTML—tables and rows—that make up a grid. I need the resulting grid to look exactly like the HTML does, with data pulled from a DataTable.
How should I go about doing that? If I replace the HTML with a GridView the result will look different from what I need it to look like. Do I create a custom grid class that spits out tables and rows?
To clarify: I've been given an HTML grid...
<div>
<table>
<tr>
<td>row 1 col 1</td>
<td>row 1 col 2</td>
</tr>
<tr>
<td>row 2 col 1</td>
<td>row 2 col 2</td>
</tr>
</table>
</div>
...which I now need to populate with data from a table, and preserve the original HTML.
If you want to use ASP.Net databinding capabilities, go with a Repeater. The markup will look something like this:
<table>
<thead>
<tr>
<th>Heading</th>
</tr>
</thead>
<tbody>
<asp:Repeater runat="server">
<ItemTemplate>
<tr>
<td><%# Eval("SomeFieldName") %></td>
</tr>
</ItemTemplate>
</asp:Repeater>
</tbody>
</table>
You can also build the markup manually in the code-behind by instantiating table/row/cell objects and adding them to the controls collection of the page, control, or parent container control. This tends to be time-consuming but it's a valid option in some cases, such as when you wish to have highly dynamic content that isn't easy to express in a Repeater.
A third option is to mix server markup with client markup, e.g.
<table>
<thead>
<tr>
<th>Heading</th>
</tr>
</thead>
<tbody>
<% foreach( var obj in someCollection ){ %>
<tr>
<td><%= obj.Property %></td>
</tr>
<% } %>
</tbody>
</table>
The last option is quite similar (albeit more verbose) to Razor syntax used in ASP.Net MVC views.
I think your best bet for that would be a repeater. Link below.
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.repeater(v=vs.100).aspx
Another option would be to use a ListView with your HTML table setup as the LayoutTemplate.
quick example:
<asp:ListView ID="MyListView" runat="server">
<LayoutTemplate>
<table id="Table1" cellpadding="1" width="100%" runat="server">
<tr id="Tr1" runat="server">
<th id="Th1" style="font-weight: bold; text-align: left" runat="server">
Header1
</th>
<th id="Th2" style="font-weight: bold; text-align: left" runat="server">
Header2
</th>
</tr>
<tr runat="server" id="itemPlaceholder" />
</table>
</LayoutTemplate>
<ItemTemplate>
<tr id="Tr2" runat="server">
<td style="text-align: left">
<%# Eval("Field1")%>
</td>
<td style="text-align: left">
<%# Eval("Field2")%>
</td>
</tr>
</ItemTemplate>
</asp:ListView>
Related
this is my code to view products as list view inside each item in list view i want to view list of items how can i do this? i can not understand the concept of the eval function and i want to know if i can pass to it list items from code behind without data Bind or it basically depends on data-bind ?
<asp:ListView ID="mylistView" runat="server" GroupItemCount="3">
<EmptyDataTemplate>
<table id="Table2" runat="server">
<tr>
<td>
No data was returned.
</td>
</tr>
</table>
</EmptyDataTemplate>
<EmptyItemTemplate>
<td id="Td3" runat="server" />
</EmptyItemTemplate>
<GroupTemplate>
<tr id="itemPlaceholderContainer" runat="server">
<td id="itemPlaceholder" runat="server">
</td>
</tr>
</GroupTemplate>
<ItemTemplate>
<table border="0" width="300" style="display: inline-block; background-color: Lime;">
<tr>
<td>
 
</td>
<td>
<a href='ContactUs.aspx'>
<image src='productsImg/<%# Eval("Pic_Path") %>' width="100" height="75" border="0">
</a> 
</td>
<td>
<a><b style="text-decoration: underline;">
<%# Eval("MenuName") %></b> </a>
<br />
want to view here list of items
I
</td>
</tr>
</table>
</ItemTemplate>
<LayoutTemplate>
<table id="Table1" runat="server">
<tr id="Tr1" runat="server">
<td id="Td1" runat="server">
<table id="groupPlaceholderContainer" runat="server">
<tr id="groupPlaceholder" runat="server">
</tr>
</table>
</td>
</tr>
<tr id="Tr2" runat="server">
<td id="Td2" runat="server">
</td>
</tr>
</table>
</LayoutTemplate>
</asp:ListView>
this is code behind...
dataSource.ConnectionString = connetionString;
dataSource.SelectCommand = "SELECT * FROM tbl_WebMenu where MenuID like'3_';";
mylistView.DataSource = dataSource;
mylistView.DataBind();
thanks in advance.
Eval is used to bind to an UI control that is supposedly read only. it can be used to set any type of property of control.
The complete syntax is "Databinder.Eval", it has to be used in conjunction with databind.
Look at this example.
<asp:TemplateField>
<ItemTemplate>
<asp:Label ID="lblRead" runat="server" Text='<%# Eval("FieldName") %>'>
</asp:Label>
</ItemTemplate>
</asp:TemplateField>
you can even set a property of control using eval. it provides flexibility.
But there is a downside of eval as it uses reflection to evaluate the expression.
Read more here http://msdn.microsoft.com/en-us/library/4hx47hfe.aspx#remarksToggle
I tried to using Datalist and Something goes wrong I cant solve it !
On the Output... why the extra row is created after each row??
what's my fault?
Look at my codes :
<asp:DataList ID="DataList1" runat="server" DataKeyField="Id" DataSourceID="SqlDataSource1" Width="233px">
<HeaderTemplate>
<table>
<tr>
<th>Id</th>
<th>Title</th>
<th>InTheater</th>
<th>Spam</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:DataList>`
I just dealt with this problem myself. I solved it by removing the <tr> in the template. So instead of
<tr>
<th>Id</th>
<th>Title</th>
<th>InTheater</th>
<th>Spam</th>
</tr>
I used
<th>Id</th>
<th>Title</th>
<th>InTheater</th>
<th>Spam</th>
I don't know why it adds the extra rows but this was the solution I found.
Posting for others looking for the answer.
I have some HTML
<table class="table table-hover table-striped table-responsive table-bordered">
<tr class="row">
<td colspan="3" class="col-md-3">Location</td>
<td colspan="4" class="col-md-4">Info</td>
<td colspan="2" class="col-md-2">Date/Time</td>
<td colspan="1" class="col-md-1">Mandatory</td>
<td colspan="2" class="col-md-2">Edit</td>
</tr>
<asp:Label ID="lblNewProjectConferences" runat="server"></asp:Label>
</table>
with some ASP.NET methods:
lblNewProjectConferences.Text = UtilHTML.GetConferncesHTML(conferences, editor);
I am essentially building the HTML in a method and then injecting into a label which is inside of a table, the result being rows added to the table properly formatted. This is all working as expected:
But, when I do the following from javascript
document.getElementById("lblNewProjectConferences").innerHTML += response;
I get something like this:
I "inspected element" from my browser and the Label is appearing before the table in HTML. This makes no sense to me.
UPDATE: The answers so far didn't help. The label code is appearing before the table code when I use innerHTML, it's not appearing first and then the table appears
I see you're using bootstrap.
You could do this also.
$(document).ready(function () {
document.getElementById("lblNewProjectConferences").innerHTML += response;
});
Edited:
Try this:
<asp:Label ID="lblNewProjectConferences" runat="server"></asp:Label>
<table class="table table-hover table-striped table-responsive table-bordered" id="gridTable">
<tr class="row">
<td colspan="3" class="col-md-3">Location</td>
<td colspan="4" class="col-md-4">Info</td>
<td colspan="2" class="col-md-2">Date/Time</td>
<td colspan="1" class="col-md-1">Mandatory</td>
<td colspan="2" class="col-md-2">Edit</td>
</tr>
</table>
And in the javascript:
<script type="text/javascript">
$(document).ready(function () {
$('#gridTable').appendTo($("#lblNewProjectConferences").html());
});
</script>
You have positioned the asp:Label element inside the table before the closing </table> tag. The browser does not recognize the label as part of a table, so it renders it before it renders the table. Moving the label after the </table> tag should resolve the problem.
I use visual studio 2010 with framework2.0
I design a page use c# ,now ,just called A.aspx.
the page have a table to layout,
like
<table> <tr>
<td>
Name
</td>
<td>
<asp:TextBox .../>
<div id="div1" style="vertical-align: bottom;">
<img.. />
</div>
<div><img ../></div>
<asp:Label .../>
<asp:Label .../>
</td>
</tr>
</table>
Now ,I want to let second<td></td> layout one row. how to set up?
I try <td style ="float:left"> but not worked,it always show two row.
can somebody help me with this?
First understand your layout, here is an example with borders
If you want to float elements try a layout using div and css
A layout with tables is very hard to work with and nobody is doing it anymore. You can use tables for specific situation only if you like but most of the time try to use div layout and the other elements to organize content.
HTML
<table class="borde">
<tr class="borde">
<td class="borde">
Name
</td>
<td class="borde">
fffff
<div class="divRojo"></div>
fffff
</td>
</tr>
</table>
CSS
.borde { border:1px solid black; }
.divRojo { border:1px solid red; }
With one more row and the div
<table class="borde">
<tr class="borde">
<td class="borde">
Name
</td>
<td class="borde">
fffff
<div class="divRojo"></div>
fffff
</td>
</tr>
<tr>
<td colspan="2">
<div>Content in one column in a new row</div>
</td>
</tr>
</table>
You want your second <td> in one row? So, create another <tr>?
<table>
<tbody>
<tr>
<td>
Name
</td>
</tr>
<tr>
<td>
<textarea></textarea>
</td>
</tr>
</tbody>
</table>
http://jsbin.com/uJenUVOx/1/edit
I have fix this question ,the second <td> use <table> then can solve that question.
I know this is a pretty strange question but I need to know which item was clicked before the click event fires on the repeater.
This will tell me that it was the repeater that is doing the post back, but not which item was clicked:
Request.Params["__EVENTTARGET"].ToString()
How do I find out which repeater item was clicked?
If it helps, here is the markup for the repeater in full.
<asp:Repeater ID="ResultsRepeater" runat="server">
<HeaderTemplate>
<table cellpadding="3" cellspacing="0" width="360">
<tr bgcolor="#d5d5e6">
<th width="10">
</th>
<th>
Content Type
</th>
<th>
Items Found
</th>
<th>
Results
</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr bgcolor="#efefef">
<td width="10">
<img src="http://www.exactmobile.co.za/images/li_x.gif">
</td>
<td>
<%# DataBinder.Eval(Container, "DataItem.Name") %>
</td>
<td align="center">
<b class="brown">
<%# DataBinder.Eval(Container, "DataItem.Count") %></b>
</td>
<td align="center">
<asp:LinkButton runat="server" CommandName="Results">Show <font class="red">»</font></asp:LinkButton>
</td>
</tr>
</ItemTemplate>
<AlternatingItemTemplate>
<tr bgcolor="#ffffff">
<td width="10">
<img src="http://www.exactmobile.co.za/images/li_x.gif">
</td>
<td>
<%# DataBinder.Eval(Container, "DataItem.Name") %>
</td>
<td align="center">
<b class="brown">
<%# DataBinder.Eval(Container, "DataItem.Count") %></b>
</td>
<td align="center">
<asp:LinkButton runat="server" CommandName="Results">Show <font class="red">»</font></asp:LinkButton>
</td>
</tr>
</AlternatingItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
Did you try setting up event handlers for each of your link button controls? If not, doing that might as well take you exactly to respective event handler automatically.
Also see if this helps ASP.NET - Add Event Handler to LinkButton inside of Repeater in a RenderContent call
Worked around the issue by just using normal anchors in the template and setting their hrefs to the actual pages in the controls Pre_Render method.