Klaar om weggeblazord te worden?
- Create a folder called TacoBlazor
- Open a command prompt and change directory to TacoBlazor
- Create a new blazor project
dotnet new blazorwasm -o MyFirstBlazorApp --no-https --hosted
cd MyFirstBlazorApp
- Open the .sln file in your new solution and hit F5
dotnet run
- Open the SRA solution in the Exercise 2 folder
- Open ExperimentTable in the Components folder of the Client project
- To display the name of the experiment, fill the binding statement inside the foreach loop
@experiment.Name
- Then create a Title parameter inside the @code block where it states
[Parameter]
public string Title { get; set; }
- Show the parameter Title by putting a binding to the Title property inside the h3 tag on the top of the page.
@Title
- Open the file Pages\Index.razor and show the ExperimentTable by adding
<ExperimentTable Title="Experiments" />
- Press F5 to run the project
- Open the SRA solution in the Exercise3 folder
- Create a component called Plate.razor in the Components folder by right click on Components, then select add, Razor component
- Add a parameter called PlateModel inside the @code section
[Parameter]
public PlateModel PlateModel {get;set;}
- Create a card that displays the title in the card header
<div class="card">
<div class="card-header">
@(PlateModel.Title)
</div>
<div class="card-body">
Body
</div>
</div>
- Put the Plate component on the Plates.razor component on the designated spot, be sure to bind the plate instance to the Plate component
<Plate PlateModel="@plate" />
- Press F5 to run the solution
- Open the SRA solution in the Exercise4 folder
- In Program.cs add the following line after the rootComponents.Add
builder.Services.AddBlazoredModal();
- Open Plates.Razor in the Components folder and add the following statement after the IPlateViewModel injection
@inject IModalService modal
- Add the following parameter to the @code section
[CascadingParameter] public IModalService Modal { get; set; }
- Add the following method to the @code section
private void Add()
{
var parameters = new ModalParameters();
parameters.Add("ExperimentId", Guid.Empty);
modal.Show<ExperimentDetail>("Add experiment", parameters);
}
- Add a button where it says "Put Add button here"
<button type="button" class="btn btn-primary" @onclick="() => Add()">Add experiment</button>
- Press F5 to run the solution