Here i am a dragging a table(1) row and dropping it in another table(2) using asp.net mvc similar to this one http://www.redips.net/javascript/drag-and-drop-table-row/ and the values are from database .It is working fine and what i need is the html table values (i.e the values inside the td) of the table(2).how can i get those values and save it in dataset in asp.net MVC.Here is my code
<div id="drag">
<table class="tbl1">
<tr>
<th colspan="2">
Table 1
</th>
</tr>
<% foreach (var item1 in Model)
{ %>
<tr class="rl">
<td class="rowhandler">
<div class="drag row">
<%= Html.Encode(item1.Id) %>
</div>
</td>
<td class="rowhandler">
<div class="drag row">
<%= Html.Encode(item1.Title) %>
</div>
</td>
</tr>
<% } %>
<tr style="display: none;">
<td colspan="2">
<span>Message line</span>
</td>
</tr>
</table>
<table id="tab" runat="server">
<tr>
<th colspan="2" class="mark">
Table 2
</th>
</tr>
<tr class="rd">
<td>
</td>
<td>
</td>
</tr>
<tr style="display: none;">
<td colspan="2">
<span>Message line</span>
</td>
</tr>
</table>
</div>
Any suggesion?I am new to MVC
Use jQuery ajax to save the data in server. You can make a call to a controller action from your jquery with your data and it can save the data to your tables.
var mydata=""; /// read your table cells values and store it in this string
$.post("yourcontroller/action/", { data : mydata} ,function(response){
//do something with the response from action
});
As Brian already suggested, traversing the DOM maybe a bad idea. A better way would be to store the table2 data in a javascript array (whenever a drop event occurs add to the array, or remove from the array when cells are dragged off the table). Then have an ajax call to submit the whole array in one go.
If I am understanding this correctly when the page loads you have the data for both tables in the database. You can just keep a working set of the changes being made to the table and update those records accordingly. Add logic to the "drop" event in your JS to store the item's ID and it's new position.
This saves you from having to update unaffected records and also from traversing the entirety of both tables on submit.
Related
Trying to resolve a CSS issue that involves Bootstrap 5 "table-striped" and Blazor Razor component display.
I have a simple Blazor/Bootstrap 5 page where I display a table of content pulled from a service at runtime. The content is retrieved and displayed. I do see the Bootstrap CSS for a moment (an initial flash on page load), then the Bootstrap striped CSS seem to be getting overridden by some other dynamic styles that I cannot identify anywhere. In Chrome/Edge dev tools, there are no CSS styles applied to the table except the ones I've specified. The table ends up as a simple black and white table, which is incorrect.
I'm using a very basic table format with the new striped CSS as follows:
<table class="table table-striped table-success">
<thead>
<tr>
<th width="2%" class="text-center" scope="col">ID</th>
<th width="98%" scope="col">Detail</th>
</tr>
</thead>
#if (eventList.Any())
{
foreach (var e in eventList.Take(5).ToList())
{
<tr>
<td>#e.blahblah</td>
<td>#e.blahblah</td>
</tr>
}
}
</table>
Dynamic Table Content - Bootstrap 5 CSS not working
I also removed the possibility that it is the TR/TD generation causing the issue using this approach (which is just to test my theory):
<table class="table table-striped table-success">
<thead>
<tr>
<th class="text-center" scope="col">ID</th>
</tr>
</thead>
<tr>
<td class="text-center">
#if (eventList.Any())
{
foreach (var e in eventList.Take(5).ToList())
{
#e.blahblah
}
}
</td>
</tr>
</table>
However, the Bootstrap 5 CSS is still overridden by Blazor when it gets rendered/displayed. After the initial page load flash (where I see the styling for a split second), the table CSS goes to the simple black and white format.
To establish a control to start from, I dropped in some basic/static code and the striped table works perfectly. No issues. The colored, striped table displays properly. For example:
<tr>
<td>Foo</td>
<td>Too</td>
</tr>
<tr>
<td>Foo</td>
<td>Too</td>
</tr>
<tr>
<td>Foo</td>
<td>Too</td>
</tr>
Static Table Content - Bootstrap 5 CSS works
This seems to be a bug with the Blazor rendering engine (?). How can I get the Blazor runtime tabular content to retain the Bootstrap 5 styling? What is overriding the CSS?
Please advise.
Thanks for the info Uxonith. By way of an answer, the issue was simply a missing wrapper around the / content. For example...
<table class="table table-striped table-success">
<thead>
<tr>
<th width="2%" class="text-center" scope="col">ID</th>
<th width="98%" scope="col">Detail</th>
</tr>
</thead>
<tbody>
#if (eventList.Any())
{
foreach (var e in eventList)
{
<tr>
<td class="text-center">#e.Id</td>
<td>#e.EventInfo</td>
</tr>
}
}
</tbody>
</table>
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 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>
I'm trying to use a simple table nested in a cell to show a graph on my elections result page.
<td>
<%: result.candidateName %>
<table style="border:0; padding:2px;">
<tr>
<td style="width:50px; border:0; height:15px; color:Blue; padding:0; font-size:75%;"><%: result.percentWon %>%</td>
<td style="background-color:Blue; width:400px; border:0; height:15px;"></td>
</tr>
</table>
</td>
What I need to do is change the width figure in the cell style (set to 400px now) to be 4*result.percentWon, but I cant figure out how to put Aligator tags in the middle of the style string.
Yes I'm a noob (o: Can anyone school me?
You can put <%: ... %> where-ever you want:
<td style="background-color:Blue; width:<%:4*result.percentWon%>px; border:0; height:15px;"></td>