04 2022 档案
摘要:组件介绍 按钮组件,应该是最基础的组件之一了。感觉没什么可介绍的,但是BootstrapBlazor的按钮,还是有很多不错的特性。 首先是最基础的,boostrap5的按钮样式: 代码如下: <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Butt
阅读全文
摘要:组件介绍 EditorForm 组件是一个非常实用的组件,当进行数据编辑时,仅需要将 Model 属性赋值即可。 绑定模型默认自动生成全部属性,可以通过设置 AutoGenerateAllItem 更改为不自动生成如不需要编辑列,设置 Editable 即可,默认值为 true 生成编辑组件复杂编辑
阅读全文
摘要:组件介绍 Circle进度环组件,是一个图表类组件。一般有两种用途: 显示某项任务进度的百分比。 统计某些指标的占比。 它的样子如下: 它的代码如下: <Circle Width="250" Value="75" Color="Color.Success" StrokeWidth="10" Show
阅读全文
摘要:组件介绍 在Bootstrap中,我们经常使用row和col通过栅格化来控制显示位置。 如 <div class="row"> <div class="col-12"></div> </div> 会显示一个充满行的div。 但是我们需要编写很多代码,比如大量重复的div标签。还有col的class。
阅读全文
摘要:组件介绍 Markdown组件是tui.editor的封装,所以所有内容均基于tui.editor。 默认状态下样子如下所示: 其代码如下: <Markdown Language="@Language" @bind-Value="@MarkdownString" @bind-Html="@HtmlS
阅读全文
摘要:组件说明 Model组件是一个模态框组件,可以弹出一个对话框,适合需要定制性更大的场景。 它的样子如下: 其html代码为: <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">弹窗标题</h5
阅读全文
摘要:组件介绍 上一篇文章我们介绍了Alert组件,但是实际上Alert组件只能直接把内容加载到页面内,这个做不到当作提示使用。 所以我们还有一个新的组件Message。这个组件的样式几乎与Alert组件一模一样。但是它可以浮动在窗口之上,4秒之后消失。 代码如下: await MessageServic
阅读全文
摘要:组件介绍 Alert组件几乎是组件库里必不可少的组件了,即使浏览器,也自带了一个alert,会弹出一个模态框。 但是这个模态框有点太丑了,所以各大组件库分分实现了自己的Alert组件。 当然BootstrapBlazor也不例外,同样实现了自己的Alert。 样子如下: 对应的代码为: <Alert
阅读全文
摘要:组件介绍Editor组件是对Summernote 组件的二次封装。组件分为div模式和editor模式。默认状态下editor模式的组件样子如下:其代码如下:<Editor @bind-Value="@EditorValue" IsEditor="true"></Editor>我们可以通过@bind
阅读全文
摘要:我们在Jx.Cms开发笔记(三)-Views主题动态切换中说了如何切换主题。但是这里有一个问题,就是主题切换时,会报错这是由于asp.net core在处理Views的信息的时候是在构造函数中处理的,没有任何方法可以刷新这个处理结果。这里放最新版的DefaultViewCompiler代码,在Jx.
阅读全文
摘要:标签页的样子设计思路与其他输入框一样,存在一个Label标签,由于这里不像其他输入框一样可以直接使用Row标签,所以这里需要额外增加。使用Tag组件显示所有的标签,我们在Blazor 组件库 BootstrapBlazor 中Tag组件介绍中写过使用方法。使用AutoComplete组件输入新的标签
阅读全文
摘要:AutoComplete组件介绍 AutoComplete组件和文本框基本上样子是一样的,只不过AutoComplete组件还带有一个下拉列表,可以从中选择对应的内容。 其同样继承自BootstrapInputBase,所以,它同样拥有BootstrapInputBase的所有属性。 一个最小的Au
阅读全文
摘要:Tag组件的样子 Tag组件的介绍 Tag组件是一个非常简单的组件。 <Tag Icon="fa fa-fw fa-check-circle" Color="Color.Success" ShowDismiss="true" OnDismiss="@DismissClick">标签一</Tag> 这
阅读全文
摘要:在Blazor 组件库 BootstrapBlazor 中Card组件介绍中我们说过,如果我们使用了Card组件的IsCollapsible属性设置了可伸缩的话,就只能使用Text属性来设置标题文本,不能自己定义了。但是我们在widget组件设置的时候希望在CardHeader里放一个按钮或者一个下
阅读全文
摘要:一个较为完整的Card样子Card组件介绍Card组件分为三部分,CardHeader、CardBody、CardFooter。代码格式如下:<Card> <CardHeader> Featured </CardHeader> <CardBody> <h5>Special title treatme
阅读全文
摘要:效果展示我们可以在后台动态切换主题目前Jx.Cms有两个主题,其中一个是默认主题,另一个是仿的Blogs主题。我们可以通过点击启用按钮来动态切换两个主题。实现方法首先写一个实现IViewLocationExpander接口的类,我这里命名为TemplateViewLocationExpander.p
阅读全文
摘要:在c#中,有时候我们会编写类似这样的代码:public class a<T> { //具体类的实现 } public class b : a<string>{}如果b继承a的类型不确定,这个时候我们是无法通过baseType来直接判断b是否继承于a的。如果我们写如下代码:typeof(b).base
阅读全文
摘要:组件解决的问题由于Blazor在与服务器连接时使用了Websocket,仅在第一次连接时会走原MVC的连接逻辑。所以,我们无法在这个过程中完成例如身份认证、cookie处理等操作。此组件即为解决此类问题准备的。组件用法官网文档可以直接查阅这里给出一部分代码:在页面上添加<Ajax></Ajax>的组
阅读全文
摘要:我们在blazor中,如果代码有异常,会产生如下的错误在群里很多朋友都问,这个错误提示是英文的,能不能改成中文?这个当然是可以的。其实这个错误描述是在项目里自己定义的,具体内容可以看_Layout.cshtml中内容。其中有这样一段:<div id="blazor-error-ui"> <envir
阅读全文
摘要:在MVC中,我们经常使用区域(Area)来区分各个模块,比如后台我们可以写一个Admin的Area。到了Blazor时代,已经不推荐这么做了,现在推荐的做法是通过Url来区分,比如Admin可以配置@page /Admin/Article,实现与原来Admin的Area差不多的用法。但是有时候我们有
阅读全文
摘要:界面此界面完全抄了BootstrapAdmincss隔离由于登录页面的css与其他页面没有什么关系,所以为了防止其他界面的css被污染,我们需要使用css隔离。css隔离需要在_Host.cshtml中添加一条css引用。此引用如果使用Blazor模板创建项目时会自带,如果自己添加新的Area,则需
阅读全文
摘要:开始 从今天开始,我们将开启Jx.Cms系列开发教程。 我们将会使用Jx.Cms来介绍Blazor的开发、MVC的开发,热插拔插件的开发等等一系列开发教程。 介绍 Jx.Cms是一个使用最新版.NET(目前为.NET6)的Cms系统,前台使用MVC,后台使用Blazor。 亮点 前台使用MVC,SE
阅读全文