Hallo,
ich bin neu im Thema HTML. Ich entwickele gerade eine Test Seite in ASP Net Core Blazor und habe mir folgende Aufgabenstellung gegeben.
1. Daten aus einer Datenbank abrufen. (erledigt)
2. Daten in einer Tabelle darstellen, wobei die erste Spalte eine Checkbox ist (erledigt)
3. Die Breite der Tabellenspalten dynamisch an die Browserfesnterbreite sinngemäß angepasst (glaub ich, dass das erledigt ist)
4. Über jeder Spalte, mit Ausnahme der ersten Spalte, soll eine Textbox sein und mit Placeholdern versehen sein. Diese Textboxen dienen als Spaltenfilter. Sobald dort Text eingegeben wird, beginnt Blazor mit dem Filtern der Spalten und rendert den Output neu (erledigt)
5. Diese Textboxen sollen an den Spalten der Tabelle bündig ausgerichtet sein. Das bekomme ich einfach nicht hin, obwohl die Werte genauso übernommen wurde, wie in der Datentabelle. Die Textboxen sind irgendwie nie bündig zu den Spalten, egal was ich mache. (Hier brauch ich Unterstützung)
6. Die Textboxen sollen solange bündig zur Datentabelle ausgerichtet sein, bis eine bestimmte, minimale breite der Textbox erreicht wurde (z.B. auf Handys oder wenn man das Browserfenster klein zieht). Ab dann sollen die Textboxen nicht mehr nebeneinander sein, sondern gestapelt werden. (Keine Ahnung wie man das realisieren könnte)
Mein Code sieht folgendermaßen aus:
Und so siehts aus
Und hier ungestapelt
Vielen Dank für Eure Hilfe
Gruß Magic
ich bin neu im Thema HTML. Ich entwickele gerade eine Test Seite in ASP Net Core Blazor und habe mir folgende Aufgabenstellung gegeben.
1. Daten aus einer Datenbank abrufen. (erledigt)
2. Daten in einer Tabelle darstellen, wobei die erste Spalte eine Checkbox ist (erledigt)
3. Die Breite der Tabellenspalten dynamisch an die Browserfesnterbreite sinngemäß angepasst (glaub ich, dass das erledigt ist)
4. Über jeder Spalte, mit Ausnahme der ersten Spalte, soll eine Textbox sein und mit Placeholdern versehen sein. Diese Textboxen dienen als Spaltenfilter. Sobald dort Text eingegeben wird, beginnt Blazor mit dem Filtern der Spalten und rendert den Output neu (erledigt)
5. Diese Textboxen sollen an den Spalten der Tabelle bündig ausgerichtet sein. Das bekomme ich einfach nicht hin, obwohl die Werte genauso übernommen wurde, wie in der Datentabelle. Die Textboxen sind irgendwie nie bündig zu den Spalten, egal was ich mache. (Hier brauch ich Unterstützung)
6. Die Textboxen sollen solange bündig zur Datentabelle ausgerichtet sein, bis eine bestimmte, minimale breite der Textbox erreicht wurde (z.B. auf Handys oder wenn man das Browserfenster klein zieht). Ab dann sollen die Textboxen nicht mehr nebeneinander sein, sondern gestapelt werden. (Keine Ahnung wie man das realisieren könnte)
Mein Code sieht folgendermaßen aus:
C#:
@page "/dsm/overview"
@using WebServices.Converter
@using WebServices.DSM
@using WebServices.DSM.Model
@using System.Linq.Expressions
@using System.Linq
@using System.Reflection
@using System.Collections.Generic
@using System.Collections
@inject WebServices.DSM.IDsmService dsmservice
<style>
.test2 {
font-size: 120%;
color: red;
}
.test1 {
padding-left: 0px;
padding-right: 4px;
}
</style>
<h3>DSM Overview</h3>
@if (Results == null)
{
<p><em>loading results. Please wait ...</em></p>
}
else
{
<table class="table table-borderless">
<tr>
<th><div style="width:20px"></div></th>
<th style="padding-left:0px;width:21%"><input value="@FilterName" type="text" class="form-control form-control-sm" placeholder="Name" @onchange="_ => change(() => FilterName,_.Value)" /></th>
<th style="padding-left:0px;width:25%"><input value="@FilterDesc" type="text" class="form-control form-control-sm" placeholder="Description" @onchange="_ => change(() => FilterDesc,_.Value)" /></th>
<th style="padding-left:0px;width:6%"><input type="text" class="form-control form-control-sm" placeholder="ID"></th>
<th style="padding-left:0px;width:14%"><input type="text" class="form-control form-control-sm" placeholder="Date of Publication"></th>
<th style="padding-left:0px;width:14%"><input type="text" class="form-control form-control-sm" placeholder="Date of Approval"></th>
<th style="padding-left:0px;width:10%"><input type="text" class="form-control form-control-sm" placeholder="ChangeNumber"></th>
<th style="padding-left:0px;width:10%"><input type="text" class="form-control form-control-sm" placeholder="Status"></th>
</tr>
</table>
<table class="table table-striped">
<tr>
<th></th>
<th>Name</th>
<th>Description</th>
<th>ID</th>
<th>Date of Publication</th>
<th>Date of Approval</th>
<th>ChangeNumber</th>
<th>Status</th>
</tr>
@foreach (var item in FilteredList)
{
<tr @key="@item.ID">
<td><input type="checkbox" ></td>
<td width="21%">@item.Name</td>
<td width="25%" style="word-wrap: break-word">@item.Description</td>
<td width="6%">@item.ID</td>
<td width="14%">@item.DateOfPublication?.ToString("dd.MM.yyyy HH:mm")</td>
<td width="14%">@item.DateOfApproval</td>
<td width="10%">@item.ChangeNumber</td>
<td width="10%">@item.Status</td>
</tr>
}
</table>
}
@code {
public string FilterName { get; set; }
public string FilterDesc { get; set; }
void change<T>(Expression<Func<T>> memberExpression,object newVal)
{
(string membername, object value) = ExpressionHelper.GetKeyValue(memberExpression);
var prop = this.GetType().GetProperty(membername);
prop.SetValue(this, newVal);
FilteredList = applyFilter().ToList();
StateHasChanged();
}
IEnumerable<DSMViewModel> applyFilter()
{
var result = new List<DSMViewModel>();
DSMViewModel[] arr = new DSMViewModel[Results.Count];
Results.CopyTo(arr);
IEnumerable<DSMViewModel> results = (IEnumerable<DSMViewModel>)arr;
bool l_validate(string value,string filter)
{
if (string.IsNullOrWhiteSpace(value)) return false;
return value.Contains(filter, StringComparison.OrdinalIgnoreCase);
}
if (!string.IsNullOrWhiteSpace(FilterName))
results = results.Where(item => l_validate(item.Name, FilterName));
if (!string.IsNullOrWhiteSpace(FilterDesc))
results = results.Where(item => l_validate(item.Description, FilterDesc));
return results;
}
public List<DSMViewModel> Results;
public List<DSMViewModel> FilteredList;
public string Filter { get; set; }
protected override async Task OnInitializedAsync()
{
await dsmservice.ConnectAsync();
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
//Get items from DSM
var results = await dsmservice.Get_DSMResultAsync(null, "Prod");
//Initialize Result list
if (Results == null)
{
Results = new List<DSMViewModel>();
Results = results.OrderBy(items => items.Name).ToList();
}
//Add to result array
FilteredList = Results;
//Trigger a change
StateHasChanged();
}
}
}Und so siehts aus
Und hier ungestapelt
Vielen Dank für Eure Hilfe
Gruß Magic
