实现一个自增的列表控件，我们可以使用Django的forms模块中的ModelChoiceField和forms.Form类。ModelChoiceField用于生成一个下拉列表，而forms.Form则是用于创建表单的。

步骤如下：

1. 首先，我们需要在models.py中定义一个模型，这个模型将作为我们列表的数据源。
2. 然后，在forms.py中，我们创建一个表单，这个表单包含一个ModelChoiceField字段，这个字段的数据源是我们之前定义的模型。
3. 最后，在views.py中，我们创建一个视图函数，这个函数返回一个渲染了我们刚刚创建的表单的HTML页面。

以下是具体的代码实现：

1. 在models.py中定义模型：

from django.db import models

class MyModel(models.Model):
    name=models.CharField(max_length=100)

2. 在forms.py中创建表单：

from django import forms
from .models import MyModel

class MyForm(forms.Form):
    my_field=forms.ModelChoiceField(queryset=MyModel.objects.all())

3. 在views.py中创建视图函数：

from django.shortcuts import render
from .forms import MyForm

def my_view(request):
    form=MyForm()
    return render(request, 'my_template.html', {'form': form})

4. 在my_template.html中渲染表单：

<form method="post">
    {% csrf_token %}
    {{ form }}
    <button type="submit">Submit</button>
</form>

注意：这里的代码只是一个基本的实现，实际使用时可能需要根据具体需求进行修改。例如，你可能需要添加错误处理代码，或者在用户提交表单后保存数据等。

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

完善菜单内容

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

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

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

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