ASP.NET Core 101 - Introducing Blazor: Razor Components [10 of 13]

Blazor
we're going to introduce a new concept here called Blazor.Blazor is interesting,it's just a new app model,a new way of thinking about your applications.So we thought it would be cool to basically introduce a new component.We set for-each over a list of products and we put in these divs, but the responsibility for what this did is spread in a number of different places and the Blazor application model would let us make that a reusable component.

components

we're going to make a new folder.We're going to call it ''Components'', because we're going to make a Razor component,So in this case,the responsibility of the component we're about to create has to deal with just getting a list of products and then.So let's go and say ''Add'',''New Item'' with a big list of stuff.So here's Razor Component,and you'll notice it's a .Razor extension,

<h3>Component</h3>

<div class="card-columns">
@foreach (var product in model.Products)
{
    <div class="card">
        <div class="card-img" style="background-image: url('@product.Image');">
        </div>
        <div class="card-body">
            <h5 class="card-title">@product.Title</h5>
        </div>
    </div>
}
</div>

@code {

}

using & inject

We had our div class card columns.But it doesn't know about model,and it doesn't know about some of the things we want to use.

So we're going to do our sum using statements.These using statements are just like the ones that we would use in our C Sharp code,except these are being done at the top of our Razor components.We're using the @ sign just in front of it. Then remember how we were doing injection.We were injecting in our services and telling people about stuff. Let's inject, this is a new keyword.

@using ContosoCrafts.WebSite.Models
@using ContosoCrafts.WebSite.Services
@using Microsoft.AspNetCore.Components.Web
@inject JsonFileProductService ProductService

<div class="card-columns">
@foreach (var product in ProductService.GetProducts())
{
    <div class="card">
        <div class="card-img" style="background-image: url('@product.Image');">
        </div>
        <div class="card-body">
            <h5 class="card-title">@product.Title</h5>
        </div>
        
    </div>
}
</div>

@code {

}

Blazor events

Then inside let's insert a button.So when the user clicks it, in which you can use the onclick keyword for that.Then you're saying onclick.Now, this is interesting.Look at these pop-ups here,and the IntelliSense,they're little ads.These are Blazor events.when someone selects a product we need to keep track of it.we need to keep the product ID. we also want a pop up, a dialog box.So let's do a data-toggle(切换) just so when we press this button again it'll come.It'll toggle,So data hyphen(破折号) is a place to add additional,along for the right information that we can go and get a hold of later so we've got modal(模态),so this just means we have a modal dialogue.What we're targeting? What piece of UI is this? Some modal thing that we haven't made yet.So product that the user just clicked on.Then we've been keeping the IDs.

@using ContosoCrafts.WebSite.Models
@using ContosoCrafts.WebSite.Services
@using Microsoft.AspNetCore.Components.Web
@inject JsonFileProductService ProductService

<div class="card-columns">
@foreach (var product in ProductService.GetProducts())
{
    <div class="card">
        <div class="card-img" style="background-image: url('@product.Image');">
        </div>
        <div class="card-body">
            <h5 class="card-title">@product.Title</h5>
        </div>
        <div class="card-footer">
            <small class="text-muted"><button @onclick="(e => SelectProduct(product.Id))" 
              data-toggle="modal" data-target="#productModal" class="btn btn-primary">More Info</button>
            </small>
        </div>
    </div>
}
</div>

@code {
    Product selectedProduct;
    string selectedProductId;

    void SelectProduct(string productId)
    {
      selectedProductId = productId;
      selectedProduct = ProductService.GetProducts().First(x => x.Id == productId);
    }
}

Startup

We haven't even told our application about Blazor.Remember when we added controllers,we went in and we mapped them.So back to Startup.

// This method gets called by the runtime. Use this method to add services to the container.
public void ConfigureServices(IServiceCollection services)
{
    services.AddRazorPages();
    services.AddControllers();
    services.AddTransient<JsonFileProductService>();
   services.AddServerSideBlazor();
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Error");
        // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
        app.UseHsts();
    }

    app.UseHttpsRedirection();
    app.UseStaticFiles();
    app.UseRouting();
    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapRazorPages();
        endpoints.MapControllers();
        endpoints.MapBlazorHub();

        // endpoints.MapGet("/products", (context) => 
        // {
        //     var products = app.ApplicationServices.GetService<JsonFileProductService>().GetProducts();
        //     var json = JsonSerializer.Serialize<IEnumerable<Product>>(products);
        //     return context.Response.WriteAsync(json);
        // });
    });
}

render (Index.cshtml)

So now we've told ASP.NET about those things but we still haven't mentioned what's going ahead. Blazor has a little bit of JavaScript.But we don't have to actually write any JavaScript,we'll just go and
tell the system that we want to use Blazor JavaScript and they include this stuff. We're going to wait for something to happen because it's an asynchronous thing. We're going and we're going to render.

@using ContosoCrafts.WebSite.Components

@(await Html.RenderComponentAsync<ProductList>(RenderMode.ServerPrerendered))

So then we're going to render product list.Then we're going to say render mode because the way that we want to go and render this is on the server, pre-rendered.We wanted to server to do all that work for us.In the product list, it can't see.The reason that it can't see is we have to tell it about it just like we did before.So we're going to use that new Contoso Crafts website and it's not a model,it's a component.