.NET 5以降で利用できるInputRadioGroup, InputRadio コンポーネントを利用した実装方法は
こちらの記事を参照してください。
@page "/RadioButton"
@inherits RadioButtonModel
<h3>RadioButton</h3>
@code {
}
<div>
<input id="Radio1" name="RadioG" type="radio" checked="true" value="Flag1" @onchange="RadioSelection" /><label for="Radio1">ラジオボタン1</label><br />
<input id="Radio2" name="RadioG" type="radio" value="Flag2" @onchange="RadioSelection" /><label for="Radio2">ラジオボタン2</label><br />
<input id="Radio3" name="RadioG" type="radio" value="Flag3" @onchange="RadioSelection" /><label for="Radio3">ラジオボタン3</label><br />
<input id="Radio4" name="RadioG" type="radio" value="Flag4" @onchange="RadioSelection" /><label for="Radio4">ラジオボタン4</label><br />
<input id="Radio5" name="RadioG" type="radio" value="Flag5" @onchange="RadioSelection" /><label for="Radio5">ラジオボタン5</label><br />
<hr />
<div>@SelectionString</div>
</div>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Components;
namespace SimpleRadioButton.Pages
{
public class RadioButtonModel : ComponentBase
{
public string SelectionString { get; set; }
public void RadioSelection(ChangeEventArgs args)
{
SelectionString = (string)args.Value;
}
}
}
@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.JSInterop
@page
@namespace SimpleRadioButton.Pages
@model SimpleRadioButton.Pages._HostModel
@{
}
<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body>
<app>
@(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
</app>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
<Router AppAssembly="@typeof(Program).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" />
</Found>
<NotFound>
<LayoutView>
<p>Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace SimpleRadioButton
{
public class Startup
{
// This method gets called by the runtime. Use this method to add services to the container.
// For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
public void ConfigureServices(IServiceCollection services)
{
services.AddRazorPages();
services.AddServerSideBlazor();
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment()) {
app.UseDeveloperExceptionPage();
}
app.UseRouting();
app.UseStaticFiles();
app.UseEndpoints(endpoints =>
{
endpoints.MapBlazorHub();
endpoints.MapFallbackToPage("/_Host");
});
}
}
}
checked="true"
が設定されているため、最初のラジオボタンはデフォルトでチェックされた状態で表示されます。 <input id="Radio1" name="RadioG" type="radio" checked="true" value="Flag1" @onchange="RadioSelection" /><label for="Radio1">ラジオボタン1</label><br />
<input id="Radio2" name="RadioG" type="radio" value="Flag2" @onchange="RadioSelection" /><label for="Radio2">ラジオボタン2</label><br />
<input id="Radio3" name="RadioG" type="radio" value="Flag3" @onchange="RadioSelection" /><label for="Radio3">ラジオボタン3</label><br />
<input id="Radio4" name="RadioG" type="radio" value="Flag4" @onchange="RadioSelection" /><label for="Radio4">ラジオボタン4</label><br />
<input id="Radio5" name="RadioG" type="radio" value="Flag5" @onchange="RadioSelection" /><label for="Radio5">ラジオボタン5</label><br />
@inherits RadioButtonModel
RadioSelection
メソッドが呼び出されます。ChangeEventArgs
オブジェクトに変更があったラジオボタンの変更情報が与えられます。 public class RadioButtonModel : ComponentBase
{
public string SelectionString { get; set; }
public void RadioSelection(ChangeEventArgs args)
{
SelectionString = (string)args.Value;
}
}
<div>@SelectionString</div>