I want to add rows to a table with javascript, but I also want to be able to find out what those rows are on postback. Is there a way to do that?
I also want to be able to populate the original rows in the table from the server (I'm thinking with a repeater). Is it still possible to do that?
That's not much of a description but I think that covers it...
The code currently looks something like this
<table id="myTable">
<tr> <td> some static row </td> </tr>
<asp:repeater id="rptTest" runat="server">
<HeaderTemplate>
<tr class="dgheader">
<th> head1 </th>
<th> head2 </th>
<th></th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr class="<%# (Container.ItemIndex%2 == 0) ? "dgitem" : "dgalternatingitem" %>">
<td><%# Eval("val1") %> </td>
<td><%# Eval("val2") %> </td>
<td><a class="dgdeletebutton" href="javascript:delete(this)"></a></td>
</tr>
</ItemTemplate>
</asp:repeater>
</table>
At the moment all I'm wondering is how, server side, I can get a version of the table that has whatever changes I made client side.
In order to get any information from a client in the manner you describe, you need to include a field in your form submit.
You will probably want hidden(s) field. Any time you add a row, either add a hidden field for each value you want to capture (such as val1 and val2) or have one hidden field, and when you add a row, append the information you want to the existing row.
I would warn against posting straight html, you probably only need the values not the full markup, and you most likely don't want to sanitize the html and parse it for the information you want.
So to get you a head start you can add hidden inputs:
<tr class="<%# (Container.ItemIndex%2 == 0) ? "dgitem" : "dgalternatingitem" %>">
<input type="hidden" name="Row[1].val1" value="myvalue" />
<td><%# Eval("val1") %> </td>
<input type="hidden" name="Row[1].val2" value="myvalue" />
<td><%# Eval("val2") %> </td>
<td><a class="dgdeletebutton" href="javascript:delete(this)"></a></td>
</tr>
You can then get the submitted values on the backend:
HttpContext.Current.Request.Form["Row[1].val1"]
This is from memory, the line above might not be correct.
Related
I'm new to ASP.NET techonology and I'm trying to use datatable Jquery with a repeater.
But it doesn't work with the value inside the table. It work with just the head (see below). These data come from a database.
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="Model2">
<HeaderTemplate>
<table id="table_id">
<thead>
<tr>
<th>Nom</th>
<th>ip</th>
<th>askit</th>
</tr>
</thead>
</HeaderTemplate>
<ItemTemplate>
<tbody>
<tr>
<td><%# Eval("Li_Id")%></td>
<td><%# Eval("Li_ip")%> </td>
<td><%# Eval("Li_nom_askit")%> </td>
</tr>
</tbody>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
And here it's what I get
Screen of what I have
So for example the line with id '594' is not in the datable that I have create.
I try to use a ListView but it doesn't work.
Does anybody know why ?
Thanks
You're creating a separate tbody around each row. Move the opening tbody tag to the end of the header template and the closing tbody tag to the beginning of the footer template.
(I'm assuming you're referring to the datatables.net jQuery plugin.)
Iam using jquery in asp.net
I have one user control in which i have div and in div table and in table tr and in tr td and in td i have lables.
ASCX :
<div ID="Container" runat="server" class="dvContainer">
<table ID="Table" class = "Tablecs">
<thead><tr>
<td colspan="2">
<asp:Label ID="lbl1" Text="Swiss" runat="server" /></td>
</tr>
</thead>
<tr>
<td>ABC</td>
<td>DEF</td>
</tr>
<tr>
<td><asp:Label ID="lblPA" Text="SUN 12/21 05:04" runat="server" /></td>
<td ><asp:Label ID="lblPD" Text="SUN 12/21 19:00" runat="server" /></td>
</tr>
<tr>
<td><asp:Label ID="lblAA" Text="SUN 12/21 05:04" runat="server" /></td>
<td ><asp:Label ID="lblAD" Text="SUN 12/21 19:00" runat="server" /></td>
</tr>
</table>
i want to bind data dynamically to these user control. i.e., binding data to lables in user contol.
my Jquery
$div.find(".Table").text(oPorts[iCount].Name); // my result is an array of oPorts and i have filed as Name
But this is not working fine.
when i checked into code dynamically its generating SPAN for each and every lable
How to find that SPAN id dynamiccaly in a loop and bind data to lables??
Any help is appreciated. Thanks in Advance.
suppose you have a usercontrol with a markup like given below
<%# Control Language="C#" AutoEventWireup="true"
CodeBehind="WebUserControl1.ascx.cs" Inherits="DOTNET_FORMS.WebUserControl1" %>
<div id="Container" runat="server" class="dvContainer">
<table id="Table" class="Tablecs">
<tr>
<td>
<asp:Label ID="lblPA" Text="SUN 12/21 05:04" runat="server" />
</td>
<td>
<asp:Label ID="lblPD" Text="SUN 12/21 19:00" runat="server" />
</td>
</tr>
</table>
</div>
and you have registered this usercontrol on your .aspx page like this:
<%# Register TagPrefix="UC" TagName="Test" Src="~/WebUserControl1.ascx" %>
and used it like this:
<UC:Test ID="uc1" runat="server" />
then, when you run your page, your elements get rendered something like
<div id="uc1_Container" class="dvContainer">
<table id="Table" class="Tablecs">
<tr>
<td>
<span id="uc1_lblPA">SUN 12/21 05:04</span>
</td>
<td>
<span id="uc1_lblPD">SUN 12/21 19:00</span>
</td>
</tr>
<tr>
<td>
<span id="uc1_lblAA">SUN 12/21 05:04</span>
</td>
<td>
<span id="uc1_lblAD">SUN 12/21 19:00</span>
</td>
</tr>
</table>
</div>
see how ids of your labels and other elements (elements with runat="server" attribute ) got changed i.e.
lblPA > uc1_lblPA
lblPD > uc1_lblPD
Container > uc1_Container
so, you have to look out for these changes, because only then you can grab these elements using jQuery, cause jQuery is a client side language, it executes, after the server side code (runat="server") has executed.
However, if you do not want to look out for modified id, you can do following
remove runat="server" attribute, and make sure your ids are unique, all of them
let the runat="server" attribute be their, place an attribute clientidmode="static" on all of your server side controls. and Ids wont change.
use ClientId i.e. in your jQuery selector, grab an element like this: $('#"+'<%= lblPA.ClientID %>');
now, since your IDs are unique, you don't need to find, directly grab the elements like this:
$('#lblPA').text();
or if you want to loop through all the tds of your table with class Tablecs, do this:
$('.Tablecs tr td').each(function(index, item){
alert($(item).text());
});
I have a html table in my ASPX page and would like to use it in code-behind for some processing. The table is shown as below:
<table class="hovertable" id="tblData">
<tr>
<th>ID:</th>
<td colspan="3" style="font-weight: bold">
<%= Eval("ID") %>
</td>
</tr>
<tr>
<th>Date:</th>
<td><%# Eval("Date", "{0:dd-MMM-yyyy}") %></td>
<th>Amount:</th>
<td><%# Eval("Amount", "{0:C}") %>
</tr>
</table>
However, when I add the runat="server" attribute to my table, I am produced with the following error:
CS1502: The best overloaded method match for 'System.Web.UI.HtmlControls.HtmlTableRowCollection.Add(System.Web.UI.HtmlControls.HtmlTableRow)' has some invalid arguments
Any ideas what may be wrong here? Am I missing out anything?
An html table (which is not a pure asp.net server control) can't contain asp.net server controls. Take a look at this answer:
http://forums.asp.net/t/1524580.aspx/1
In my opinion, you should ask yourself the following question?
Do i need to solve this client or server side?
if your answer is client, you should implement the update logic with Ajax, otherwise you could use the ASP.NET server control and implement it server side.
OK guys, I have solved this issue by myself. The problem causing it was because of a <td> not having the corresponding <tr> element.
It was something like below:
<table class="hovertable" id="tblData">
<tr>
<th>ID:</th>
<td colspan="3" style="font-weight: bold">
<%= Eval("ID") %>
</td>
</tr>
<tr>
<th>Date:</th>
<td><%# Eval("Date", "{0:dd-MMM-yyyy}") %></td>
<th>Amount:</th>
<td><%# Eval("Amount", "{0:C}") %>
</tr>
<td colspan='4'>
Some data....
</td>
</table>
I think you can use this for the same purpose
<asp:Table ID="Table1" runat="server">
</asp:Table>
What you are trying to do is adding runat="server" attribute to a HTML control
Try adding <asp:Labels> where you need to manipulate data.
<table>
<tr><td><asp:Label id="lblRow" runat="server" /></td></tr>
</table>
Table columns and rows cannot be accessed via code behind if you have runat="server" in the tag because they are pure html.
Another way is to use a StringBuilder to create the html table in the code-behind and and asp:LiteralControl to output the table.
Also if we remove the tbody element it will not throw error for td mismatch
Nikhil Mittal
Remove the below elements
<thead>
</thead>
<tbody>
</tbody>
I have a table in asp.net page and i want to insert the data which will be recieved from service call through c# code behind. Any idea on how to do this.
Below is my table.
<table id="DataTable" class="style1">
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
I just need to insert values recieved from service call in place of  .
In your aspx page asp:Label controls and assign the values from code behind by accessing them using Id.
Inside .aspx
<asp:Label Id="lblName" runat="server">
In code behind
lblName.Text = "Value from Service";
If you need to repeat this table use GridView.
Use the asp:Table control instead.. It gives you much more control from server side than a normal html tag :)
And it ofc render as a normal table client side
If you persist on working with pure html table you can use an new/old style to control it.
like so:
<table>
<% foreach ( var o in objects ) { %>
<!--UserControl -->
<tr>
<td> can put here data like so: <%= o.Id %> </td>
</tr>
<!--UserControl -->
<%}%>
</table>
or you can use Repeater and Bind data if it's dynamic.
If data is not dynamic and your table will not grow or change size, you can use a little OOP for this.
like so:
create in your class properties and then populate them.
public string MyLabel { get; set; }
put something in page load.
in aspx do it like so..
<table>
<tr>
<td> <%= MyLabel %> </td>
</tr>
</table>
or
<table>
<tr>
<td> <asp:Label ID=|"myText" runat="server"/> </td>
</tr>
</table>
Make the table Html server side control. Try this:
<table runat="server" id="DataTable" class="style1">
<tr>
<td id="td1" runat="server">
</td>
<td id="td2" runat="server">
</td>
<td id="td3" runat="server">
</td>
<td id="td4" runat="server">
</td>
</tr>
Now in the code behind
td1.InnerText="xx" or td1.InnerHtml=..
I have a listview control on an .aspx page. Inside this list view i want to check "Type" property which comes from database. here is the example code :
<ItemTemplate>
<%# if(Convert.ToInt32(DataBinder.Eval(Container.DataItem,"Type")) == 0){ %>
<tr class="item">
<td>
<%# Convert.ToDateTime(Eval("WorkDate")).ToShortDateString() %>
</td>
<td style="text-align: center;">
<%# Eval("SkillName") %>
</td>
</tr>
<%# } else if (Convert.ToInt32(DataBinder.Eval(Container.DataItem,"Type")) == 1) {%>
<tr class="item">
<td colspan="2">
<strong><%# Convert.ToDateTime(Eval("WorkDate")).ToShortDateString() %></strong>
</td>
</tr>
<% } %>
</ItemTemplate>
As a last resort i tried to user DataBinder.Eval() but i get the exception "Expected class, delegate, enum, interface, or struct". What can i be doing wrong? Writing a function in code-behind isn't an option for me. Is there a way to achieve this?
Here is the full code, made fancy and short.
<ItemTemplate>
<tr class="item">
<td colspan="<%# Eval(Container.DataItem,"Type")) == 0 ? 1:2%>">
<strong><%# Convert.ToDateTime(Eval("WorkDate")).ToShortDateString() %></strong>
</td>
<td style="text-align: center;" visible="<%# Eval(Container.DataItem,"Type")) == 1>">
<%# Eval("SkillName") %>
</td>
</tr>
</ItemTemplate>
Untested, as I don't have Visual Studio available at the moment, but since HtmlTableRow has a Visible property, the following should work:
<tr class="item" runat="server" Visible='<%# Convert.ToInt32(Eval("Type")) == 0 %>'>
...
</tr>
yes you will have to do some client side scripting though... I would suggest jquery..
you would basically loop through all of the rows in jquery and based on the data in the row you would be able to change the innerhtml of the row object based on the ".item" selector to determine whether it should be in one format or the other.