一节我们实现了分类树的右键菜单弹出，本节我们继续实现数据从浏览器到数据库的工作。

完善菜单内容

我们先来丰富右键菜单的选项，在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，代码内容会随教程实时更新，大家有兴趣的话可以关注我，以获得最及时的更新。私信：

私人日记 可以获取相关链接；

大家阅读过程中有哪些看不懂或未尽兴的地方，可以在评论区留言，我会先记下来在后续的教程中找机会再说。

教程有帮助的话请大家帮忙关注、转发、扩散，能不能开专栏还需要你们的支持！

页编程之图片、隐藏。

同学们好，这里是免费少儿编程知识分享，每天一行代码谁都能学会。今天分享的知识是为网页添加图片控件和隐藏控件，用到的是input标签的type属性值，image和hidden。这两个控件太过于简单，所以我就放在一起讲了，同时介绍了image控件button的image内容，以及IMG控件之间的区别。演示了hidden控件在实际编程中的作用。

先来看看今天实例的运行效果。网页上分为两段。

·第一段中有三张图片，第一张就是type属性等于image的效果，第二张是button中包含IMG标签的效果，第三张是纯IMG标签的效果。这三张图片的共同点是图片完全一致。不同点是type=image，直接将整张图片做成了提交按钮，点击之后即可提交整张表单，但外观表现时仍然和普通的图片是没有任何差别的。

·第二张是button按钮中使用了IMG标签，虽然它也有提交和图片，但是它最外面仍然保留了按钮的外边框，看上去是以按钮为主。

·第三章中直接使用IMG标签，它没有提交功能就是一普通的图片，但是我们仍然可以通过JS的submit函数来使其提交表单。

·第二段是一个密码框一个提交按钮。这一句话只是为了方便你们找到隐藏空间的位置，我还做了两个hidden的隐藏控件，但是你们看不到，我随便在这里输入密码，然后点击按钮时，JS就会取出(密码)控件的值和隐藏控件中的值并且弹出对话框提示。

这里有两点需要注意，可以看到密码控件中的值在这里仍然是明文显示的，证明它只是视觉上是*或者圆点，实际在数据传输中仍然是明文并没有加密。

·第二点是隐藏控件中的值被成功读取，看不到并不代表不存在，效果各位同学都已经看到了。

在我们来看看实现的代码，先讲image值，它的关键属性就是src和ID，也就是引用地址和命名，没有什么好讲的。我其实是不建议你们使用这个控件的，因为一般表单提交前，都会加上一层一层的验证，比如说是必填、b7手势、数字、格式是否正确。这个时候除了最基础的控件类型验证外还会用到 gs验证。而如果使用 gs验证就需要用到自定义函数，在提交到服务器前就验证好。

如果用户数据是正确的就提交，如果不正确就终止提交操作提示用户修改流程，这样看上去没有问题，但因image控件讨厌也就讨厌在这里。

·若用这种方式提交可能会发生表单提交两次的现象，经常会造成表单元素被重复提交，数据库被写入异常，所以尽量不用或者少用。

·至于hidden控件常用来保存一些不需要或者不希望展示给用户的数据，他的常用属性就是无这个Value和这个id。

我举个例子帮助你们理解，现在客户要求建立一个注册新用户的界面，但是要求将注册步骤分为两步。第一步，需要用户填写手机和昵称，然后跳转至第二页，输入密码和其他的信息，第二页肯定就不需要显示出来用户在第一页的时候输入的数据了。但这些数据又必须在第二页的时候一起提交至服务器。

这时候就可以使用到隐藏控件--接收第一页提交过来的数据并且不显示，用户也感受不到。直接填好信息提交时第一页的数据也以隐藏空间的方式一起提交了。这仅仅是hidde空间的一个使用场景，还可以收集用户信息、确定用户身份、判断提交源，在多个form表单中建立关节联、做全局变量等，总的来说应用方式还是很广的。

在目前这个阶段就只需要知道这两控件能干什么和基础写法，计算完成后面到具体的使用场景时会再详细讲解。

好了，今天的分享就到这里，希望各位同学下去能够照着写三遍，做到不看视频也能够写出来，所有的案例及相关文档均可以向我获取。下期见。网页编程·服务端编程·数据库·算法，点赞点关注吧！