實現(xiàn)一個自增的列表控件，我們可以使用Django的forms模塊中的ModelChoiceField和forms.Form類。ModelChoiceField用于生成一個下拉列表，而forms.Form則是用于創(chuàng)建表單的。

步驟如下：

1. 首先，我們需要在models.py中定義一個模型，這個模型將作為我們列表的數(shù)據(jù)源。
2. 然后，在forms.py中，我們創(chuàng)建一個表單，這個表單包含一個ModelChoiceField字段，這個字段的數(shù)據(jù)源是我們之前定義的模型。
3. 最后，在views.py中，我們創(chuàng)建一個視圖函數(shù)，這個函數(shù)返回一個渲染了我們剛剛創(chuàng)建的表單的HTML頁面。

以下是具體的代碼實現(xiàn)：

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

from django.db import models

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

2. 在forms.py中創(chuàng)建表單：

from django import forms
from .models import MyModel

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

3. 在views.py中創(chuàng)建視圖函數(shù)：

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>

注意：這里的代碼只是一個基本的實現(xiàn)，實際使用時可能需要根據(jù)具體需求進(jìn)行修改。例如，你可能需要添加錯誤處理代碼，或者在用戶提交表單后保存數(shù)據(jù)等。

一節(jié)我們實現(xiàn)了分類樹的右鍵菜單彈出，本節(jié)我們繼續(xù)實現(xiàn)數(shù)據(jù)從瀏覽器到數(shù)據(jù)庫的工作。

完善菜單內(nèi)容

我們先來豐富右鍵菜單的選項，在Menu控件中添加MenuItem，分別是修改節(jié)點和刪除節(jié)點：

<Menu Style="@menuStyle">
???????<MenuItem OnClick="CreateNode">
???????????@menu_create_text
???????</MenuItem>
???????<MenuItem OnClick="ModifyNode">
???????????修改節(jié)點
???????</MenuItem>
???????<MenuItem OnClick="DeleteNode">
???????????刪除節(jié)點
???????</MenuItem>
???</Menu>

由于修改和刪除不像創(chuàng)建涉及到不同的名稱，所以菜單文章內(nèi)容直接寫死。事件響應(yīng)代碼一并復(fù)制就好。

void ModifyNode(MouseEventArgs args)
{
menuStyle="display:none;";
}

void DeleteNode(MouseEventArgs args)
{
menuStyle="display:none;";
}

運(yùn)行效果：

創(chuàng)建分類編輯組件

我們的右鍵菜單現(xiàn)在有了事件觸發(fā)，接下來要彈出分類編輯頁面來錄入信息。我們首先需要創(chuàng)建一個名為CategoryEdit.Razor組件，過程跟上一節(jié)我們創(chuàng)建ContextMenuPanel一樣。如下圖：

這個過程我們以后就不再講了。

有同學(xué)私信問不使用Ant Design組件，直接用Blazor系統(tǒng)的組件可行嗎？我覺得這個問題比較有代表性，所以這個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元素標(biāo)簽，具體標(biāo)簽和布局就不展開講了。

@display是引用下面code中的變量，只要display的值變化，這里就會隨之生效；

@onclick是綁定click事件；用到了兩處，一個是右上角的關(guān)閉按鈕，一個是下方的保存按鈕；

@bind="@Value.Id跟上面的@display類似，只是這個用于控件，控件的值與變量值雙向綁定；

public void toggle()是切換是否顯示的方法，默認(rèn)隱藏，調(diào)用一次就切換一次；

[Parameter]是定義CategoryEdit組件的屬性；

public EventCallback OnSave是聲明一個OnSave的函數(shù)作為回調(diào)；

public Model.Category Value是要編輯或新建的Category數(shù)據(jù)實體；

int has_child是對應(yīng)Model.Category中的HasChild，在標(biāo)準(zhǔn)select及option中無法直接綁定bool類型的熟知，所以用has_child來作為媒介；

void save()則是保存函數(shù)，做數(shù)據(jù)處理后回調(diào)OnSave；

css文件在blazor中是隔離的，即聲明一個跟razor組件同名的css文件，它就會從屬于這個razor組件，只對這個razor生效，這樣可以很好的解決不同css文件命名相互沖突的問題。

上面完全都是靠代碼堆的，這里有點沒想明白為什么微軟不延續(xù)winform、webform的所見即所得的方式，哪怕是有個設(shè)計視圖瀏覽也好。難道是技術(shù)上過于復(fù)雜嗎？目前以Blazor這種開發(fā)方式，想要看到修改效果，哪怕是只調(diào)一個顏色，都只能重新編譯運(yùn)行才能看到效果，非常影響開發(fā)效率。以前webform的那種，改前端根本需要編譯，重新刷新頁面就好。希望這里未來能有改進(jìn)。

調(diào)用分類編輯組件

CategoryEdit組件設(shè)計完成后，我們就可以在Index.razor中使用它了

<CategoryEdit @ref="categoryEditor" Value="@curCategory" OnSave="@SaveCategory"></CategoryEdit>
@code {
CategoryEdit categoryEditor;
Model.Category curCategory=new Model.Category();
void SaveCategory()
{
}
}

我們只需要這幾行代碼就夠了。對屬性賦值，響應(yīng)事件。然后我們先來看下效果：

我們可以看到，調(diào)用完成后，在Index.razor中的SaveCategory函數(shù)中，curCategory中的值就都有了。實際上我們用的控件庫，比如Ant Design也都是這樣一步一步來完成的，只要有時間、有耐心，啥都不是事。

到目前為止，我們已經(jīng)完成了前端的數(shù)據(jù)準(zhǔn)備，接下來我們就是要通過WebAPI正式向服務(wù)器提交信息了。在一般的公司中，前端和后端都是分開不同團(tuán)隊來做的，后端做完提供接口，前端按照接口規(guī)范進(jìn)行調(diào)用。那我們接下來的事情就是要做后端的工作了，考慮到同樣編碼內(nèi)容較多，這節(jié)暫時到這里，我們下節(jié)繼續(xù)。

----------------------------------------------------

本教程項目源碼已作為開源項目加入到Gitee，代碼內(nèi)容會隨教程實時更新，大家有興趣的話可以關(guān)注我，以獲得最及時的更新。私信：

私人日記 可以獲取相關(guān)鏈接；

大家閱讀過程中有哪些看不懂或未盡興的地方，可以在評論區(qū)留言，我會先記下來在后續(xù)的教程中找機(jī)會再說。

教程有幫助的話請大家?guī)兔﹃P(guān)注、轉(zhuǎn)發(fā)、擴(kuò)散，能不能開專欄還需要你們的支持！