- A+
所属分类:.NET技术
组件解决的问题
由于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类,不建议使用此组件进行处理。