Blazorでjsを呼び出してclassを追加【C#/Blazor】
経緯
前回の続きで、jsっぽいことをblazorでやるんだが、
あえてjsを呼び出して、blazorの意味ねーっていうことをしてみた。
コード
js
window.jsFunctions = {
test: function (xxx) {
const x = document.getElementById(xxx);
x.classList.add('table');
},
}
razor
<table id="tb">
<thead>
<tr>
<th>Date</th>
<th>Temp. (C)</th>
<th>Temp. (F)</th>
<th>Summary</th>
</tr>
</thead>
<tbody>
@foreach (var forecast in forecasts)
{
<tr>
<td>@forecast.Date.ToShortDateString()</td>
<td>@forecast.TemperatureC</td>
<td>@forecast.TemperatureF</td>
<td>@forecast.Summary</td>
</tr>
}
</tbody>
</table>
@code {
private WeatherForecast? forecasts;
protected override async Task OnInitializedAsync()
{
forecasts = await Http.GetFromJsonAsync<WeatherForecast>("WeatherForecast");
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
await JSRuntime.InvokeVoidAsync("jsFunctions.test","tb");
}
}
意味ないけど、きっといつか意味ある日が来ると思うし、逆にjsを使っちゃって中途半端になりそうやなあー。
classへバインドcss【C#/Blazor】
経緯
C#/Blazorを使ってJsっぽいことがしたい。
いやいや、Jsですればいいやんって？
そういう理不尽さが社会にはあるんや。
コード
以外と簡単やな。
<table class=@Table>
<thead>
<tr>
<th>Date</th>
<th>Temp. (C)</th>
<th>Temp. (F)</th>
<th>Summary</th>
</tr>
</thead>
<tbody>
@foreach (var forecast in forecasts)
{
<tr>
<td>@forecast.Date.ToShortDateString()</td>
<td>@forecast.TemperatureC</td>
<td>@forecast.TemperatureF</td>
<td>@forecast.Summary</td>
</tr>
}
</tbody>
</table
@code{
private WeatherForecast? forecasts;
private string table = "";
public string Table { get; set; } = "table";
protected override async Task OnInitializedAsync()
{
forecasts = await Http.GetFromJsonAsync<WeatherForecast>("WeatherForecast");
}
}
Js知らない人がC#でjsっぽいことができるぞーという歓喜と結局、jsのほうがドキュメントが多いから、jsでやろうってなって、中途半端になる落ちがあるかもしれない。
jsを解読してC#で記述していくという二度手間翻訳作業が起きないことを期待しているが、すでに頭の中ではjsのあれってどうやってやるんだろーっていう頭になっている。
js系列でやろうぜ。。
ツイキャス API でアイテム情報を取得する 【Python】
経緯
ツイキャスでリスナーがくれたアイテム情報をリアルタイムで取れれば、それに合わせたアニメーション等を表示したい。
ゴール
Get Gifts のAPIを使用したい。
欲しいパラメータはACCESS_TOKENだけである。
curl -X GET "https://apiv2.twitcasting.tv/gifts?slice_id=2124" \
-H "Accept: application/json" \
-H "X-Api-Version: 2.0" \
-H "Authorization: Bearer {ACCESS_TOKEN}"
ACCESS_TOKENの取得方法
ここのサイトにお世話になりました。
概ねこのサイト通りやるとACCESS_TOKENの取得ができます。
Postmanでheader情報にContent-Typeが追加されてることに注意しましょう。
そしてその場合、bodyではx-www-form-urlencodedを選択して、パラメータをセットしてあげましょう。
エラーが出る場合は、APIリファレンスを参考にしましょう。
https://apiv2-doc.twitcasting.tv/#errors
できたこと
{"slice_id":33,"gifts":[{"id":33,"item_image"
,"message":"(+🍡3)"
/pbs.twimg.com/profile_images/1490759228554104832
/rxJtyTga_normal.jpg"
,"user_screen_name":"xxxxxx"
,"item_id":"stamp.oshushi"
,"item_mp":4
,"user_screen_id":"xxxxxx"
,"user_name":"xxxxxx"
,"item_name":"OshushiDayo Sticker 2"
/img/stamp/stamp_oshushi_1.png"}]}
直近10秒程のアイテムを取得できるようだ。
これを使えば、アイテム毎に条件分岐してCSSのアニメーションを作り、オーバーレイして画面に表示できそうだ。
missing required argument ' provider ' 【SQL SERVER】
エラーメッセージ
missing required argument ' provider '
経緯
データベースに接続するためのDBContextを継承したクラスを作りたい。
コード
解決
"Server=.;Database=blazordb;Trusted_connection=True"
と
の間にスペースを入れる。
エラー内容はproviderの引数が無いよーと言っている。
第一引数はデータベースへの接続文字列となり、第二引数はプロバイダーとなるため、その間に空欄がないことで第二引数が認識できなかったようだ。本の記載通りにやっていたら、引っかかってしまった。
dotnet ef dbcontext scaffold error: 26 - Error Locating Server/Instance Specified) 【SQL SERVER】
エラーメッセージ
A network-related or instance-specific error occurred while establishing
a connection to SQL Server. The server was not found or was not accessible.
Verify that the instance name is correct and that SQL Server is configured
Verify that the instance name is correct and that SQL Server is configured
to allow remote connections.
(provider: xxx, error: 26 - Error Locating Server/Instance Specified)
コード
解決
「Server=」の参照先を間違えていた。
参照個所はVisualStudioのデータべース名のプロパティ > 現在の接続パラメータ >「サーバー」を参照する。
ちなみに「DataBase=」はデータベース名を参照する。
error: 40 - Could not open a connection to SQL Server)
error 40でも同様のエラーが起きていると思うので上記確認をしたほうがよいだろう。
it does not have [ParameterAttribute] or [CascadingParameterAttribute] applied. 【C#/Blazor】
エラーメッセージ
Unhandled exception rendering component: Object of type
'BlazorApplicationxxx.Pages.Components.BmiChild'
has a property matching the name 'xxxx', but it does not have
[ParameterAttribute] or [CascadingParameterAttribute] applied.
問題のコード
親から子(Weight)を呼び出し
<BlazorApplication2.Pages.Components.BmiChild @bind-Weight="Weight" />
解決
[Parameter]
public double Weight
{
get => _Weight;
set
{
}
}
エラー通りにパラメータ属性を追加してあげて解決。
外部からプロパティにアクセスする場合は、プロパティにパラメータ属性を追加してあげる。
