Blazor 組件庫 BootstrapBlazor中 Ajax 組件的使用

組件解決的問題

由於Blazor在與服務器連接時使用了Websocket，僅在第一次連接時會走原MVC的連接邏輯。所以，我們無法在這個過程中完成例如身份認證、cookie處理等操作。

此組件即為解決此類問題准備的。

組件用法

官網文檔可以直接查閱

這里給出一部分代碼：

• 在頁面上添加<Ajax></Ajax>的組件引用

• @inject AjaxService AjaxService注入AjaxService

• 
  

var option = new AjaxOption
        {
            Url = "/api/Login",
            Data = new User() { UserName = "admin", Password = "123456" }
        };

定義一個AjaxOption，其中Url即為要訪問的WebApi地址，Data為RequestData。默認method為POST，也可以自己定義。

• var result = await AjaxService.GetMessage(ajaxOption);使用AjaxService.GetMessage來調用Ajax方法訪問指定Url並獲取返回。

在官網例子中，WebApi的定義如下：

[Route("api/[controller]")]
[AllowAnonymous]
[ApiController]
public class LoginController : ControllerBase
{
    /// <summary>
    /// 
    /// </summary>
    /// <param name="user"></param>
    /// <returns></returns>
    [HttpPost]
    public IActionResult Post(User user)
    {
        IActionResult? response;
        if (user.UserName == "admin" && user.Password == "123456")
        {
            response = new JsonResult(new { Code = 200, Message = "登錄成功" });
        }
        else
        {
            response = new JsonResult(new { Code = 500, Message = "用戶名或密碼錯誤" });
        }
        return response;
    }
}

這里校驗如果用戶名為admin並且密碼為123456時返回登錄成功，否則返回用戶名或密碼錯誤。

然后我們就可以判斷返回的result來判斷是否登錄成功。

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 });
            }
        }

建議使用位置

Ajax組件是比較簡單的jquery的Ajax方法的封裝，封裝的內容比較少，只支持Json作為參數，返回值也會轉換成Json，所以僅建議用於登錄等內部前后端交流，並且需要帶cookie或者必須由瀏覽器發起的特殊邏輯中。

復雜的訪問，建議使用c#的HttpClient類，不建議使用此組件進行處理。