
Ajax call
The ajax method used to use js directly in the browser to interact with the server currently only supports both input and output as json, and the return value is a json string, which can be converted and processed by itself.
Basic usage
Impersonate a login
Demo
Special attention:
Here is only a login simulation, and there is no real call to
HttpContext.SignInAsync
, the real use needs to refresh the page after the login is completed, otherwise the real login can not be successful.Page jump
Implementing page jumps with Js
addresses an issue where Blazor
pages don't really refresh when they're jumped as SPA
Demo
@page "/ajaxs"
@inject IStringLocalizer<Ajaxs> Localizer
<h3>Ajax call</h3>
<h4>The ajax method used to use js directly in the browser to interact with the server currently only supports both input and output as json, and the return value is a json string, which can be converted and processed by itself.</h4>
<DemoBlock Introduction="Impersonate a login" Title="Basic usage" Name="Normal">
<p>
<b>Special attention:</b>
<div>Here is only a login simulation, and there is no real call to<code> HttpContext.SignInAsync </code>, the real use needs to refresh the page after the login is completed, otherwise the real login can not be successful.</div>
</p>
<div class="mb-3">@ResultMessage</div>
<Button OnClick="Success">Login successful</Button>
<Button OnClick="Fail">Login failed</Button>
</DemoBlock>
<DemoBlock Introduction="Implementing page jumps with<code> Js </code> addresses an issue where <code> Blazor </code> pages don't really refresh when they're jumped as <b> SPA </b>" Title="Page jump" Name="Goto">
<Button OnClick="Goto">Jump to the first page of the document</Button>
<Button OnClick="GotoSelf">Jump to yourself (refresh page)</Button>
</DemoBlock>
<Ajax></Ajax>
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/
using BootstrapBlazor.Components;
using Microsoft.AspNetCore.Components;
using System.Text.Json;
namespace BootstrapBlazor.Shared.Samples;
/// <summary>
/// Ajax示例类
/// </summary>
public partial class Ajaxs
{
private string? ResultMessage { get; set; }
[Inject]
[NotNull]
private AjaxService? AjaxService { get; set; }
[Inject]
[NotNull]
private SwalService? SwalService { get; set; }
private async Task Success()
{
var option = new AjaxOption
{
Url = "/api/Login",
Data = new User() { UserName = "admin", Password = "123456" }
};
var result = await AjaxService.GetMessage(option);
if (result == null)
{
ResultMessage = "响应失败";
}
else
{
ResultMessage = result;
var doc = JsonDocument.Parse(result);
if (200 == doc.RootElement.GetProperty("code").GetInt32())
{
await SwalService.Show(new SwalOption() { Content = "登录成功!", Category = SwalCategory.Success });
}
else
{
await SwalService.Show(new SwalOption() { Content = $"登录失败:{doc.RootElement.GetProperty("message").GetString()}", Category = SwalCategory.Error });
}
}
}
private async Task Fail()
{
var option = new AjaxOption
{
Url = "/api/Login",
Data = new User() { UserName = "admin", Password = "1234567" }
};
var result = await AjaxService.GetMessage(option);
if (result == null)
{
ResultMessage = "响应失败";
}
else
{
ResultMessage = result;
var doc = JsonDocument.Parse(result);
if (200 == doc.RootElement.GetProperty("code").GetInt32())
{
await SwalService.Show(new SwalOption() { Content = "登录成功!", Category = SwalCategory.Success });
}
else
{
await SwalService.Show(new SwalOption() { Content = $"登录失败:{doc.RootElement.GetProperty("message").GetString()}", Category = SwalCategory.Error });
}
}
}
private async Task Goto()
{
await AjaxService.Goto("/introduction");
}
private async Task GotoSelf()
{
await AjaxService.Goto("/ajaxs");
}
}