Add dynamics <tr> in the table in mvc - c#

Hello friends I have a problem is that I want to show the return value of a field of the database in the table .. My problem is that it shows all the return values in one head .. I want only 8 numbers in each row Show me and dynamically add another line .. Thank you for your help
</div>
<div role="tabpanel" class="tab-pane fade" id="Tab3">
#if (ViewBag.ProductPartNumber != null)
{
List<ShowProductPartNumberViewModel> list = ViewBag.ProductPartNumber;
<div class="table-responsive">
<table class="table table-striped">
<tbody>
#foreach (var item in list)
{
<tr>
<td>#item.ProductNumberTitle </td>
</tr>
}
</tbody>
</table>
</div>
}
</div>

Try this:
#for (int i = 0; i < list.Count(); i += 8)
{
var items = list.Skip(i).Take(8).ToList();
System.Text.StringBuilder sb = new System.Text.StringBuilder();
<tr>
<td>
foreach (var item in items)
{
sb.Append(item.ProductNumberTitle)
}
sb.ToString();
</td>
</tr>
}

Related

Razor View Html Table layout

I have a table in a razor view that is displaying data like so
There are fields that I'd like to group like so
I dont think I'm going to achieve this by grouping because I'm going to loose data. Not sure what approach to take?
This is my markup
<div class="row">
<table class="arrowes-table table-striped">
<thead>
<tr>
<th>Driver Name</th>
<th>Alarm Type : Count</th>
<th>Total Distance For Period</th>
<th>Avg Per Km Driven</th>
<th>Relative Driver Score</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.DriverBehaviour.OrderByDescending(x => x.DriverName))
{
<tr>
<td>#Html.HiddenFor(m => item.DriverId) #Html.ActionLink(item.DriverName, "Operator", "Operators", new { area = "VehicleManagement", operatorId = item.DriverId })</td>
<td>#item.AlarmType : <span class="brand-red">#item.TypeCount</span></td>
<td>#item.TotalDistanceForPeriod</td>
<td>
#{
var avg = #Math.Truncate(1000 * item.AverageAlarmPerKmDriven) / 1000;
}
#avg
</td>
<td>
#{
var relScore = #Math.Truncate(1000 * #item.RelativeDriverScore) / 1000;
if (relScore.ToString().StartsWith("-") == true)
{
<span class="brand-red">#relScore</span>
}
if (relScore.ToString().StartsWith("-") == false)
{
<span class="brand-green">+#relScore</span>
}
}
</td>
</tr>
}
</tbody>
</table>
</div>
Thanks for any ideas :)
It's ok, I got it
<div class="row">
<table class="arrowes-table table-striped">
<thead>
<tr>
<th>Driver Name</th>
<th>Alarm Type : Count</th>
<th>Total Distance For Period</th>
<th>Avg Per Km Driven</th>
<th>Relative Driver Score</th>
</tr>
</thead>
<tbody>
#foreach (var group in Model.DriverBehaviour.GroupBy(item => item.DriverName))
{
<tr>
<td>#Html.ActionLink(#group.Key, "Operator", "Operators", new { area = "VehicleManagement", operatorId = group.FirstOrDefault().DriverId })</td>
<td>
<ul class="list-unstyled">
#foreach (var item in group)
{
<li> #item.AlarmType : <span class="brand-red">#item.TypeCount</span></li>
}
</ul>
</td>
<td>
<ul class="list-unstyled">
#foreach (var item in group.GroupBy(x => x.TotalDistanceForPeriod))
{
<li>#item.Key</li>
}
</ul>
</td>
<td>
<ul class="list-unstyled">
#foreach (var item in group)
{
var avg = #Math.Truncate(1000 * item.AverageAlarmPerKmDriven) / 1000;
<li>
#avg
</li>
}
</ul>
</td>
<td>
<ul class="list-unstyled">
#foreach (var item in group)
{
var relScore = #Math.Truncate(1000 * #item.RelativeDriverScore) / 1000;
if (relScore.ToString().StartsWith("-") == true)
{
<li class="brand-red">#relScore</li>
}
if (relScore.ToString().StartsWith("-") == false)
{
<li class="brand-green">+#relScore</li>
}
}
</ul>
</td>
</tr>
}
</tbody>
</table>
</div>
Produces this

How can i add some pages to a table in razor

I created a view with two tabs.
One of the tabs has to be split in multiple pages.
Don't know how to do that with pagination.
Do i need a separate view for each tab or it can still be done in one view?
Can you please help me with an example for the same view?
<div class="w3-bar w3-dark-grey">
<button class="w3-bar-item w3-button tablink w3-red" onclick="openTab(event,'Statistics')">Statistics</button>
<button class="w3-bar-item w3-button tablink" onclick="openTab(event, 'History')">History</button>
</div>
<div id="History" class="w3-container w3-border city" style="display:none">
<h2>History</h2>
#helper ShowHistory(Site.classes.HistoryStruct[] aHistory)
{
<br>
<table class="table table-hover table-bordered">
<thead>
#if (aHistory == null)
{
<tr></tr>
}
else
{
<tr>
<th>Username</th>
<th>Info</th>
<th>Date</th>
</tr>
}
</thead>
<tbody id="tblStatistics">
#{string sClass = "class='divaproved'";
for (int i = 0; i < aHistory.Length; i++)
{
<tr #Html.Raw(sClass)>
<td>#aHistory[i].UserName</td>
<td>#aHistory[i].Info</td>
<td>#aHistory[i].Date</td>
</tr>
}
}
</tbody>
</table>
}
<div class="container">
#ShowHistory(Site.classes.UserAccessDB.aHistory)
</div>
</div>
If you just need to paginate your table you can try this js: DataTables
Give an ID to the table you need to paginate and add the following code at the end of your page
$(document).ready( function ()
{
$('#myTable').DataTable();
}
);

Select rows and pass data(ID) to next view, MVC5 C#

I have been trying to select multiple rows from my table of data(Generated using EF) and then pass all selected rows to the next view to perform some action. On passing the data to the next view i am getting the following error :
System.NullReferenceException: 'Object reference not set to an instance of an object.'
Temporary local of type 'int[]'> was null.
Any help on how to solve this will be appreciated.
Below is my code:
View:
<div class="row">
<div class="col-md-12">
<!-- Advanced Tables -->
<div class="panel panel-default">
<div class="panel-heading">
#using (Html.BeginForm()) {
<form action="#" method="post">
<label>Search by Company Name:</label> #Html.TextBox("SearchString")
<input type="submit" value="Go" placeholder="Search" style="background-color: #0a9dbd; color: white; border-color: #0a9dbd;">
<label>Search by Card Number:</label> #Html.TextBox("searchCard")
<input type="submit" value="Go" placeholder="Search" style="background-color: #0a9dbd; color: white; border-color: #0a9dbd;">
Export to Excel
</form>
}
</div>
<div class="panel-body">
Add Gift Card
Get Card Balance
Load Cards
<br />
<br />
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<th>Card ID</th>
<th>Company</th>
<th>Card Number</th>
<th>Card Number 2</th>
<th>Date Created</th>
<th>Card Status</th>
<th>Discount Level ID</th>
<th>Loyalty Level ID</th>
<th>Gift Card Enabled</th>
<th>Loyalty Enabled</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model) {
<tr>
<td><input type="checkbox" name="ids" value="#item.CardID" /></td>
<td>#item.CardID</td>
<td>#item.Customer.CustomerCompanyName</td>
<td>#item.CardNumber</td>
<td>#item.CardNumber2</td>
<td>#item.CardDate</td>
<td>#item.CardStatus</td>
<td>#item.DiscountLevelID</td>
<td>#item.LoyaltyLevelID</td>
<td>#item.GiftCardEnabled</td>
<td>#item.LoyaltyEnabled</td>
<td>
<i class="fa fa-edit "></i> Edit <br />
</td>
</tr>
}
</tbody>
</table>
Page #(Model.PageCount
< Model.PageNumber ? 0 : Model.PageNumber) of #Model.PageCount #Html.PagedListPager(Model, page=> Url.Action("Index", new { page, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter }))
</div>
</div>
</div>
<!--End Advanced Tables -->
</div>
</div>
Controller:
public ActionResult PostCards(int[]ids)
{
var myObject = new Card();
foreach(var id in ids)
{
myObject = db.Cards.Single(o => o.CardID == id);
return RedirectToAction("LoadCards", myObject);
}
return View();
}
public ActionResult LoadCards()
{
return View();
}
I need the selected data to be passed to the LoadCards view.
Let us first look at the NullReference you are getting. The problem here is that no correct index is created to bind the checkboxes to an array. Use a for loop instead of foreach. In MVC/Razor, how do I get the values of multiple checkboxes and pass them all to the controller?
To get the desired behaviour:
change the foreach to a for loop so the correct indices for sending the data will be created.
add a checkbox in each row that lets the user select the rows to submit.
your action should recieve a collection of models for each row. This model always transports the CardId and tells us whether it was selected.
public class SelectedCardModel {
public int CardId { get; set; }
public bool IsSelected {get; set;}
}
In the view:
#using (Html.BeginForm("PostCards", "CustomerView", FormMethod.Post) {
// <table> etc ...
<tbody>
#for (var i = 0; i < Model.Count; i++) {
#{ var item = Model.ElementAt(i); }
<tr>
<td>
#Html.Hidden("CardId[" + i + "]")
#Html.CheckBox("IsSelected[" + i + "]")
</td>
// display other properties of item ...
<td>#item.CardID</td>
// ...
</tr>
}
</tbody>
</table>
<button type="submit">Load Cards</button>
}
Action:
[HttpPost]
public ActionResult PostCards(SelectedCardModel[] selectedCards) {
foreach(var card in selectedCards) {
if (card.IsSelected) {
var selectedId = card.CardId;
// ...
}
}
}

I have a code that show the barcode image but it will show only the image once

I am working to show the bar codes generated and stored in date base. Right now i am able to get the bar code number from data base and show the image in HTML using code39.js. My code is billow it will show the image once only i want to show all the image and then download the label for products.
<div class="panel panel-info ">
<div class="panel panel-heading">
Bar Codes
</div>
<table class="table table-striped">
<tr>
<th>Product Name</th>
<th>Quantity</th>
</tr>
#foreach (var items in Model.BarCodeItems)
{
<tr>
<td>
#for (int i = 0; i <= #items.Quantity;i++ )
{
<div id="externalbox" style="width:4in">
<div id="inputdata">#items.BarCode</div>
</div>
<br />
}
</td>
<td>
#items.Name
#items.Quantity
</td>
</tr>
}
</table></div>
<script type="text/javascript">
function get_object(id) {
var object = null;
if (document.layers) {
object = document.layers[id];
} else if (document.all) {
object = document.all[id];
} else if (document.getElementById) {
object = document.getElementById(id);
}
return object;
}
get_object("inputdata").innerHTML=DrawCode39Barcode(get_object("inputdata").innerHTML,8);
</script>
You are using Ids, and it must be unique. Try to use class, like this:
<div class="externalbox" style="width:4in">
<div class="inputdata">#items.BarCode</div>
</div>
And in your script:
$('.inputdata).each(function() {
var code = $(this).html();
$(this).html(DrawCode39Barcode(code,8));
});
If you don't want to use jQuery:
var x = document.getElementsByClassName("inputdata");
for (var i = 0; i < x.length; i++) {
var code = x[i].innerHtml;
x[i].innerHtml = DrawCode39Barcode(code,8);
}

make table rows from foreach loop?

I have been stuck on this for some time now; I'm using ASP.NET MVC 4 and C# for a web application. I read in an Excel file from my controller, and I have a List of all the cells which I send back to my view. This is what I'm using:
<table>
#foreach (var item in ViewBag.range)
{
<tr>
#for (int i = 0; i < 6; i++)
{
<td>
<input style="width:50px;" value=#item />
</td>
}
</tr>
}
</table>
Basically, I have 6 columns in Excel. I am trying to recreate the Excel in my view.
But there is something wrong with my for loop, it's doing each cell 6 times.
Can anyone help please?
It does that because you tell it to in the for loop. Perhaps you should remove it.
<table>
<tr>
#foreach (var item in ViewBag.range)
{
<td>
<input style="width:50px;" value=#item />
</td>
}
</tr>
</table>
EDIT
This will place the items inside of range into rows which have 6 columns each.
#{
int total = 0; 
}
<table>
#foreach (var item in ViewBag.range)
{
if( total % 6 == 0 ){
#:<tr>
}
<td>
<input style="width:50px;" value=#item />
</td>
if( total+1 % 7 == 0 ){
#:</tr>
}
total++;
}
</table>
Since I dont have enough information about range....I did the following with assumption ; modify and use it
#{var counter=0}
<table>
<tr>
#foreach (var item in ViewBag.range)
{
counter++;
<td>
<input style="width:50px;" value=#item />
</td>
if(counter%6==0)
{
#:</tr>
if(counter<ViewBag.range.Count)
{
#:<tr>
}
}
}
</table>

Categories

Resources