Saturday, June 26, 2021

【Blazor】Data Binding dropdown part 2

 @page "/"


<h1>Hello, world!</h1>


Welcome to your new app.


<br />

Product Name @product.Name


<br />


<input type="text" name="product" @bind-value="product.Name" @bind-value:event="oninput" />


<br />


<label>

    <input type="checkbox" name="checkbox" @bind-value="isActive" /> &nbsp;@(isActive ? "IsActive" : "Active")

</label>

<br />

@isActive


<br />

<p>

    <label>

        <label>

            <input type="radio" name="group" value="1"

                   @onclick="@(()=> selectedGroup = 1)" />1

        </label>

        <input type="radio" name="group" value="2"

               @onclick="@(()=> selectedGroup = 2)" />2

    </label>


</p>

<br />


@selectedGroup

<br />

<select @bind="selectedProductId">

    <option value="0"></option>

    @foreach (var item in products)

    {

        <option value="@item.Id">@item.Name</option>

    }

</select>

@selectedProductId

@code{

        private int selectedProductId =0;

    private List<Product> products = new List<Product> {

        new Product { Id = 495, Brand = "maybelline", Name = "Maybelline Face Studio Master Hi-Light Light Booster Bronzer", Price = 14.99, ImageLink = "https://d3t32hsnjxo7q6.cloudfront.net/i/991799d3e70b8856686979f8ff6dcfe0_ra,w158,h184_pa,w158,h184.png", Description = "Maybelline Face Studio Master Hi-Light Light Boosting bronzer formula has an expert  balance of shade + shimmer illuminator for natural glow. Skin goes  soft-lit with zero glitz.    For Best Results: Brush over all shades in palette and gently sweep over  cheekbones, brow bones, and temples, or anywhere light naturally touches  the face.                            "},

            new Product { Id = 488, Brand = "maybelline", Name = "Maybelline Fit Me Bronzer", Price = 10.29, ImageLink = "https://d3t32hsnjxo7q6.cloudfront.net/i/d4f7d82b4858c622bb3c1cef07b9d850_ra,w158,h184_pa,w158,h184.png", Description = "Why You'll Love It  Lightweight pigments blend easily and wear evenly Provides a natural, fade-proof bronzed color that leaves skin the way it was meant to be...fresh, breathing and natural  For Best Results: For soft, natural look, brush along cheekbone, sweeping upward."},

            new Product { Id = 477, Brand = "maybelline", Name = "Maybelline Facestudio Master Contour Kit", Price = 15.99, ImageLink = "https://d3t32hsnjxo7q6.cloudfront.net/i/4f731de249cbd4cb819ea7f5f4cfb5c3_ra,w158,h184_pa,w158,h184.png", Description = "Maybelline Facestudio Master Contour Kit is the ultimate on the go all-in-one palette, with contouring brush included.  Define and highlight in a New York minute with this effortless 3-step face contouring kit.  This easy-to-use 3-step face contouring kit features a bronzer, blush and highlighter."},

        };

    private int selectedGroup;

    private bool isActive = false;

    private Product product = new Product

    {

        Id = 1,

        Brand = "Lorem",

        Name = "Lorem ipsum dolor amet"

    };


}

No comments:

Post a Comment

End of Summer Sale ☀️😎

20% OFF Inside!🤯 ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏...