程序员的资源宝库

网站首页 > gitee 正文

Blazor 组件库 BootstrapBlazor中 Ajax 组件的使用

sanyeah 2024-04-06 14:24:09 gitee 4 ℃ 0 评论

组件解决的问题

由于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组件是比较简单的jqueryAjax方法的封装,封装的内容比较少,只支持Json作为参数,返回值也会转换成Json,所以仅建议用于登录等内部前后端交流,并且需要带cookie或者必须由浏览器发起的特殊逻辑中。

复杂的访问,建议使用c#的HttpClient类,不建议使用此组件进行处理。

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表