In my Project I am working on a few index views that only have a few fields. When their are few fields in a table the label and the checkbox below them never line up. As one example, in the code below the Active field is a checkbox and it is not under its label. How can I get it so the checkbox is centered on its label?
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model.BranchName)
</th>
<th>
#Html.DisplayNameFor(model => model.Active)
</th>
<th></th>
</tr>
#foreach (var item in Model.OrderByDescending(m => m.Active).ThenBy(m => m.BranchName))
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.BranchName)
</td>
<td>
#Html.DisplayFor(modelItem => item.Active)
</td>
<td>
#Html.ActionLink("Edit", "EditBranch", new { id=item.BranchId })
</td>
</tr>
}
</table>
Here is a pic to see how ugly it looks:
Add css to the column, via colspan or direct on td or th
<td style="text-align: center">
OR
style="float:left"
Otherwise encapsulate the #Html.DisplayFor in a div with that style.
Finally don't have the css inline and move to the style.css file.
Related
Synopsis of the place I am at:
In my program on page 1 they select a printer and click a button which submits a service call and loads the next page, machine information. The redirect action calls the following method:
public async Task<IActionResult> OnGetSelectThisPrinter(int? printerID)
{
var printerServiceCall = new Service_Calls
{
PrinterID = (int)printerID,
Time = DateTime.Now,
Date = DateTime.Now
};
_context.Service_Calls.Add(printerServiceCall);
await _context.SaveChangesAsync();
var ServiceCalls = from m in _context.Service_Calls
select m;
Service_Calls ServiceCall = ServiceCalls.Last();
return RedirectToPage("MachineInformaion?id=" + ServiceCall.ID);
//return RedirectToPage("./Index");
}
In this code the printerID = 1 is a placeholder until I work out how to pass in a specific machines details (any help on passing through that would be helpful).
The HTML for this page, with the buttons, is as follows:
<table class="table">
<thead>
<tr>
<th>
#Html.DisplayNameFor(model => model.Printer[0].MachineID)
</th>
<th>
<a asp-page="./SelectPrinter" asp-route-sortOrder="#Model.LogSortParam">#Html.DisplayNameFor(model => model.Printer[0].Log_ID)</a>
</th>
<th>
<a asp-page="./SelectPrinter" asp-route-sortOrder="#Model.LeaseSortParam">#Html.DisplayNameFor(model => model.Printer[0].Lease_ID)</a>
</th>
<th>
<a asp-page="./SelectPrinter" asp-route-sortOrder="#Model.SerialSortParam">#Html.DisplayNameFor(model => model.Printer[0].Serial_Number)</a>
</th>
<th>
<a asp-page="./SelectPrinter" asp-route-sortOrder="#Model.SolutionSortParam">#Html.DisplayNameFor(model => model.Printer[0].Solution)</a>
</th>
<th>
<a asp-page="./SelectPrinter" asp-route-sortOrder="#Model.AdditionalSortParam">#Html.DisplayNameFor(model => model.Printer[0].Additional_Info)</a>
</th>
<th>
<a asp-page="./SelectPrinter" asp-route-sortOrder="#Model.InstallationSortParam">#Html.DisplayNameFor(model => model.Printer[0].InstallationDate)</a>
</th>
<th>
<a asp-page="./SelectPrinter" asp-route-sortOrder="#Model.MonoClickSortParam">#Html.DisplayNameFor(model => model.Printer[0].Mono_Click)</a>
</th>
<th>
<a asp-page="./SelectPrinter" asp-route-sortOrder="#Model.ColourCLickSortParam">#Html.DisplayNameFor(model => model.Printer[0].Colour_Click)</a>
</th>
<th>
<a asp-page="./SelectPrinter" asp-route-sortOrder="#Model.MinimumSortParam">#Html.DisplayNameFor(model => model.Printer[0].Minimum)</a>
</th>
<th>
<a asp-page="./SelectPrinter" asp-route-sortOrder="#Model.PartsSortParam">#Html.DisplayNameFor(model => model.Printer[0].Parts_Warranty)</a>
</th>
<th>
<a asp-page="./SelectPrinter" asp-route-sortOrder="#Model.ITSortParam">#Html.DisplayNameFor(model => model.Printer[0].IT_Support)</a>
</th>
<th>
<a asp-page="./SelectPrinter" asp-route-sortOrder="#Model.ContractSortParam">#Html.DisplayNameFor(model => model.Printer[0].Contract_Type)</a>
</th>
<th>Select Printer</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.Printer) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.MachineID)
</td>
<td>
#Html.DisplayFor(modelItem => item.Log_ID)
</td>
<td>
#Html.DisplayFor(modelItem => item.Lease_ID)
</td>
<td>
#Html.DisplayFor(modelItem => item.Serial_Number)
</td>
<td>
#Html.DisplayFor(modelItem => item.Solution)
</td>
<td>
#Html.DisplayFor(modelItem => item.Additional_Info)
</td>
<td>
#Html.DisplayFor(modelItem => item.InstallationDate)
</td>
<td>
#Html.DisplayFor(modelItem => item.Mono_Click)
</td>
<td>
#Html.DisplayFor(modelItem => item.Colour_Click)
</td>
<td>
#Html.DisplayFor(modelItem => item.Minimum)
</td>
<td>
#Html.DisplayFor(modelItem => item.Parts_Warranty)
</td>
<td>
#Html.DisplayFor(modelItem => item.IT_Support)
</td>
<td>
#Html.DisplayFor(modelItem => item.Contract_Type)
</td>
<td>
<form method="get" asp-page-handler="OnGetSelectThisPrinter" asp-route-id="#item.MachineID">
<button value="Select Printer" />
</form>
</td>
</tr>
}
</tbody>
</table>
However, at the moment the buttons don't do anything. It looks like they aren't going into the OnGetSelectThisPrinter Method. Any help would be greatly appreciated.
I suggest you can use <a> tag to access the handler, since you only need to pass a parameter.
<a asp-page="/Printer" asp-page-handler="SelectThisPrinter" asp-route-printerID="#item.MachineID">SelectThisPrinter</a>
Handler in Printer page:
public IActionResult OnGetSelectThisPrinter(int printerID)
{
...
}
To start, this tutorial gives a much more in depth discussion of the answer I'm about to give. Check it out: https://www.learnrazorpages.com/razor-pages/handler-methods
Hi there! Let's start with making the button work. In order to redirect the user to a particular action of the page, we can use the asp-page-handler attribute to specify the method that handles the request. Additionally, we use the asp-route-id attribute to describe which printer we have selected. Finally, we wrap this all up in a form. So, we replace
<input type="button" onclick="SelectThisPrinter()" value="Select Printer" />
with
<form method="get" asp-page-handler="selectThisPrinter" asp-route-id="#item.MachineID">
<button value="Select Printer" />
</form>
Then, in your code-behind, we can perform some simple changes to your handler. We change
public async Task<IActionResult> SelectThisPrinter()
{
int printerID = 1;
...
}
to
public async Task<IActionResult> OnGetSelectThisPrinter(int? printerId)
{
...
}
I hope this helps. Let me know if you have any further questions.
I have done a table of history transactions. In my transaction db I have a column named QuantityChange. Where values can be negative or positive.
I would like to set the row color to red, if its a minus value and green if positive (or zero).
What is the best solution to this?
<table class="table">
<thead>
<tr>
<th>
Date
</th>
<th>
Storage
</th>
<th>
Product
</th>
<th>
Quantity change
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr class="#item.QuantityChange">
<td>
#Html.DisplayFor(modelItem => item.Date)
</td>
<td>
#Html.DisplayFor(modelItem => item.Stock.Storage.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.Stock.Product.Name)
</td>
<td>
#if (item.QuantityChange > 0)
{
#Html.DisplayFor(modelItem => item.QuantityChange, new {
style = "color:#00ff00" })
}
else
{
#Html.DisplayFor(modelItem => item.QuantityChange, new {
style = "color:#ff0000" })
}
</td>
</tr>
}
</tbody>
</table>
This might be a solution for you.
#foreach (var item in Model)
{
<tr style="color:#(item.QuantityChange >= 0 ? "#00ff00" : "#ff0000")">
<!-- insert other columns here -->
<td> <!-- this has been modified -->
#Html.DisplayFor(modelItem => item.QuantityChange)
</td>
</tr>
}
Try this
#{
String color;
}
And in your table add the styling to each element as required.
#foreach (var item in Model)
{
<tr>
#{
switch((item.QuantityChange)
{
case >0:
color:"#00ff00";
break;
default:
color:"color:#ff0000";
break;
}
<td style="color:#color">
#Html.DisplayFor(modelItem => item.QuantityChange)
</td>
Hello I'm new to MVC and I'm trying to do a filtering for my index page, I want to be able to filter the graduation Status.
So when I go into the index I will see every status and I want to filter for example only the person with the graduated Status or the Pass/failed Status
Thank you in advance!
Index Page
Controller:
var graduates = db.Graduated_Students;
return View(graduates.ToList());
View:
<div class="content-body">
<div class="row">
<form action="#" method="post">
<div class="col-xs-12 col-sm-9 col-md-12">
<table class="table">
<tr>
<th>
#Resource.FirstName
</th>
<th>
#Resource.LastName
</th>
<th>
#Resource.CohortNumber
</th>
<th>
Placements
</th>
<th>
#Resource.GraduationStatus
</th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem =>
item.FirstName)
</td>
<td>
#Html.DisplayFor(modelItem =>
item.LastName)
</td>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#Html.DisplayFor(modelItem =>
item.PartnerName)
</td>
<td>
#Html.DisplayFor(modelItem =>
item.GraduationStatus)
</td>
You could use linq in the View to filter the data
In the View
#foreach (var item in Model.Where(t=> t.GraduationStatus == <the graduation status selected in the dropdown> );
This approach Gets all the data from the database and then performs the filtering
That approach would work however a better approach would be to send the Selected GraduationStatus to the controller as a parameter and then perform the filtering directly on the db variable
In the Controller
public IActionResult GeStudents(GraduationStatus selectedGraduationStatus)
{
var graduates = db.Graduated_Students.Where(t=> t.GraduationStatus == selectedGraduationStatus);
return View(graduates.ToList());
}
This way you don't get all of the students from the database but only the ones which match the filter
I have a Razor Page view that simply generates a table of items from a List retrieved from a Model property, like so:
#page
#model Agency.Pages.TypeManagement.CategoryType.IndexModel
#{
ViewData["Title"] = "Index";
}
<h2>Index</h2>
<p>
<a asp-page="Create">Create New</a>
</p>
<table class="table">
<thead>
<tr>
<th>
#Html.DisplayNameFor(model => model.Category[0].CategoryCode)
</th>
<th>
#Html.DisplayNameFor(model => model.Category[0].CategoryName)
</th>
<th>
#Html.DisplayNameFor(model => model.Category[0].CategoryDescription)
</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.Category) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.CategoryCode)
</td>
<td>
#Html.DisplayFor(modelItem => item.CategoryName)
</td>
<td>
#Html.DisplayFor(modelItem => item.CategoryDescription)
</td>
<td>
<a asp-page="./Edit" asp-route-id="#item.CategoryId">Edit</a> |
<a asp-page="./Details" asp-route-id="#item.CategoryId">Details</a> |
<a asp-page="./Delete" asp-route-id="#item.CategoryId">Delete</a>
</td>
</tr>
}
</tbody>
</table>
What I want to do is to output a sub-table for each item in the table, if any items exist in the sub-table, based on the ID of the item in the master table. I know that I can use a property, like Model.Category, in a Razor statement, but is it also possible to retrieve data from the View based on the value of something like the ID of the current item?
So what I want to end up with is something like this:
#foreach (var item in Model.Category) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.CategoryCode)
</td>
<td>
#Html.DisplayFor(modelItem => item.CategoryName)
</td>
<td>
#Html.DisplayFor(modelItem => item.CategoryDescription)
</td>
<td>
<a asp-page="./Edit" asp-route-id="#item.CategoryId">Edit</a> |
<a asp-page="./Details" asp-route-id="#item.CategoryId">Details</a> |
<a asp-page="./Delete" asp-route-id="#item.CategoryId">Delete</a>
</td>
<table>
<tbody>
#foreach (var subitem in Model.SubCategory) {
<tr>
<td>
#Html.DisplayFor(modelItem => subitem.CategoryCode)
</td>
<td>
#Html.DisplayFor(modelItem => subitem.CategoryName)
</td>
<td>
#Html.DisplayFor(modelItem => subitem.CategoryDescription)
</td>
<td>
<a asp-page="./Edit" asp-route-id="#subitem.CategoryId">Edit</a> |
<a asp-page="./Details" asp-route-id="#subitem.CategoryId">Details</a> |
<a asp-page="./Delete" asp-route-id="#subitem.CategoryId">Delete</a>
</td>
</tr>
}
</tbody
</table
</tr>
}
But I need to filter the SubCategory items based on the ID of the item in the current row of the main table.
Filter subcategories on the current item/row's identifier.
#foreach (var item in Model.Category) {
//...omitted for brevity
var subItems = Model.SubCategory.Where(x => x.CategoryId = item.Id);
if(subItems.Any()) {
<table>
<tbody>
foreach (var subitem in subItems) {
//...omitted for brevity
where item is from the outer foreach loop.
Reference Using the Razor Syntax: Combining Text, Markup, and Code in Code Blocks
I am trying to display certain data from my Inspections model in my Items Index view. They currently have a M:M relationship.
This is the error
Error CS1061 'IEnumerable<Item>' does not contain a definition for 'Inspection' and no extension method 'Inspection' accepting a first argument of type 'IEnumerable<Item>' could be found (are you missing a using directive or an assembly reference?)
Any advice? Thank you
This is Items Index
#model IEnumerable<NCSafety.Models.Item>
<table class="table">
<tr>
<th>
Hazard Picture
</th>
<th>
#Html.DisplayNameFor(model => model.Hazard.hazName)
</th>
<th>
#Html.DisplayNameFor(model => model.Inspection.ID)
</th>
<th>
#Html.DisplayNameFor(model => model.itemCorrActionDue)
</th>
<th>
#Html.DisplayNameFor(model => model.itemCorrActionCompleted)
</th>
<th>
#Html.DisplayNameFor(model => model.itemComment)
</th>
<th></th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#{
if (item.imageContent != null &&
item.imageMimeType.Contains("image"))
{
string imageBase64 =
Convert.ToBase64String(item.imageContent);
string imageSrc = string.Format("data:" +
item.imageMimeType + ";base64,{0}", imageBase64);
<img src="#imageSrc" style="max-height:100px; max-
width:120px" class="img-responsive img-rounded" />
}
}
</td>
<td>
#Html.DisplayFor(modelItem => item.Hazard.hazName)
</td>
<td>
#Html.DisplayFor(modelItem => item.Inspection.ID)
</td>
<td>
#Html.DisplayFor(modelItem => item.itemCorrActionDue)
</td>
<td>
#Html.DisplayFor(modelItem => item.itemCorrActionCompleted)
</td>
<td>
#Html.DisplayFor(modelItem => item.itemComment)
</td>
<td>
<a href="/Items/Edit/#item.ID"><div class="glyphicon
glyphicon-pencil" style="margin-right:30px"></div></a>
<a href="/Items/Details/#item.ID"><div class="glyphicon
glyphicon-eye-open" style="margin-right:30px"></div></a>
<a href="/Items/Delete/#item.ID"><div class="glyphicon
glyphicon-remove"></div></a>
</td>
</tr>
}
</table>
<table>
#foreach (var item in Model.Inspection)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.ID)
</td>
<td>
#Html.DisplayFor(modelItem => item.SchoolID)
</td>
<td>
#Html.DisplayFor(modelItem => item.inspDate)
</td>
</tr>
}
</table>
if (Model.Count() == 0)
{
<h3>No Records Found.</h3>
<br />
Add Item
}
}
Download PDF
If this is your model:
IEnumerable<NCSafety.Models.Item>
Then none of these will work:
#Html.DisplayNameFor(model => model.Hazard.hazName)
Because IEnumerable<T> doesn't have any of those properties. Perhaps you meant to drill into an element of the IEnumerable<T> for the properties? Something like this:
#Html.DisplayNameFor(model => model.First().Hazard.hazName)
(repeat for your other properties)
Either Inspection is in the Model object or on the collection object that makes up the Model. It probably isn't on both.