网站首页 > 教程分享 正文
上一节我们实现了分类树的右键菜单弹出,本节我们继续实现数据从浏览器到数据库的工作。
完善菜单内容
我们先来丰富右键菜单的选项,在Menu控件中添加MenuItem,分别是修改节点和删除节点:
<Menu Style="@menuStyle">
???????<MenuItem OnClick="CreateNode">
???????????@menu_create_text
???????</MenuItem>
???????<MenuItem OnClick="ModifyNode">
???????????修改节点
???????</MenuItem>
???????<MenuItem OnClick="DeleteNode">
???????????删除节点
???????</MenuItem>
???</Menu>
由于修改和删除不像创建涉及到不同的名称,所以菜单文章内容直接写死。事件响应代码一并复制就好。
void ModifyNode(MouseEventArgs args)
{
menuStyle = "display:none;";
}
void DeleteNode(MouseEventArgs args)
{
menuStyle = "display:none;";
}
运行效果:
创建分类编辑组件
我们的右键菜单现在有了事件触发,接下来要弹出分类编辑页面来录入信息。我们首先需要创建一个名为CategoryEdit.Razor组件,过程跟上一节我们创建ContextMenuPanel一样。如下图:
这个过程我们以后就不再讲了。
有同学私信问不使用Ant Design组件,直接用Blazor系统的组件可行吗?我觉得这个问题比较有代表性,所以这个CategoryEdit我就不使用Ant Design的组件来完成。先上完整的代码吧:
<div style="width:100%; display:@display;">
<div class="page">
<div @onclick="toggle" id="close">X</div>
<div style="padding: 10px;">
<ul>
<li class="item"><span>编码:</span><input @bind="@Value.Id" /></li>
???????????????<li class="item"><span>名称:</span><input @bind="@Value.Name" /></li>
???????????????<li class="item"><span>所属Id:</span><input @bind="@Value.ParentId" /></li>
???????????</ul>
???????????<ul>
???????????????<li class="item">
???????????????????<span>是否有子类:</span>
???????????????????<select @bind="@has_child">
???????????????????????<option value="1">true</option>
???????????????????????<option value="0">false</option>
???????????????????</select>
???????????????</li>
???????????????<li class="item"><span>分类类型:</span><input @bind="@Value.Type" /></li>
???????????????<li class="item"><span>显示顺序:</span><input @bind="@Value.ShowOrder" /></li>
???????????</ul>
???????????<div>
???????????????<label>分类描述:</label>
???????????????????<textarea style="width:100%; min-height:200px;" @bind=@Value.Description></textarea>
???????????????<label>备注:</label>
???????????????????<textarea style="width:100%; min-height:200px;" @bind=@Value.Remark></textarea>
???????????</div>
???????????<button @onclick="save">保存</button>
???????</div>
???</div>
</div>
@code {
???string display = "none";
???public void toggle()
???{
???????display = (display == "none") ? "block" : "none";
???}
???[Parameter]
???public EventCallback OnSave { get; set; }
???[Parameter]
???public Model.Category Value { get; set; }
???int has_child = 0;
???void save()
???{
???????Value.HasChild = (has_child == 0) ? false : true;
???????if (OnSave.HasDelegate) OnSave.InvokeAsync();
???}
}
样式文件CategoryEdit.razor.css
.page { width:960px; border: 1px solid #CCC; margin-left:auto; margin-right:auto; }
.item { width: 280px; list-style:none; display: inline-block; }
.item span { width: 100px; display: inline-block; }
#close {
position: relative;
text-align: center;
cursor: pointer;
background: #FCC;
float: right;
width: 20px;
height: 20px;
}
#close:hover {
background-color: #F00;
}
上部分为html元素标签,具体标签和布局就不展开讲了。
@display是引用下面code中的变量,只要display的值变化,这里就会随之生效;
@onclick是绑定click事件;用到了两处,一个是右上角的关闭按钮,一个是下方的保存按钮;
@bind="@Value.Id跟上面的@display类似,只是这个用于控件,控件的值与变量值双向绑定;
public void toggle()是切换是否显示的方法,默认隐藏,调用一次就切换一次;
[Parameter]是定义CategoryEdit组件的属性;
public EventCallback OnSave是声明一个OnSave的函数作为回调;
public Model.Category Value是要编辑或新建的Category数据实体;
int has_child是对应Model.Category中的HasChild,在标准select及option中无法直接绑定bool类型的熟知,所以用has_child来作为媒介;
void save()则是保存函数,做数据处理后回调OnSave;
css文件在blazor中是隔离的,即声明一个跟razor组件同名的css文件,它就会从属于这个razor组件,只对这个razor生效,这样可以很好的解决不同css文件命名相互冲突的问题。
上面完全都是靠代码堆的,这里有点没想明白为什么微软不延续winform、webform的所见即所得的方式,哪怕是有个设计视图浏览也好。难道是技术上过于复杂吗?目前以Blazor这种开发方式,想要看到修改效果,哪怕是只调一个颜色,都只能重新编译运行才能看到效果,非常影响开发效率。以前webform的那种,改前端根本需要编译,重新刷新页面就好。希望这里未来能有改进。
调用分类编辑组件
CategoryEdit组件设计完成后,我们就可以在Index.razor中使用它了
<CategoryEdit @ref="categoryEditor" Value="@curCategory" OnSave="@SaveCategory"></CategoryEdit>
@code {
CategoryEdit categoryEditor;
Model.Category curCategory = new Model.Category();
void SaveCategory()
{
}
}
我们只需要这几行代码就够了。对属性赋值,响应事件。然后我们先来看下效果:
我们可以看到,调用完成后,在Index.razor中的SaveCategory函数中,curCategory中的值就都有了。实际上我们用的控件库,比如Ant Design也都是这样一步一步来完成的,只要有时间、有耐心,啥都不是事。
到目前为止,我们已经完成了前端的数据准备,接下来我们就是要通过WebAPI正式向服务器提交信息了。在一般的公司中,前端和后端都是分开不同团队来做的,后端做完提供接口,前端按照接口规范进行调用。那我们接下来的事情就是要做后端的工作了,考虑到同样编码内容较多,这节暂时到这里,我们下节继续。
----------------------------------------------------
本教程项目源码已作为开源项目加入到Gitee,代码内容会随教程实时更新,大家有兴趣的话可以关注我,以获得最及时的更新。私信:
私人日记 可以获取相关链接;
大家阅读过程中有哪些看不懂或未尽兴的地方,可以在评论区留言,我会先记下来在后续的教程中找机会再说。
教程有帮助的话请大家帮忙关注、转发、扩散,能不能开专栏还需要你们的支持!
猜你喜欢
- 2024-10-23 NEW!WinForm界面开发设计时正式支持.NET 5
- 2024-10-23 Winform界面开发:如何在时间单元格中绘制旋转的文本
- 2024-10-23 WinForm界面开发:在DevExpress中使用TeeList控件及节点查询处理
- 2024-10-23 C# WinForm开发书店管理系统第四节
- 2024-10-23 C# WinForm界面设计教程——第6节
- 2024-10-23 C# WinForm开发书店管理系统第三节
- 2024-10-23 如何快速开发树形列表和分页查询整合的Winform程序界面?
- 2024-10-23 WinForm+EF+devexpress开发小型CRM系统(1)
- 2024-10-23 正在Winform界面开发?带你了解Visual Studio Palette Editor
- 2024-10-23 WinForm、WPF、HTML5、QT高级语言开发的触摸屏:跨平台图库绝了
你 发表评论:
欢迎- 最近发表
- 标签列表
-
- css导航条 (66)
- sqlinsert (63)
- js提交表单 (60)
- param (62)
- parentelement (65)
- jquery分享 (62)
- check约束 (64)
- curl_init (68)
- sql if语句 (69)
- import (66)
- chmod文件夹 (71)
- clearinterval (71)
- pythonrange (62)
- 数组长度 (61)
- javafx (59)
- 全局消息钩子 (64)
- sort排序 (62)
- jdbc (69)
- php网页源码 (59)
- assert h (69)
- httpclientjar (60)
- postgresql conf (59)
- winform开发 (59)
- mysql数字类型 (71)
- drawimage (61)
本文暂时没有评论,来添加一个吧(●'◡'●)